naoyaです。
CyberKonowledgeに20 FireFox Extensions That Every Web Designer Should Know Aboutという記事がありました。ちょうど、タイムリーな記事だったので、さっそくすべてのFirefox拡張を試してみましたので紹介します。

Web Developer Toolbarは説明する間でもない定番でとても便利な拡張です。CSSのクラスが定義されている範囲をみたり、JavaScript/CSSをオフ/オンできたりととても便利です。

Gnu Aspellというスペルチェッカーを使ってすぐにスペルの確認ができる拡張です。使い方は、右クリックで表示されるコンテキストメニューからAspellを選択します。
この拡張は、最初ページ全体に対してスペルチェックができると思ったのですが、そうではなく単語を入力して単語のスペルをチェックする拡張でした。個人的には、あまり使わない拡張だと思いました。

SEOツールのようです。インストールすると、上部に専用のツールバーが表示されます。このツールバーからサーバのヘッダ情報を見たり、Alexaのランキングをすぐに表示することができます。たくさん機能があるのですべて試すことができませんでした。

IEViewと似ていますが、この拡張はOperaでページの表示を確認することができる拡張です。OperaもIEViewと同じように組み込みができるかと思って使ってみましたが、実際は普通にOperaを起動させて、Firefoxで表示していたページをOperaで表示しています。思っていた通りではありませんでしたが、Operaでの表示を確認したときに便利です。

この拡張は、IEでの表示を確認することができます。Firefoxのタブ上でIEのレンダリングに切り替えることができます。この拡張を使うと、ステータスバーのFirefoxアイコンをクリックするだけでIEに切り替えられるので便利です。

Total ValidatorというページのHTMLの文法をチェックするサービスを簡単に使うための拡張です。Total Validatorをインストールすると、ステータスバーにアイコンが表示されるので、そのアイコンをクリックするだけで今表示しているページをチェックすることができます。ただし、ログインが必要なページはチェックできません。このようなときは、後で紹介するHtml Validatorがすごく便利です。

このツールも別のページで知ったのですが、かなり便利です。GoogleやYahooで検索したときの検索結果画面に検索結果順序のデータ（Googleだとページランクに相当します）がまとめて表示されます。デフォルトではかなりのデータが表示されるので、表示する項目を絞った方がいいと思います。また、デフォルトだとデータが表示されないのでクリックするか、設定を変更して自動的に表示するようにした方がいいでしょう。

HttpLiveHeaderも定番です。HTTPの通信ヘッダ情報をチェックすることができる拡張ですね。初めて使う場合にちょっと注意したいのは、HTTPLiveHeaderの画面を開いている状態でページを読み込まないとHTTPヘッダ情報が表示されませんところです。

Firefoxから好きなエディタを登録しておいて、右クリックメニューから登録したエディタを選択してCSSやHTMLなどを好きなエディタで開くことができます。Cyber Knowledgeでは、IE7を登録していますが、いくつかブラウザを登録しておければIEViewやOperaViewと同じ機能にすることができるので便利です。

僕が普段から使っている拡張です。ステータスバーのアイコンをクリックするだけですぐにブログに投稿できる拡張です。僕は、ブログを二つ書いているのですが、一つは技術系、もう一つはもっと簡単な内容のブログを書いているのですが、Performancingでこの二つのブログを登録しておいて、それぞれのブログに投稿しています。あと、コンテキストメニューからこのページのリンクを張ってすぐにブログに書けるのも便利ですね。

コンテキストメニューからリファラーを送らずにページを開くことができる拡張です。たまにリファラーを送りたくないときにブラウザ自体の設定を変更せずにすぐにできるので 便利です。

ページの表示時間を計測することができる拡張です。この拡張をインストールすると、上部のステータスバーにページの表示時間を表示することができます。個人的にはステータスバーに表示されるのがよかったのですが、仕方ないですね。Webアプリケーションでは、ページの表示時間が常に重要になるので重宝しそうな拡張です。

User Agent(UA)を変更することができる拡張です。僕は、上部のツールバーにUser Agent Switcherアイコンを追加して必要なときに切り替えています。 ウノウでは、最近VPOPという携帯電話専用の動画共有サイトを始めたのですが、この開発のときにはよくUser Agent Switcherで携帯電話のUser Agentに切り替えるために使っていたようです。

この拡張も定番ですが、かなり便利です。サイドバーのEditCSSのCSSを編集するとリアルタイムにCSSの変更を確認することができます。この拡張を使うことで、CSSを変更する度にブラウザをリロードすることがなくなります。EditCSSで編集した内容は、ファイルとして保存できます。

この拡張も定番です。JavaScriptやCSSを含んだコードをデバッグできます。僕は、Ajaxを使ったページのデバッグをするときによくFireBugを使っています。

ページのサイズを測定できる拡張です。MeasureItをインストールすると、左下のステータスバーにアイコンが表示されるので、このアイコンをクリックするとページのサイズを測ることができます。この拡張も便利です。

FirefoxをFTPクライアントにすることができる拡張です。作成したページをアップロードするときに便利です。ウノウでは、FTPは使っていないので実際に使う機会はなさそうです。

ページの色情報を取得することができる拡張です。この拡張もMeasureItと同様にインストールするとステータスバーの左下にアイコンが表示されるので、アイコンをクリックして色情報を取得することができます。

この拡張は、ページ内で選択されたテキストの内容でHTMLリンクの内容でコピーすることができます。たとえば、前回のテスト番長のブログの一部をCopy as HTML Linkすると次のようなコードとしてクリップボードにコピーされます。

テスターさんを募集

シンプルでかつとても便利な拡張です。

いかがでした？今日は、Webデベロッパーに必須の20のFirefox拡張を紹介しました。
最後に、Cyber Knowledge には紹介されていなかったWebデベロッパーに必須の一つのFirefox拡張を紹介します。

HTML Validatorは、Total Validatorと似ているのですが表示しているページのHTMLの文法チェックをしてくれるので、ログインが必要なページでもすぐに文法のチェック結果をステータスバーで確認することができます。 HTML Validatorを使うと、常にページの文法チェックができるのでかなり重宝しています。