月別アーカイブ: 2011年8月

Firebugのコンソール画面にサイトの禁止文字列チェックの結果を表示してみる


Firebugのコンソール画面に、
サイト内で使ってはいけない禁止文字列をチェックした結果を表示するための
Greasemonkey用user.jsを作ってみた。

これを使えばどんなサイトでも常に禁止文字列チェックが可能になります。

keyword_checker_by_console.user.js
※右クリックでダウンロードできます。

基本設定は、禁止文字列や禁止タグをuser.jsの配列部分に追記するだけです。
実際に動かしてみると、Firebugのコンソール画面に禁止文字列があったときに表示されます。

例えば、コーダーチェックシートのようなものがあったときに、
「「Firebug コンソール > 情報」で禁止文字列がないか確認した」という項目を追加すればいいわけです。

▼Firebug コンソール > 情報
Firebugのコンソール画面

※ただし、JavaScriptなどで常に内容が変化するようなページの場合など、
正確にチェックできないこともありますので、ご注意ください。

// ==UserScript==
// @name           禁止文字列&タグチェック(コンソールβ版)
// @include        *
// @exclude        http://hoge*
// ==/UserScript==

(function(){

var w = "";
// 禁止文字列指定
var keywords = new Array('hoge','ホゲ');
// 禁止タグ指定
var elements = new Array('font','blink','marquee');

for(var i=0;i<keywords.length;i++){
	if(w != ""){
	w += "|";
	}
	w += keywords&#91;i&#93;;
}

for(var i=0;i<elements.length;i++){
	if(w != ""){
	w += "|";
	}
	w += "<(/)?" + elements&#91;i&#93; + "(&#91;^>]+)?>([^<&#93;+</" + elements&#91;i&#93; + ">)?";
}

var re = new RegExp(w, "gm");

var console = {
	_defined: false,
	info: function(object) {
		if (!console._defined) {
			console._defined = true;
			location.href = "javascript:" + uneval(function() {
				document.addEventListener("consoleData",
					function(event) {
					  console.info.apply(this, event.getData("object"));
					},
				false);
			}) + "()";
		}
		setTimeout(send, 1000, arguments);
		function send(object) {
			var event = document.createEvent("DataContainerEvent");
			event.initEvent("consoleData", true, false);
			event.setData("object", object);
			document.dispatchEvent(event);
		}
	}
};

var h = document.getElementsByTagName('html')[0].innerHTML;
h = h.replace(/t/g, " ");
h = h.replace(/^[ ]+/gm, " ");
h = h.replace(/rn|r|n/gm, "n");
h = h.replace(/(<head(&#91;^>]+)?>)/g, "nn$1");
h = h.replace(/</head><body/g, "</head>n<body");
h = h.replace(/</body>.*?/g, "n</body>");
var rows = h.split("n");
var rows_match_flag = 0;
for(var row_i=0;row_i<rows.length;row_i++){
	if (rows&#91;row_i&#93;.match(re)) {
		rows_match_flag = 1;
		var info = "禁止文字列(" + rows&#91;row_i&#93;.match(re).length + "件)";
		var hits = new Array();
		var hits_count = new Array();
		var hits_i = 0;
		for(var j=0;j<rows&#91;row_i&#93;.match(re).length;j++){
			var flag = 0;
			if(j == 0){
				flag = 1;
			}
			else{
				for(var k=0;k<hits.length;k++){
					var re_e = new RegExp(hits&#91;k&#93;);
					if (rows&#91;row_i&#93;.match(re)&#91;j&#93;.match(re_e)) {
						hits_count&#91;k&#93;++;
						flag = 0;
						break;
					}
					else{
						flag = 1;
					}
				}
			}
			if(flag > 0){
				hits[hits_i] = rows[row_i].match(re)[j];
				hits_count[hits_i] = 1;
				hits_i++;
			}
		}
		for(var l=0;l<hits.length;l++){
			if(hits_count&#91;l&#93; > 1){
			info += "「" + hits[l] + "」" + "×" + hits_count[l];
			}
			else{
			info += "「" + hits[l] + "」";
			}
		}
		info += "がマッチしました(" + (row_i + 1) + "行目前後)n";
		console.info(info + rows[row_i]);
	}
}

if(rows_match_flag == 0){
	console.info("禁止文字列は見つかりませんでした。");
}

})();

▼参考URL
Greasemonkeyから安全にconsole.logを利用する
効率的なデバッグをサポートするFirebugのコンソールAPI

サイト内で使われていないCSSセレクタを見つけるFirefoxアドオン


サイトが大きくなればなるほどサイト内で使用していないCSSセレクタが増えていきますよね。

下記のFirefoxアドオンを使えば、サイトで使用されているCSSセレクタと、
使用されていないCSSセレクタを調べることができます。

Dust-Me Selectors
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

対象サイトの指定方法はURL指定する方法とsitemap.xmlを作成する方法がありますが、
サイトの全ページを漏らさず対象にするために、sitemap.xmlを作成する方法がおすすめです。

ただし、IEハックなどは判定対象外になりますから、
結果をそのまま鵜呑みにするのは危険ですかね。