JavaScript

WordPressのログイン画面で2回パスワード間違えたsunitiです。前にエントリー書いたのいつだろ・・・？

少し前の話になりますが、linker journalの「普段読んでるRSS一覧でも＜Web制作系編＞」というエントリーにこのブログが載ってるのを見かけて心苦しくなったので何か書こうと思った次第です。
deliciousが自動更新するブログになっていてホントすんまへん。へこへこ。

さて、皆さんはalt、description、keywordsのチェックはどうされてますか？
下階層で同じようなレイアウトのページが続くと前回作ったものをコピーして作ったりしますが、その際にalt、description、keywordsを更新し忘れてて公開後にギャースとなることがまれにあります。

数ページのサイトであればチェックも手間では無いのですが、数百ページとかになるとaltチェックだけでもかなりの手間になります。
そこで自分はjQueryでコードを書きテストサーバーにアップ後、それを読み込ませてブラウジングしながらチェックしています。

左の画像がJSを読み込ませる前、右が今回のコードを読み込ませた後

右の左側（わかりにくいな）の画像にはaltが入っているので画像の左上にaltテキストが表示されます。
右の右側の画像はaltが抜けていたので画像に枠がつきます。

また、body直下にdescriptionとkeywordが出力されます。
bodyに背景画像でごにょごにょしてる場合は崩れる可能性大！（まぁチェックだからいいよね）

$(function(){
//description、keywordチェック
	$("body").prepend('<div>description: ' + $("meta:[name^='description']").attr("content") + '</div>');
	$("body").prepend('<div>keywords   : ' + $("meta:[name^='keywords']").attr("content") + '</div>');

//altチェック
	$("img").each(function(){
		var h = $(this).height();
		if($(this).attr("alt")){
			$(this).after('<div style="z-index:999;position: absolute;background-color: #333; color:#FFF; font-size:10px; padding:5px;margin-top:-' + h + 'px;">' + $(this).attr("alt") + '</div>');
		}
		else{
			$(this).css({ backgroundColor:"#F00", padding:"5px" });
		}
	});
});

無理やり出力させてたりするので、画像の上にaltテキストが乗らなかったりしますが、その辺は見なかった体でお願いします。

jQuery1.3.2＆Firefox以外ではめんどくさくてチェックしてませんので動かなかったらごめんなさい。