ScrapBook

• ScrapBook(本家サイト)
• Firefox Add-ons

五味渕大賀氏を中心とするメンバーにより開発およびローカライズされている拡張機能で、2006年3月に米Mozillaが主催した「Extend Firefox コンテスト」で「最も便利な拡張機能」のひとつに選ばれた優れものが、「ScrapBook」だ(プレスリリース)。

ダウンロードとインストールは、本家サイトの「Install ScrapBook」か、Firefox Add-onsの「Install now」をクリックし、Firefoxを再起動すれば完了だ。

本来は、ローカルファイルに取り込んだWebページを、自分用に加工して保存するためのものだが、ここでは開発者にも使えそうな機能を紹介する。いずれも、メニューの「ScrapBook」かWebページ内を右クリックして「ページの取り込み」を行ってローカルファイルに保存した後で使える機能だ。

DOMイレーサー

これは、図11の右ペインに表示されたWebページに十字のカーソルをかざし、クリックするとその部分を占めるノードが丸ごと削除されるという機能だ。これにより、ノードを削除するとどのようにレイアウトが変わるのかを把握できる。また、ノードを削除せずに、この部分がどういうノードで構成されているかを把握するだけでも十分使える機能だろう。class属性やid属性の値が表示されるので、CSS編集やAjaxプログラミングに役立ちそうだ。

図11 DOMイレーサーでノードを調べているところ

マーカー

マーカーは、ドラッグで選択した範囲に色をつけられる機能だ。マーカーは4種類登録されており、随時切り替えが可能だ。マーカーの色の設定は変更可能だ。付箋アノテーションは、Webページ内にメモ書きを加えられる機能だ。グレーの枠内左下の「Save」をクリックすれば保存できる。デザイナに対して、変更の要望や注意事項を書き加えるのに使えるだろう。

この他にも、リンクの追加、ファイル添付、選択範囲の削除といった機能があるので、興味があれば使ってみていただきたい。

図12 マーカー(黄色の部分)と付箋アノテーション