アドオン

皆さんはブラウザは何を使っていますか？Firefoxを使っていますが、やはり理由は豊富なアドオン。
15 Firefox add-ons for Web developers | Webware – CNET
という記事がありましたので、その中から使っているものを9個、実際の使用感も交えて、
WEB制作のためのFirefoxアドオンを紹介します。今から初めて見ようという方の参考にしていただければと思います。

1.Aardvark

HTMLの要素を調査したり、簡単な編集を行うアドオンです。
Firebugにも同様の機能がありますが、こちらは画面をスプライトせずに表示できます。
適用されているCSSなどは見れませんが、手軽に実行したい場合はこちらがオススメ。
右クリックメニューからStart Aardvarkを選択して、実行できます。

ショートカットキーでいろんなことができるのでそれも紹介。
w 親要素にフォーカスを移動　n その操作を戻す
q Aardvarkを終了　u アンドゥ　r 選択している要素を削除　p 削除した要素を任意の場所に貼り付け
v 選択している要素のソースコードを表示。

ダウンロードは　Aardvark :: Firefox Add-ons

2.ColorZilla

有名なカラーピッカーアドオンです。
特にWebpage DOM Color Analyzerという、サイトに使われている色のリストを出力してくれる機能は必需品です。

参考までに日本語の解説記事を
Mozilla Re-Mix: WEBページのカラーを取得する「ColorZilla」
MOONGIFT: » ブラウザ上の色情報を取得「ColorZilla」:オープンソースを毎日紹介

ダウンロード　ColorZilla for Firefox – Eyedropper, Color Picker and much more

3.CSSViewer　と　4.CSS validator

読み込まれているCSSを一覧、クリックで中身を表示できるアドオンです。
これの便利ポイントはCSSだけではなくjavascriptも対応している点。
いいと思うサイトに出会ったときすぐに、CSSを”のぞき見”できます。
ダウンロードは　CSSViewer :: Firefox Add-ons
CSS validatorはw3cのCSSvalidateにかけてくれるアドオンです。
お好みでどうぞ　CSS validator :: Firefox Add-ons

5.Firebug

言わずとしてた開発ツール。
HTML、CSS、JavaScriptを編集・デバッグできます。また、「接続」機能では、各コンテンツの取得にかかった時間を表示してくれるので、チューニングすべきポイントが簡単にわかります。

ダウンロードは　Firebug :: Firefox Add-ons

6.Firephp

これを導入することで、phpのデバッグも行えます。
FireFoxでのPHP開発を手助けする「FirePHP」:phpspot開発日誌
FirePHPがますます便利になっている件:phpspot開発日誌
デバッグメッセージを出すくらいにしか使っていません。

ダウンロードは　FirePHP :: Firefox Add-ons

7.html validater

ステータスバーから簡単に、htmlの構文チェックを行えるアドオンです。
HTML TidyまたはSGML Parserの2つの方法か、併用してのチェックが可能です。
(このアドオンは、上記の参考にした記事で紹介されているものと別のものです)
ダウンロードは　Html Validator for Firefox and Mozilla

9.LinkChecker

そのページのリンクが切れていないか、右クリックから簡単に調べることができるアドオンです。
OKだと図のように、リンクが緑色になります。
リンク集など、リンクが多いページのチェックも一発で簡単なので、定期的に調べるといいかもしれません。

ダウンロードは　LinkChecker :: Firefox Add-ons

10.YSlow

米Yahoo!が提供するアドオンで、サイトのパフォーマンスをAからFで採点してくれます。
具体的に改善すべき場所を教えてくれるので便利です。うちのサイトは…まだまだですね＾＾；

ダウンロードは　YSlow :: Firefox Add-ons

そんなわけで9個のアドオンを紹介しました。参考にしたブログでは、さらに６個のアドオンが紹介されています。
Firefoxだけで全て済んでしまうということではないですが、とても有用なツールになります。
もし、他に便利なアドオンがありましたら、教えていただけるとうれしいです。

http://kwout.com/help/addon

なんか今更感がある気もするんですが、アドオンを紹介していこうと思って一番最初に紹介したいのがこれなんです。
スクリーンショット系のアドオンは多々ありますが、これはWEB画面の一部を切り抜く「引用」に特化したアドオンです。

アドオンを入れるとステータスバーに[k]というアイコンが出ます。

それをクリックするとウインドウがでるので切り抜く範囲を選択して、「切り抜く」をおすと

ここからそのまま保存や好きな大きさに縮小して保存したり、クリップボードへ貼り付けもできます。
さらにkwoutのWEBサービスへアップロードして、枠線などを変更することも。

もちろんこの記事の画像も全てこのアドオンで撮りましたｗ
また最後に全画面取得用のアドオンはPearl Crescent Page Saver Basicをオススメします。