Web 開発用に Firefox を拡張する
The article was originally posted by Fini Alring for his own weblog on 3rd September, 2005. The original article and this translation are licensed under a Creative Commons License.
Mozilla Firefox ブラウザ は単体でも、おそらく最も素晴らしい Web ブラウザだろう。しかし、Firefox 1.0 の登場以来培われてきた拡張機能のおかげで、いまでは間違いなくキラーアプリケーションになったといえる。Web 開発者にとっては、分析、デバッグ、そして検証用の究極のツールだし、ユーザにとっては、個々のニーズを満たしてくれるブラウザにするための素晴らしい基礎を提供してくれる。
ここで、なくてはならない拡張機能一式を取り上げ、次に私が個人的に気に入っている拡張機能を取り上げてみようと思う。
本記事はまず、Mozilla Firefox や Thunderbird といった関連製品に対応した拡張機能を紹介する。
第一部は Web 開発者向けの拡張機能だ。ただ、一般的なユーザの関心をも満たしてくれる拡張機能も取り上げていく。
Web 開発者のための Firefox 拡張機能
- JavaScript Console
- まずは、この素晴らしい JavaScript Console からだ。これは実は拡張機能ではない。しかし、セッション中に起こったエラーや警告をすべて一覧にして表示してくれるという、素通りしてしまうのはもったいないほど便利な機能だ。また、同じ変数を複数回宣言していたり、等号 （=） や等式 （==） の誤用であると思われるものを検知するといった、コードの品質を上げるための参考になるヒントなどをこまごまと表示してくれるという特徴も持つ。
- DOM Inspector
- これはブラウザの神の神聖な手とでも形容すべきツールで、完全な DOM ツリーからスタイルシート、JavaScript オブジェクトまで、Web ページ上のどんなものでも分析できる。JavaScript 開発者であれば絶対にこのツールを使ってみるべきだ。生成された DOM ノードの検証する時などは、その本領を発揮する。
- Venkman - JavaScript Debugger （開発：Robert Ginda）
- Venkman は、Mozilla/Gecko ベースのアプリケーションに対応した機能満載のデバッガだ。JavaScript コード内のどこにでもブレークポイントを設定でき、オブジェクトや変数を検証できる。またプロファイリング機能も備えており、コードのパフォーマンスを最適化する作業に便利だ。私自身は、自前のログ記録やエラー処理機能を使っているため、このデバッガを多用するわけではないが、より複雑な状況でも役立ってくれるはずだ。その意味で、間違いなく非常にパワフルな機能といえる。
- Web Developer Extension （開発：Chris Pederick）
- この拡張は、Firefox の歴史の中でも、間違いなく最も便利な拡張機能といえるだろう。これは過去に登場したこまごまとした Mozilla 拡張機能をきれいに統合し、ツールバーを持つ単一の拡張機能にしたものだ。Web 開発者 （のみならず興味のあるユーザ） に、リアルタイムでの Web ページ分析、編集、検証、さらには操作を可能にする、素晴らしいツールセットを提供してくれる。私はこの機能を使ってすべてのスタイルシートを無効化 （CTRL+Shift+S） してみることがよくある。こうすると、サイトが実際にはどのような構成になっており、CSS をサポートしないブラウザではどのような振る舞いをするのかを確認できるからだ。
アウトラインツールは、ブロック要素やテーブル要素を視覚化してくれる素晴らしいツールで、ページがどのような構造になっているのかをより技術的な観点から見ることができ、開発やデバッグの際に便利だ。
リアルタイムの CSS 編集用サイドバーはまさに至宝といえるだろう。この機能はさまざまなテストに役立ってくれる。「Display ID & Classes」もまた優れもので、ページ上に直接ラベルを表示してくれるため、ページ内での CSS の骨格構造を簡単に見渡すことができる。また HTML や CSS、RSS などを検証するための便利なリンクも備えており、手軽に利用できる。
JavaScript 開発者に向けては、ツールバーの右側に便利なアイコンが用意されている。JavaScript の exception が起こるたびに、三角形の黄色い警告マークを表示してくれるのだ。そしてこのマークをクリックすると、先に取り上げた JavaScript Console が立ち上がる。
最後になるが、決して疎かにできないのが、View Source ボタンだ。忍者のように素早くソースにアクセスすることが可能だ！
- Greasemonkey
- 究極のサイトハッキングツール。独自の JavaScript をあらゆるサイトに追加でき、目的とするサイトにあらゆるタイプの小技を追加できる （影響は君のブラウザだけだ！ いかなる法的な意味においてもサイトをハッキングしているわけではないので、ご安心を）。何百種類というスクリプトが出回っており、私はすべてをカバーするほどの時間は持ち合わせていない。というのも、別にすべてのスクリプトが必要なわけではないからだ。しかし、時間の余裕がない時などに、非常に手軽に使える （例えば、自分のサイト上で、実際にサイトそのものを変更する前に、テストスクリプトを試して効果を確認するということができる）。
ただし、Greasemonkey は使用にあたって注意が必要だ。特に大切なのは、スクリプトの入手先が本当に信頼できるものなのかということだ。というのも、悪意のあるスクリプトであれば、間違いなく致命的な欠陥になるからだ。これは、インストールをするあらゆるアプリケーションや拡張機能に当てはまることだ！！
- Platypus
画期的な Firefox の拡張機能で、ブラウザから WYSIWYG モードで Web ページに変更を加え、それを Greasemonkey 用のスクリプトとして保存できる。そして、次にそのページを閲覧した時にも同じ変更を実行してくれるのだ。- ColorZilla （開発：Alex Sirota）
- 非常に便利なツールで、カラーピッカーやスポイト機能を備えており、ブラウザのコンテントエリア内のあらゆるピクセルからあらゆる色を手軽に抽出できる。さらに、さまざまな CSS の書式に対応した形式でクリップボードに貼り付けることもできる。純粋に素晴らしい！ ただ、OS ベースのスポイト機能が必要となるときもある。というのも、ColorZilla の機能はブラウザ内に表示されているものに限られるからだ。
- LiveHTTPHeaders （開発：Daniel Savard）
- これまた非常に便利なツールで、リアルタイムで HTTP ヘッダへと簡単にアクセスできる。Web ソリューションデのさまざまな観点からのデバッグや分析に非常に役立ってくれる。他の拡張機能の中にはこの拡張機能をベースに動作するものもある （例：Header Monitor）。
- View Rendered Source （開発：Jennifer Madden）
- 粋なツールで、実際に生成されたマークアップを表示できる。スクリプトでマークアップを生成している時に便利だ。
- View Cookies （開発：Edwin Martin）
- 「Page Info」ウィンドウに Cookie タブを追加するユーティリティで、そのページに影響するあらゆる Cookie を表示・編集できる。
- Add N Edit Cookies
- Web ページ上の Cookie を作成・編集できるもう一つのツール。この拡張機能はまだ自ら試したことがないということを断っておきたいのだが、上記の View Cookies 拡張機能に比べて、よりヘビーデューティな Cookie 操作に向いているようだ。なので、私たち開発者にとってはこの拡張機能のほうが向いているかもしれない。
では、今度は自分でもっと沢山の拡張機能を見つけてほしい！ またあなたの意見を聞かせてほしい。ここでは触れられていない優れた開発者向け拡張機能があれば、知らせてほしい。予定しているパート 2 に向けて、私自身もレビューをしてみる予定だ。
では、今回はこのくらいにしよう。現在執筆中で、この記事に連なる「Firefox Extensions For Everyone」を楽しみにしていてほしい。
Mozilla を使った Web 開発についてまだ良く知らない読者は、Henrik Gemal が執筆した Using Mozilla in testing and debugging web sites を参照してみてほしい。
