EC studio EC studio デザインブログ

企画デザイン谷です。

今やホームページ制作・開発には欠かせないFirefoxですが
その理由は多くのアドオン(拡張機能)にあります。

企画デザインスタッフが導入しているアドオンを
今回紹介します。

デザイン・コーディングにつかえるアドオン

ColorZilla
https://addons.mozilla.org/ja/firefox/addon/271
閲覧しているページに表示されているテキストや画像の色(カラーコード)を
抜き出すことができます。

Firebug
https://addons.mozilla.org/ja/firefox/addon/1843
開発環境全般においては欠かさないツールです。他の拡張機能がなくても
これだけは入れておきたいアドオンです。
HTML、CSS、JavaScriptなどをリアルタイムに編集・デバッグを
することができ、特に僕の場合はCSSでレイアウトを
調整するときに使います。

日本語版もありますが、翻訳が逆に分かりにくいかな、と思います…。

Html Validator
https://addons.mozilla.org/ja/firefox/addon/249
HTMLの構文を、Firefoxのソースビューワー上でチェックしてくれる
拡張機能です。他にもバリデータのアドオンはありますが、
Firefoxのステータスバーでのエラー表示など
分かりやすいのはこれかな、と思っています。

MeasureIt
https://addons.mozilla.org/ja/firefox/addon/539
見ているページの中身をpx単位でサイズを測ることができます。
HTMLやCSSのレイアウトを飛び越えて、ページ上であれば
測ることができます。要素のサイズを調べる、ということなら
Firebugでもできるんですが、まれにその要素をつかめないときも
あります。

そのときMeasureItなら、そういうものを無視して
測れてしまうんです。

IE Tab
https://addons.mozilla.org/ja/firefox/addon/1419
ワンクリックでFirefoxからIEでのブラウジングに切り替えられます。
ページの仕上げとして最低限ブラウザ環境のチェックは必要ですから
かなり重宝します。ただメモリを結構食うので、Firefoxが普段から重い!
という人は控えた方がいいかもしれません。

合わせてOpera環境でのチェックもできるOpera Viewも紹介します。
これはIE Tabとは違い、Firefoxを経由してOperaを起動する
(ウィンドウが立ち上がる)という形になります。

Popup ALT Attributes
https://addons.mozilla.org/ja/firefox/addon/1933
InternetExplorerなどで画像にマウスオーバーするとALT属性
(代替テキスト)がツールチップ(小窓、吹き出し)のように
表示されますが、それをFirefoxでも実現するアドオンです。

装飾だけの画像を除けばALT属性を入れることは常識となってきていますので
そのチェックには欠かせないアドオンですね。

Screengrab!
https://addons.mozilla.org/ja/firefox/addon/1146
スクリーンショットをpngかjpg形式で保存できるアドオンです。
WindowsであればPrintScreenでスクリーンショットは撮れますが
Screengrab!ではそのページのすべて(スクロールする範囲すべて)を
一枚画像として撮ることができます。

すでにリリース済みのページに対して、修正を入れるときには
まずスクリーンショットを加工して確認します。そのときには
必須となるアドオンです。

Web Developer
https://addons.mozilla.org/ja/firefox/addon/60
Firebugとならんで、アドオン名の通りWebデベロッパー全般に
ありがたいアドオンです。HTMLやCSSのリアルタイム編集などの
機能はこちらも備えてますが、機能の数はもっとすごい、と思います。
(僕がFirebugをまだまだ使いこなせていないだけかもしれませんが…)

フォームのフォールド自動割り当て(入力項目を自動で埋める)とか
JavascriptOFF機能、その他コードのチェックに必要な情報を
簡単に見ることができます。HTML Validatorのような
HTMLの構文チェックもできてしまいます。

僕の場合は個別の機能をマウス操作で使うよりも
「スタイルシートのOFF(Ctrl+Shift+S)」などの
ショートカットで活用しています。

Tab Mix Plus
https://addons.mozilla.org/ja/firefox/addon/1122
デザインやコーディングというよりもブラウジングに便利な
アドオンになりますが、これはFirefoxのタブ機能などを
より便利にカスタマイズできるプラグインです。

ページ構築の節目で、リンク切れやエラーの無いように
リンクチェックなどは欠かさないのですが、自動チェック
ツールだけでなく、人の目でのチェックもおこないます。

そのときには多くのリンクを次々と開いていくのですが
Tab Mix Plusで、リンク元のページを「ロック」、
そしてリンクをすべて「新しいタブで開く」というのが
基本設定になっています。

またうっかり重要なページを閉じないよう、そのページの
タブを簡単に「保護」できるような設定もしています。
(タブをダブルクリックすると、保護、というような設定)

フォクすけといっしょ
https://addons.mozilla.org/ja/firefox/addon/3867
OperaViewを含めると、10選超えてしまったのでおまけで・・・

Firefoxのマスコットキャラクター、フォクすけがFirefoxの
あらゆるところに出没します。多くのプロジェクトを抱え
忙しくとも、フォクすけに癒されることは業務効率アップにつながります。

こういうことを言っていると、現場の女性プログラマに
煙たがられていますが、個人的にはおすすめです。

さらにおまけですが、

中止ボタンがしいたけに見えて困る
https://addons.mozilla.org/ja/firefox/addon/4298
もはや説明は不要です。疲れている人にはブラウザの中止ボタンが
しいたけに見えてしまいます。

と、こういった遊び心も、クリエイティブには必要だと思います。
(最後の2つを導入しているのは僕だけですが…)

Firefoxの普及度はInternetExplorerに比べるとまだまだ少ないですが
着実にユーザーを増やしています。
EC studioでも、Firefoxの拡張機能として使えるようなツールを
開発してみたいなと思っています。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.