一人前の“Web 職人”になる近道、教えます。
Web デザイナーなら、現場で Firefox を活用できなきゃ、本当のプロとは言えません! あなたも、Firefox にアドオンを追加して、自分だけのパワフルな仕事道具にカスタマイズしてみませんか?
特選アドオン紹介
Firebug
超定番! 多機能デバッグツール
Web サイト制作にもはや欠かせない必携アドオン。HTML、CSS、DOM の解析やリアルタイム編集、各ファイル読み込み時間のタイムライン表示、Ajax を駆使した Web アプリの作り込みに利用できる JavaScript デバッガやコマンドラインコンソールなど、ページデザインから高度なアプリケーション開発まで幅広いニーズに応える便利な機能を満載!
YSlow
ページの表示高速化を支援
米国 Yahoo! の開発チームで蓄積されてきたノウハウに基づいて、ページの読み込みを高速化するヒントを提示してくれる分析ツールです。上記の Firebug に追加して使うアドオンとして公開されています。YSlow パネルを開いてテスト実行ボタンをクリックするだけで、22 の改善ポイントについて評価とアドバイスが表示されます。
HTML Validator
HTML の記述ミスをすばやく発見
いまどきの Web 制作では、文法チェック 100 点満点は当たり前! このアドオンを使って、表示しているページの文法エラーや記述ミスなどをすばやく確認しましょう。検証エンジンを内蔵し、オンラインの外部サービスに依存しないので、テスト環境で公開前のサイトをチェックしたい場合も安心。その場で修正済み HTML を出力することもできます。
Web Developer
機能満載の実用ツールバー
Web 開発者を支援すべく進化してきた万能アドオン。JavaScript や CSS の無効化、Cookie の削除、フォームや画像をはじめとしたページ上の様々な要素の情報表示、ウィンドウサイズの即時変更など、数多くの機能をツールバーに統合し、いつでも手が届く場所に配置しています。ルーラーや、小さな画面でのシミュレーション表示機能も備えています。
ColorZilla
スポイトで画面上の色を拾える!
Firefox のウィンドウ内でクリックした位置の色を取得し 16 進数の RGB カラーコードを示すスポイト機能、一覧から色を選択するカラーピッカー機能、ページ上で使われている色を吸い出して一覧表示する機能など、色を扱うことが多い人には手放せないツールです。カラーコードは Photoshop や Dreamweaver などに直接コピーできます。
Pearl Crescent Page Saver
長いページも一発キャプチャ!
ページのスクリーンショットが必要なとき、1 画面ずつスクロールしながら撮って切り貼り、なんて面倒なことをしていませんか? このアドオンを使えば、ワンクリックで、ページ全体もしくは表示範囲を画像として保存できます。Flash コンテンツもキャプチャ対象となるので、ブラウザ上での見た目そのままプレゼンテーションに貼り付けられます。
User Agent Switcher
UA 文字列をワンクリック設定
Web サイトへアクセスする際、HTTP ヘッダ情報として Web サーバへ伝えるユーザエージェント (UA) 文字列を変更します。UA 文字列を単純に判別してブラウザごとに表示や挙動を変えているサイトや、モバイル向けサイトの検証に役立ちます。Intenet Explorer の UA があらかじめ組み込まれているほか、いくつでも任意の設定を追加可能です。
Live HTTP Headers
サーバとの通信内容を細かくチェック!
Firefox が Web サーバとの間で行う通信の内容を逐一監視。特定の正規表現に一致する URL の HTTP ヘッダだけを表示するといった機能もあり、サーバと連携した Web アプリのデバッグには必須のツールです。例えば、リダイレクトが正しく動作しているかや、Cookie が正しく発行されているかどうかを確認するために使用します。