Web Developer

• Web Developer Extension
• Firefox Add-ons
• Infoaxia(日本語版)

このところ、開発者向けの拡張機能で人気を博しているのは、ここで紹介する統合開発環境だろう。これらを利用することによって、サーバアプリケーションのテストではカバーし切れない、JavaScriptの動作やCSSによるレイアウトのテストをしやすくなる。それ以外にも、これから紹介するとおりさまざまな機能が備わっているので、あなたがもしWebアプリケーションの開発者なら、ぜひこの機会にこれらの優れた機能を体験してほしい。

Web Developer 1.1.2 日本語版

Web Developerは、Chris Pederick氏が開発する統合開発環境で、日本語版はインフォアクシアでもダウンロードが可能だ。どちらもGNU General Public License(GPL)に基づいて配布されている。

ダウンロードおよびインストールは、前者のサイトで「Firefox/Flock Download」をクリックするか、後者のサイトで「Mozilla Firefox用『Web Developer 1.1.2 日本語版』ダウンロード(208KB)」をクリックする。自動的にインストールが開始されない場合は、ダウンロードされたファイルをブラウザ画面にドラッグ&ドロップするとインストールが開始される。

図1は、左のペインでCSSの編集を、右のペインでdivなどのブロック要素が占めている部分とそのサイズを表示させたものだ。URLを入力するナビゲーションツールバーのすぐ下に表示されているのがWeb Developerのツールバーで、ここから各種の機能を選択して開発作業を行うことができる。これを表示させない場合は、メニューバーの「ツール」→「Web Developer [日本語版]」からも同じ機能を選択できるようになっている。

図1 Web Developerの編集画面(CSSの編集とブロック要素のサイズを表示)

Web Developer(バージョン1.1.2 日本語版)が持つ機能は、それ自身の設定に関するものを除いて、大きく以下の6つに分けることができる。次ページではそれらの機能をみていきたい。