WEB制作に欠かせないFirefoxアドオン

Firefoxが好んで使われている大きな理由は、アドオンという拡張機能が豊富でカスタマイズがしやすいという部分だろう。Google Chromeにもエクステンションが増えてきてはいるが、個人的にはまだまだ乗り換えるというレベルではないと思っている。

Firefoxのアドオンと言えば、タブ管理やマウスジェスチャなど定番とされるものが多くあり、Firefoxのアドオンを紹介しているブログなども非常に多い。
このエントリーでは、「ホームページ制作向け」ということで私が愛用しているアドオンをいくつか紹介してみる。
なお、掲載したアドオンは全てFirefox 3.6に対応。

Firebug

Firebugこれがなくちゃ始まらない。本当に「依存している」と言ってもいいほど使用頻度が高いアドオン・Firebug。
Firebugのインストールはこちら

このツールは、「あれ?何で適用されないの???」といった時に実力を発揮する。
また、ブラウザ上でCSSのプロパティを修正してプレビューできるのが非常に便利。特にCSS3のtext-shadowやbox-shadowといったプロパティは実行結果の予測が難しいので(まだ慣れてないせいもあるが)、FirebugでCSSの数値を微調整しながら結果を確認して、ローカルファイルの修正に反映させるといった使い方をすることも多い。

なお、Firebug 1.5.0で不具合があったが、現在の1.5.4では問題無く使用できている。

Web Developer

個人的にはさほど使用頻度は高くないのだが、WEB制作系では定番のアドオン。
Web Developerのインストールはこちら

Web Developerツールバーのメニューから「サイズ変更 → ウィンドウのサイズ変更」で、低解像度環境での見え具合の確認をしたり、「枠表示 → ブロックレベル要素を枠で囲う(右図)」で、要素の入れ子構造を視覚的に把握したりといった使い方をすることが多い。

非常に多くのメニューがあるのだが、私は使ったことが無いものの方が格段に多い。用途によって有効に使えるツールだ。

JSView (mod-2)

JSView (mod-2)タスクトレイのアイコンをクリックするだけで、表示中のページで使われているCSSとJavascriptファイル一覧をポップアップ表示でき、そのまま各ファイルにアクセスできるという優れもの。

元々のJSViewはFirefox3.6に対応しておらず、開発元も消滅してしまったようなのだけれど、Firefox 3.6に対応したアドオンを日本人の方が公開している。
JSView (mod-2)のインストールはこちら

このサイトで使ってるJSは何だろう?と思った時など、HTMLのソースを表示してファイルを探すよりも格段に簡単に使用ファイルを把握することが出来る。

Coral IE Tab

タスクバーのアイコンをクリックして、レンダリングをFirefoxからIEに切り替えることができるアドオン。
元のIE TabがFirefox 3.6に未対応だった頃、派生バージョンのCoral IE Tabをインストールしたのだが、現在ではFirefox 3.6対応のIE Tab 2もリリースされているようだ。
正直双方の違いは良く解らない・・・
Coral IE Tabのインストールはこちら

私の環境では、何故かIEモードのレンダリングがIE8ではなくIE7の表示になるのだが、これが逆にありがたい。Windows 7のXPモードでIE6を、通常版でIE8、そして最もシェアの低いIE7をCoral IE TabとIE8の後方互換モードでカバーできている。
また、IEのみでしか表示できないコンテンツの閲覧にも非常に重宝する。

Wappalyzer

表示しているサイトで、どんなアプリケーションが使われているかをタスクバーにアイコンで表示してくれるアドオン。
当・35歳からのWEB遊びブログであれば、WordPress・jQuery・Google Analyticsのアイコンが表示される。前出JSView (mod-2)の画像下部に表示されているのがそれだ。
Wappalyzerのインストールはこちら

CMSではWordPressの他、MTやJoomla!、Drupalなども表示されるが、カスタマイズの具合によっては検出できないこともあるようだ。現在検出できるアプリは100種類ほどもあるとのこと(wappalyzer.comを参照)。

このサイトで使われているスクリプトは何だろう?と思ってタスクトレイを見れば、jQueryかPrototypeかMootoolsかといったことも一目瞭然。時々見慣れないアイコンが表示されていると、何だこれ?と興味が湧き、勉強のきっかけになる点もお勧めだ。

MeasureIt

MeasureItこれは定番とは言えない部類のアドオンだと思うが、メジャーというかブラウザ上での物指しツール。
使用頻度は決して高くないが、要素などがどの程度のサイズかをブラウザ上で計れるというもの。
MeasureItのインストールはこちら

要素の幅などの正確な数値を知りたいならFirebugで確認した方が確実だが、ざっくりならこれでも十分。
また、要素の「幅」はFirebugでいいのですが、CSSで指定されていない「高さ」がどれくらいになっているのか知りたい場合や、1枚画像の「ここからここまで」という範囲の計測などにはこのアドオンが重宝します。

FirefoxやChrome用のエクステンションにウイルスが仕込まれたということもあるようですので、アドオンやエクステンションのインストールは出来るだけFirefoxアドオンの公式サイトから評価などを参照して行うのが良いでしょう。

コメントを投稿ページTOPへ
関連する記事
Firebug 1.5.0に致命的なバグ?
Googleの検索結果表示がまた変更?
Firebugでfont-familyが文字化けする原因
ブラウザシェアを調べてみた
Windows 7 64ビット環境に移行した感想など



Post a Comment

入力されたメールアドレスは公開されません。 *は、入力必須項目です。

*
*