THE HAM MEDIA BLOG

先日のLOCAL PHP部のつどいに参加したとき、
プログラムはかけるけど、マークアップとかCSSは苦手という人が何人かいた。
HTMLのバリデートやCSSのレンダリングを見るために、
このFirefoxのアドオンを入れておくと便利！
というのをいくつか紹介しておきたいと思います。

ハムも使っているオススメのアドオン

■Firebug

これはすでに入れている人も多いツール。

このFirebugを使ってCSSの修正チェックをしたり、
JavaScriptの動作チェックやエラーチェックをしたり、
HTMＬ、CSS、JavaScriptのチェックが容易にできるのだ。

調査を使うことで、ブロック要素の大きさも見たりできるは魅力的。

コーダーでも、最低限これは入れておきたいアドオンだ。

■Web Developer

コーダーとかWebデザイナーには必須のアドオンの一つだと思っている。
でも意外だったのは、プログラマーさん達はこれをあまり入れていないようだ。

これを使うことで、CSSのオンオフや、JavaScriptのオンオフ、
クッキーのオンオフやクッキー情報の削除、
フォームや画像関連のことなどを制御することができるツールだ。

また、表示上での様々な情報を表示することが可能だ。
下の画像は、ボックス要素のサイズを表示した状態。

要素の状態やXPath(祖先・子孫セレクタ)などを表示することも可能。

そして何よりうれしいのが、Validatorチェックが容易にできること。
ツールに各種検証リンクが入っていて、見ているページをチェックすることができる。
自分のパソコンのローカルファイルも、そこから簡単にチェックできるのはかなり魅力的。

これも必ず入れておきたいアドオンの一つだ！

■JSView

これは、見ているページで読み込まれているJavaScriptファイルやCSSファイルを
簡単に開くことができるアドオンである。

僕のブログを見ると、JavaScriptファイルの読み込みすぎなのがよくわかる。
CSSも簡単に開くことができるので、入れてあると便利なツールだ。
ただ、CSSを@importで読み込んでいるファイルは表示されないのは悲しいところ。

■HTML Validator

validatoのアドオンとしては、Web Developerと重なる部分もあるが、
このHTML Validatorの優れているところは、
わざわざW3Cのチェックサイトやlintなどのチェックサイトに行かなくても
チェックしたいページをみているだけで文法チェックができるところである。

間違っている箇所も何行目にあるのかもおしえてくれるので、
すぐに修正することができてしまう。

■IE Tab

最後の５つ目はIE Tab。
このアドオン、IEがもともと使えないMacでは使うことができない。
しかし、Windowsユーザーであれば、入れておいたほうがいいアドオンである。

Firefoxをレンダリングチェックの基本にしていても、
IEで見たときに崩れてしまっているということが多々ある。

PCに入っているIEが６であると、確認する側としてはとてもいい。

プログラマは意外とバリデートとか気にしない？

上記にあげたのは、HTMLやCSSの修正やチェックが簡単になるアドオンばかり。
しかし多くの人が使っているのは、FirebugやIE Tabくらいだったりする。
もう少しHTMLの出力結果などを気にしてもらいたい僕としては、
せめてWeb DeveloperとHTML Validatorを入れておいてもらいたいと思う。

もちろんプログラマだけでなく、コーダーやデザイナーの人も、
上記のアドオンは入れておくと便利！
まだ入れていない人はぜひ入れてみてはどうだろう。