ウェブデザイナー向けFirefoxのアドオン5つ
執筆日時：2010/07/01
近頃ではMSのInternetExplorer(IE)から、FirefoxやSafari、もしくはOperaといった標準準拠のブラウザに乗り換える人が増えてきたため、WEBサイトを制作する側としてもIE6対策等にあまり力を注がなくて良くなってきた気がします。特にFirefoxはWEB製作用の標準ブラウザとしての地位を確立しているのではないでしょうか。
なぜFirefoxがWEB制作の現場で使われるかの理由の一つには、強力な制作支援ツールがアドオンとして存在していることが挙げられます。ここでいうアドオンとは、ソフトウェアに組み込むための拡張機能のことです。Firefoxには数多くのアドオンが存在しており、現在も活発に開発が行われています。アドオンにはブラウザの外観をカスタマイズするためのもの、ダウンロード等を支援するためのもの、YouTubeなどで動画を見やすくするものなど、様々ありますが、今回取り上げるのはWEB制作のためのアドオンです。これを使いだすと、これ無しでWEB制作の作業するなどということは考えられなくなると思います。
1. Firebug
まず最初に紹介するのは「Firebug」というアドオンです。WEB制作でFirefoxを使用する人の中に、このアドオンを知らない人はそうそういないと思います。それくらい有名な鉄板ツールです。Firebugの主な機能は解析とデバッグです。(X)HTML、CSS、JavaScript、XMLなどを表示し、リアルタイムに編集することができます。私は基本的にXHTMLとCSSしか利用しないので、プログラム関連の機能を使うことはあまりありませんが(バイトで稀にJSを触るくらいです)。
私の場合、主な用途はFirefoxで作成中のページを確認する際に、XHTMLの各要素にどのCSSがかかっているのか確認することです。さらにCSSかXHTMLの方で記述が間違っていた場合には、Firebugを使用して解析することでミスに気付くのも早くなります。
また、自分１人で作成しているサイトではない場合(バイト先では大抵そうですが)、XHTMLとCSSがどのような構成で制作されているのかを素早く把握する必要があります。大規模なサイト制作の場合、CSSのファイルは複数設け(例えばimport.css、common.css、module.cssなど)、CSSを整理して記述するのが常識です。もしFirebugのような解析ツールが無ければ、XHTMLの各要素にどんなCSSがかかっているのか調べるために、全てのCSSファイルに検索をかけ(しかも該当のXHTML要素を含む親要素に至るまで)、なおかつそのCSSがどの順番で適用されているか自分で判断しなければならなくなっていまいます。これは恐ろしく手間がかかる作業です。私の場合は個人のサイトでも複数のCSSファイル構成を採用しているので、絶対にこの機能が必要です。
加えて、リアルタイム編集機能もよく利用します。これはFirebugのウィンドウ内に表示されているHTMLやCSSなどを直接編集して、結果が反映されるのをすぐに確認できるという機能です。各(X)HTML要素にかかっているCSSの一覧はスタイル欄で確認できますが、数百行あるCSSファイルの中から該当する箇所までスクロールし、編集して上書き保存するのが面倒な場合、これは非常に手っ取り早い方法で便利です。
このように、FirebugはWEBサイトを制作する上で欠かすことのできないFirefoxのアドオンなのです。
2. ソース表示タブ
2つめに取り上げるのは、「ソース表示タブ」なるアドオンです。このアドオンは、ページのソースを新たなウィンドウではなく、タブ内で表示させるようにするアドオンです。
WEBコーディングをしていると、ブラウザで開いているページのコードをコピーしたくなることというのがよくあります。例えばサイトのシステムを新たなものへと移行する際、旧サイトの内容をデザインを保ったまま新システムへ組み込むには、以前のコードを分割して新システムに移植するという作業をすることになります。このような場合、デザインが変化していないかの確認もするのですから、既存のサイトをブラウザで表示しながらの作業になります。こういうときソースを見ようと思ったら、実際の.htmlファイルをエディタで開くのではなく、普通はブラウザのメニューバーにある「表示」→「ページのソース」でソースコードを参照することと思います。そうすると、デフォルトでは新たなウィンドウが開いてソースが表示されます。これは1つのソースだけ表示している分には問題ないのですが、もし2つ3つを同時に表示するとなると、ウィンドウが多数表示されて美しくありません。そこでこれをタブ内に表示しすっきりさせるるのが「ソース表示タブ」の機能です。名前のままの機能でシンプルなものですが、入れておくと作業がスムーズになるアドオンです。
3. FireMobileSimulator
3つ目はFireMobileSimulatorです。このアドオンは、その名の通り携帯端末をシミュレートするためのアドオンで、携帯向けのサイトを制作する上で必須のツールです。
3つ目はFireMobileSimulatorです。このアドオンは、その名の通り携帯端末をシミュレートするためのアドオンで、携帯向けのサイトを制作する上で必須のツールです。
携帯サイトを制作するにあたっては、一般的なブラウザ向けにつくるのとは随分異なったデザインを行わなければなりません。まず第一に、携帯端末では画面のサイズが一般に小さく、さらに機種ごとに様々です。それに加え、使えるCSSにも制限があります。また、絵文字を用いることができるというのは、コンピュータのブラウザには無い特徴です。これらの理由から、携帯向けサイトを作る際には最終的に実機（つまり携帯端末）での確認作業をすることになりますが、制作の初期段階からいちいち操作性の悪い携帯端末でデザインを確認して行くのは面倒です。しかも実機で確認するということは、サーバーにファイルをアップロードしている必要もあります。つまりローカル環境のみでは確認を行えないのです。そこで使用するのがこのFireMobileSimulatorです。このアドオンを使うことにより、FireFoxの画面上で携帯のブラウザをシミュレートし、携帯端末からどう見えるかをチェックすることができるのです。FireMobileSimulatorではdocomo、au、SoftBankの国内主要3キャリアの各2~4種の端末を指定して、表示させることができます。
なお、Windows環境であれば、NTTドコモが提供している「iモードHTMLシミュレータⅡ」や、ソフトバンクモバイル提供の「ソフトバンク ウェブコンテンツヴューア」といったシミュレータを使用することもできますが、LinuxやMacには当然のように対応していないので、OSSの利用を掲げる当サイトでは紹介しません。
なおこのアドオンは、コンピュータで携帯サイト（ブラウザを判断して携帯以外からのアクセスを拒むサイト）へアクセスしたい場合に使うこともできるので、WEBデザイン用途以外でも便利なツールです。
ただ難点を挙げるとすれば、FireMobileSimulatorで設定したシミュレータがFireFoxで表示している全てのタブについて適用されるため（設定後にページを更新しなければ一般のブラウザ表示のままではあるが）、ブラウザをFireFoxだけで作業するのが難しくなるということが言えます。携帯サイトを制作する作業を長く行う場合には、Safari等の違うブラウザを立ち上げておき、そちらで一般的なページを開きつつ、FireFoxはFireMobileSimulator専用にして作業した方が効率的です。
4. HTML Validator
4つ目のHTML Validatorは、Windows版のFireFoxでしか使用できないという制限はありますが、表示しているサイトのHTML文法をチェックするための秀逸なアドオンです。
右の画像では小さいので分かりにくいですが、ブラウザのスターテスバー右端に、文法チェックの結果を簡易的に表示してくれます。この表示が緑のチェックマークになっていれば、HTMLが文法的には標準準拠であることが確かめられます。赤のバッテンなら何かしらの問題があることを示し、黄色の三角マークだとアクセシビリティーに難があるということです。このマークをダブルクリックするとエラーの詳細を表示するウィンドウが立ち上がり、htmlファイルの何行目に問題点があるのか確認することができます。エラー内容については英語でしか表示されませんが、特別難しい英語でもないので、htmlコードを日常的に打っているような人には難なく理解できるはずです。
あと、これはFireBugや庚戌のWeb Developerにも言えることですが、表示するサイト全てについて文法チェックを行うので、ブラウザの立ち上がりやページの表示速度にそれなりの影響を与えます。気になる場合には、アドオンを無効にしておくとよいでしょう。
5. Web Developer
Web Developerは上部にツールバーを表示するタイプの開発ツールで、バーの右側では現在表示しているサイトのCSSとJavaScriptのエラーチェックを表示してくれます。HTMLの構文に関しては、WEB上のアプリケーションを用いてチェックされるので、アドオン内部で検証できているわけではありませんが、MacOSXやLinux版のFirefoxでも使用できるので、Windows環境以外ではHTML Validatorの代わりにはなります。
またこのアドオンの特徴として、画像やCSSなどを無効にした状態でサイトをチェックできるという点が上げられます。ツールバーの各項目から選択するだけで、画像、CSS、Java、JavaScript、Cookie等さまざまな要素を個別に無効化し、それらに対応していない環境での閲覧状況を確認できるというわけです。今時、一般的なコンピュータで画像やCSSに対応していないブラウザを使っている人は極少数派ではあると思いますが、特にCSSを無効にした状態でサイトの表示をチェックすることにはSEO的に重要な意味合いがあるので、サイト管理をしている方は試されることをお勧めします。
まとめ
ブラウザのように普段から使用するソフトは、どれを使うか選ぶ際に個人の好みや慣れというものが強く影響します。しかしWEBデザイナーにとって、ブラウザというのは制作したサイトを確認するアプリケーションというよりは、制作で常に用いるアプリケーションという位置づけになるので、何を使うかは非常に重要な選択です。そのような中でFirefoxは、CSSレンダリングにおける標準準拠率が高いことからデザイナの意図通りに表示してくれるブラウザの1つであると同時に、アドオンが現在も精力的に開発が行われいるために多機能を売りにしたブラウザとして認知されています。またSafariと異なり、オープンソースであるためLinux等でも動作が可能であり、幅広い開発環境を可能にします。なので私はFirefoxと各種アドオンを組み合わせたものを、WEBデザインにおいて使うメインのブラウザとしているわけです。
ただ1つこの環境の難点を挙げるとすれば、あまり多くのアドオンを追加してくと、普段のブラウジングには不要な機能が常に働いていることになり、ブラウザの立ち上がりからページの表示まで、それなりの速度低下が見受けられることです。もちろんアドオンの挙動は個別に無効化することができるので、気になる場合にはFirebugなどの重いツールを無効化すればよいのですが、複数のアドオンを使用目的が変わるたび有効化/無効化してFirefox自体も再起動するというのは面倒です。こう一度に複数のアドオンの動作をON/OFFできるツールがあれば便利でしょうね。
