【第1回】マークアップエンジニアおすすめのアドオン

文：工藤悠子

2007/06/20 14:00

　Firefoxのアドオンについてということですが、私の場合、一度インストールしてしまうと、特に気にせず使っているものが結構あります。かといって、とりわけマニアックな使い方をしているわけではありません。大きく分けて、意識せずに使っているものと意識して設定してきたものとがあります。

　意識せずに使っているものの代表はおそらく「Tab Mix Plus」でしょう。定番アドオンにもあがるものですので、使っている人も多いだろうと思います。タブ周りの機能拡張は、最初Firebird 0.7^（※）あたりを使っていた頃から何回か変わっていますが、Firefox 1.0を過ぎたくらいからこれに落ち着いています。

※Firefoxの旧称

　意識して使っているのは「Copy URL+」でしょうか。こちらはディレクターの方に作業完了メールをする際にタイトルとURLを一緒にコピー出来るため、重宝しています。最初はデフォルトの設定で使っていましたが、すぐに欲が出て、現在はよく使う形式に整形するようにuser.jsに指定を書き込んであります。

　私が意識してアドオンを便利に使う場面は

他の方が作成したページを検証する
作成したページをチェックする

　に分かれます。

　1.に関して、まずはじめに思い浮かぶアドオンは

　あたりです。

　Firebugでは、CSSの適用状況を見たりします。JavaScriptのデバッグにも便利だという話を聞いたのですが、残念ながら私はまだそこまではいけておらず、もっぱらCSSを見るのに使っています。

　特にサイト全体のCSSが決まっていて、それに追加する形で新しいページを作らなければならないときなどにCSSの適用具合を見るのに便利です。また、一度作って不具合が出たときに原因を探るためにも使っています。

図1：Firebug

※クリックすると大きい画像を表示します。

　そうは言っても、まだまだ使いこなせていないのが現状です。これをもっと使えるようになれば、もう少し楽になるのかな、と思いつつ、なかなか手をつけられずにいます。

　Web Developerではボックス状の枠を表示したり、ページの画像情報を表示させたり、ウィンドウサイズを変更したりします。こちらは検証用の他、作成した後の調整にもよく利用しています。もしかしたらキーボードショートカットから「CSSをON/OFFする」「要素の情報を表示する」を一番利用しているかもしれません。これは、特にフルCSSレイアウトでは要素の順番と見た目が剥離してくるためです。ソースを追うのと違って直感的に構造がわかるところが利点だと思います。

図2：Web Developer 日本語版

※クリックすると大きい画像を表示します。

　2.に関しては

　あたりをよく使っているでしょうか。

　Linkification（+ Tab Mix Plus）とAll-In-One Search buttonは主に大量のページ修正があったときのチェック用に利用しています。複数ページにわたって文言の修正があった場合、まずタブで開いてチェックし、OKのものは閉じていく、というスタイルをとっているため、これがあるのと無いのとでは作業効率が格段に違ってきます。いちいちページを戻る手間が無くなるため、確認するページが多いほど威力を発揮してくれます。

　IE View/OperaViewとPrefButtonsは通常作成の挙動チェック用にそれぞれ利用しています。作成段階ではFirefoxでまず確認しますが、その後必ずIEでも確認しなければならないため、現在Firefoxで表示されているページをそのままIEで開けるというのは意外と便利です。

　また、特に最近ではFlashを利用するサイトも増え、FlashのON/OFFを簡単に切り替えられるのが結構重要になりつつあります。JavaScriptのON/OFFも、最初はWeb Developerの機能を利用していましたが、ボタンを常駐させられるほうが楽なので、ごく最近乗り換えました。

　最初はいちいちオプションを開いて設定を変更していたものが、アドオンを入れることですごく簡単に切り替えできるようになるのは、Firefoxを使っている醍醐味だなと思っています。これからも積極的に利用できるものは利用するの精神でいきたいと思っています。皆さんもいろいろなアドオンを試して、日常の業務に活用してみてはどうでしょうか？

文：工藤　悠子
バーチャルコミュニケーションズ株式会社
Webインテグレーション事業部
技術グループ
マークアップエンジニア