普通のインターネットユーザー（変な言葉だな）はこんなものに興味はないと思うが、多少なりともWeb制作なり、Webページのカスタマイズ、Blogのカスタマイズに手を出した人にとっては、確実に役立つであろうFirefoxのプラグインがある。
Firebug-Web Development Evolved for Jpanese
嬉しい事に日本語版があるので、英語の苦手な日本人でも気軽にこのプラグインの恩恵にあずかれる。具体的に何が出来るかという概要は上記リンク先を読めば分かる事だが、私が試してみて便利だと思った点をこのエントリーの続きに記そうと思う。
機能のON/OFF
このプラグインをFirefoxに導入すると、メニューの「ツール」に「Firebug」という項目が追加される。機能のON/OFFはここから出来る（もしくはF12キー押下）と覚えておけば、後はやってみると話が早いので是非やってみていただきたい。
HTMLブロックの解析
まずは超基本的な機能。自分のHPなどがあれば構造を理解していると思うので実験には最適である。とにかくお気に入りのサイトを表示してみて欲しい。FirebugをON（F12キー）するとブラウザの下の方に情報を表示するエリアが現れる。もしくは新しいウィンドウで表示（Ctrl + F12）しても良いだろう。使い勝手からすると新しいウィンドウに表示した方が便利だと思われる。やっぱりデュアルディスプレイが理想だな。
左側の部分はタブで切り替えられるが、HTMLの構造を調べるのでHTMLにしておく。具体的にはXHTMLのブロック構造を閉じたり開いたりする事で非常に見やすく階層的に「ソース」を読むことが出来る。もちろん一番最初に出てくる<HTML></HTML>というブロックが大親分になるので、そのブロックの中にある<HEAD></HEAD>と<BODY></BODY>タグが次の子分のブロックになるだろう。それらの左にある[+]をクリックすればブロックを開いて更に中の子供のブロックタグを掘り起こして参照して行くことが出来る。これでXHTMLの構造を解析することが容易に行えるはずだ。
この基本的な機能は<DIV ID="hogehoge"></DIV>などと言うパターンの閉じ忘れ、もしくは変なところで間違えて閉じてしまったという間違いを探す際などの省力化に役立つと思われる。なぜこんな事を書くかと言うと、私は一ヶ月だけだがWeb制作の会社に勤めて仕事に携わったことがあるのだ。もちろんたったの一ヶ月だからXHTML+CSSの深い理解を身に着けるという当初の目的は達成できなかったのだが、現場の実情を肌で感じることが出来たのだ。その際、CSSで体裁を整えているページが微妙に崩れていたりするのを発見し、その原因を調べると大抵は</div>が変なところにゴミとして残っていた為だったり、逆に</div>が足りなかったりするというケースに遭遇した。その時にこのFirebugを知っていれば直ぐに原因を突き止められたのだろうが、その時は残念ながらFirebugを知らなかった為に、ソースを整形するツール（インデントを付ける）で、インデント位置が合わないところを探して修正したりしたものだ。
もちろんその様な「地味」な作業は私だけではなかった。人によってはタグの閉じ忘れが無いかどうかを調べる為にソースをプリントアウトして対を調べながらボールペンで地道にチェックしていた。なぜならタグの閉じ忘れが無いか？正しい場所で対になっているか？はXHTMLの基本中の基本だからだ。しかし手作業を否定するつもりは無いが理屈を理解している人はもっと楽していわゆるバグを見つける能率を上げた方が良いだろう。そんなニーズにも応じてくれるのがこのFirebugである。DreamWeaverにも近い機能は備わっているが、HTMLタグの対を調べるまでは至らない様である（使い方が悪いのかな？）。とにかく無償で利用できるFirebugのシンプル操作でそれが容易に行える点は評価に値する。
（IEでも同等の機能を有するものがあるらしいがそれは別途）
HTML構造の視覚的把握
この機能を使おうとすると、広い画面がどうしても欲しくなる。デュアルディスプレイ環境必須と思えてくる。画面の狭い画面の人はF11キーを押して最大化してから作業をするなどしてなるだけ広い画面で作業すると良いだろう（ALT+TABでウィンドウを切り替えるなど各自工夫すべし）。HTMLブロックの任意の部分にマウスポインタを重ねると、ブラウザで表示している解析対象の表示のどの部分なのかが、ハイライト表示されることに気づくだろうか？例えば<DIV ID="banner">タグなら大抵はバナー部分、<DIV ID="footer">ならフッター部分、<DIV ID="copyright">ならコピーライト部分がハイライトすると思う。こうやって視覚的な確認が行えるのも初心者には嬉しい機能だったりする。もちろんXHTMLソースを読んで直ぐに理解できちゃう人には遊び的な要素だったりするのだろうが。
しかしそんな事は言わせないのもFirebugだったりする。実は逆のことも出来ちゃうから凄いのだ。「調査」ボタンをクリックしておいてから、調査対象のブラウザ画面にマウスポインタを重ねてみる。すると要素を枠で囲んでくれて、それに対応するHTMLブロックがハイライトされる。画面を構成している要素がどこに記述されているのか簡単に探すことが出来るのだ。これは非常に便利だと思うので、ベテランさんでも使い出すと止められない機能だと思う。確実にソースの可読性が上がるだろう。
CSS情報の参照
Firebugが提供してくれる機能はもちろんそれだけではない。Firebug情報エリアの右側には、CSSの情報が表示されていると思う。任意のタグブロックを選択して反転表示させると、CSSエリアにそのブロックに定義されているCSS情報が一目瞭然で確認できる。CSSは優先順位があり自分で決めた記述ルールにしたがっていればある程度見通しが利くものだが、人が定義したものだと把握に苦労するものである。（実際、私が働いていたWeb制作現場のボスでさえ、人の書いたCSSは読みづらいと嘆いていた）そんな苦労もFirebugがあればかなり省力化できるのではないだろうか？優先順位で無効にされたCSS記述には消し線が入って無効になっていることがしっかり読み取れる。なんて親切な設計だろう。
おまけにCSSの値を変更することが出来てしまう。もちろんブラウザ上だけの話なので、元になるCSSを最終的には編集しなくてはならないが、気軽に色々試してみても元のCSSには被害が無いという点だけでも安心ではないだろうか？更にCSSの値を変更する際はただ編集出来るだけではなく、オートコンプリートで候補がリストアップされるのもありがたいことである。一気に作業効率が上がると思うし、CSSの理解を深める学習ツールとしても有効だと思う。気になるサイトを見つけたらF12を押してFirebugを起動し、心行くまでCSSをカスタマイズしてみて理解を深めると良いだろう。きっとその内CSSを深く理解できると思う。
レイアウト
CSSにまだ慣れていない私は、ボーダーとかパディングとかややこしいなと思ったりする事が多いのだが、この機能を使うと視覚的にピクセル情報などが確認できるので、非常に嬉しく思ったりする。なぜなら実際に数値を動かしてみてその結果をブラウザで表示している分析対象のページに反映できるからだ。例えば左マージンの数値を増やしてみたらどんどん右によってきたりして、なるほどこういうことなのかとあっさり理解できてしまったりして、初心者の理解を助けるツールとしても使えると思うのだ。もちろん上級者は緻密なレイアウトを設計する為に使えば良い訳で、それがPHP+SQLの情報から動的に作られたページだったとしてもブラウザでXHTML+CSSとして表示されている訳だから、容易にCSSを調整して数値を決めることが出来るのだ。このような方法はDreamWeaverでも出来ないんじゃないかな？（テストサーバとか設定すれば出来そうな気はするがそこまで使いこなせていないし何しろ個人で新しいバージョンを買うには高すぎるでしょ！）とにかくCSSレイアウトの微調整には欠かせないツールとなりそうだ。
スクリプト
私はこのジャンルは非常に苦手なので使うことはないと思うのだが、Javaスクリプトのソースも簡単に読める様だ。分かる人が読めば直ぐに判るものらしいから、容易にJavaスクリプトを表示させられるのは便利ではないだろうか？私はJavaスクリプトを読んでもさっぱり理解できないのでこの機能だけは全く使ってないと言っても良いだろう。分かる人は使って楽して下さい。
ネットワークの監視
こんな機能まで実装されてるの？と驚くしかない機能だと思う。Webサイトのコンテンツは色々なファイルから構成されていて、Webブラウザがその言い代えればパーツをどの様な順番でどれくらいの時間で集めている（読み込んでいる）かを時系列グラフで表示してくれる。更にキャッシュの状態だとかHTTPヘッダ情報まで見られちゃう訳で、もし自分以外の人が使うと自分のサイトがちょっとヤバイ位丸裸にされてしまうのではないかと不安に思うくらいである。
と言う訳で、技術系の人ならこの類のツールは手放せないことになるだろうと思う。Webの構造の事をもっと知りたいという人や、Webデザイナー達も必須だと言えるだろう。私は最近CMSを使う事にはまっているので、苦手なPHPを解析する為の足がかりとしてXHTMLソースをしっかり読み取るのが課題だと感じ、構造解析の為にはFirebugが手放せないツールとなっていたりするのだ。
コメント