フロントエンドエンジニア兼ゲーマーがモノやサービスをレビュー

Web制作用に入れているFirefoxアドオンをまとめて覚書

最近Firefoxを新規インストールしてセットアップする機会があり、他のマシンに入っているFirefoxのアドオンマネージャを見ながら行いました。

そこで少し困ったのが、アドオン名を見ただけではどんな機能があるのか、それは果たして本当に必要なアドオンなのかを考える場面が多かったことです。普段使っていてもアドオン名まで気にして使っていませんからね。

今回はWeb制作用として僕がFirefoxに追加しているアドオン(拡張機能)を今後のために覚書しておきます。新しいものが入った場合は随時追加、削除をしていく予定です。

スポンサーリンク

Web屋さんが入れているであろうFirefoxアドオン

Web Developer

Web Developer
Web Developer :: Add-ons for Firefox
定番アドオン。ページ上で画像のalt属性の有無を確認したり、ブロックレベル要素の枠を表示したり、CSSやJSやキャッシュ、クッキーなどを無効にしたり、とにかく色々できます。色々ありすぎて僕も全ての機能を使っているわけではありませんが、Web Developerツールバーは便利です。

Html Validator

Html Validator
Html Validator :: Add-ons for Firefox
Htmlのバリデーションをその場でしてくれます。OS Xで利用できない場合はアドオンの公式サイトから探してみてください。

Wappalyzer

Wappalyzer
Wappalyzer :: Add-ons for Firefox
Webページで使われているCMSやJavascriptのフレームワークをアドレスバーにアイコン表示します。

JSView

JSView
JSView :: Add-ons for Firefox
Webページで読み込んでいる JSファイル、CSSファイルを一覧表示し、外部エディタで開くことができます。

Live HTTP Headers

LiveHTTPHeaders
Live HTTP Headers :: Add-ons for Firefox
Webページにおけるサーバーの通信状況やページキャッシュの状態を把握できます。HTTPレスポンスのステータスコードを見たりとかで使います。

Pinger

Pinger
Pinger :: Add-ons for Firefox
Webページ内のリンク切れをチェックします。ページ内の全てのリンクをチェックするか、選択した部分だけをチェックするか選べます。

Pearl Crescent Page Saver

Pearl Crescent Page Saver
Pearl Crescent Page Saver :: Add-ons for Firefox
ページのスクリーンショット(キャプチャ)を撮ってPNGやJPGとして保存してくれます。表示している部分のみかページ全体かが選択できるのが便利。

ColorZilla

ColorZilla
ColorZilla :: Add-ons for Firefox
ページ内のピクセルを指定してカラー情報を取得します。16進数でコピーしてそのままPhotoshopにペタり。

Font Finder

Font Finder
Font Finder :: Add-ons for Firefox
ページ内の選択したフォントの種類や色、サイズ、行間などの情報をまとめて表示します。

Firesizer

Firesizer
Firesizer :: Add-ons for Firefox
Firefoxのブラウザウィンドウサイズをピクセル数で指定して変更。アドオンバーに現在のウィンドウサイズも表示されるようになります。

MeasureIt

MeasureIt
MeasureIt :: Add-ons for Firefox
ブラウザ上にルーラーつきのボックスをオーバーレイで描きます。簡易的にスペースのサイズを測りたいときや、「このサイズの画像を置いたらどれだけスペースを取るのだろう」といったときに。

Mobile Barcoder

Mobile Barcoder
Mobile Barcoder :: Add-ons for Firefox
今見ているページのQRコードを表示することができます。自分のスマートフォンならSafariのiCloudタブを使った方が早いですが、動作確認用の端末だったり他の人の端末で開きたいときはURLを伝えるより簡単です。

DownThemAll!

DownThemAll!
DownThemAll! :: Add-ons for Firefox
Webページ内の画像や音声、動画などのファイルやリンク先のファイルを一括ダウンロードできます。

Firebug関連

Firebug

Firebug
Firebug :: Add-ons for Firefox
これがないと始まらない最重要アドオン。HTML、CSS、Javascriptなどのデバッグに。ブラウザ上でリアルタイムに編集して表示を確認できます。

Firepicker

Firepicker
Firepicker :: Add-ons for Firefox
Firebug用の拡張。FirebugのCSSタブでカラーピッカーを使えるようにします。視覚的にCSSのカラー情報をいじれるのでクライアントとの打ち合わせの場でも威力を発揮します。

YSlow

Yslow
YSlow :: Add-ons for Firefox
Firebug用の拡張。ページ表示にかかる時間を計測してページのボトルネックを調査できます。

PageSpeed

PageSpeed
Make the Web Faster — Google Developers
Firebug用の拡張。Google製でこれもサイトパフォーマンスのボトルネックをチェックできます。パフォーマンス最適化のアドバイスをしてくれます。

FireRainbow

FireRainbow
FireRainbow :: Add-ons for Firefox
Firebug用の拡張。FirebugのスクリプトタブでJavaScriptのシンタックスハイライト表示をします。見やすくなります。

FireQuery

FireQuery
FireQuery :: Add-ons for Firefox
Firebug用の拡張。jQueryのイベントやDOMの内容がリアルタイムに確認・編集できるようになります。

Greasemonkey関連

Greasemonkey

Greasemonkey
Greasemonkey :: Add-ons for Firefox
Firefox上で好きなスクリプトを動作させることができるようになるスクリプトマネージャです。
これ単体では動作しませんが、様々なスクリプトを追加することができます。将来的に追記予定。

その他

Tab Mix Plus

Tab Mix Plus
Tab Mix Plus :: Add-ons for Firefox
タブ機能を拡張します。タブ幅をピクセル数を指定して固定幅にするのと多段表示するのに使います。

Hatena Bookmark

はてなブックマーク
Hatena Bookmark :: Add-ons for Firefox
はてなブックマーク用公式アドオン。ブックマークしたり、今いるページのはてブ数を表示したりできます。

Readability

Readability
Readability :: Add-ons for Firefox
“あとで読む”サービス『Readability』用アドオン。僕はReederとTweetbotのあとで読むサービスでReadabilityを使っているので入れます。他に同系統のサービスにPocket(旧・Read It Later)やInstapaperなどがあります。

Google Reader Watcher

Google Reader Watcher
Google Reader Watcher :: Add-ons for Firefox
Googleリーダーの未読数を表示。情報収集の基礎はまだまだRSSが強いですね。ちょっと目を離すとガシガシ溜まっていきます。

Shorten URL (Bit.ly)

Shorten URL (Bit.ly)
Shorten URL (Bit.ly) :: Add-ons for Firefox
URL短縮サービス『Bit.ly』のアドオン。アドオンバーに置いて現在のページの短縮URLの生成とクリップボードにコピーを同時に行えます。

Echofon for Twitter

Echofon for Twitter
Echofon for Twitter :: Add-ons for Firefox
サイドバーにTwitterのタイムラインを表示させます。もちろんそこから投稿も可能です。Bit.lyで作った短縮URLを使って現在のページを投稿したりします。

終わりに

今回は僕がFirefoxを新規にインストールしたときに一緒に拡張するアドオンを紹介しました。
当然のことながら、アドオンは入れすぎるとブラウザが非常に重くなってしまいます。

ここに紹介したアドオンが全ての人に必須というわけではありませんし、人によってはEvernote Web Clipperが便利だったり、FireMobileSimulatorUser Agent Switcher、それからIEのレンダリング系アドオンが必要だったりそれぞれあると思います。
無駄なアドオンは極力インストールせず、自分に必要なものだけを追加するという使い方が良いでしょう。

いや、そもそもブラウザの速度が欲しいときはGoogle ChromeかSRWare Ironを使うのでそこまで気にしなくてもいいですね。