Firefox Developer Editionを使ってみる
Firefoxの10周年にあたり、バージョン33.1がリリースされたことは、すでにこちらで取り上げた。その際に、Firefox Developer Editionもリリースされた。その名の通り、開発者向けの機能が搭載されたブラウザである。ダウンロードは、図10から行う。
中央にある［無料ダウンロード］をクリックすると、ダウンロードが開始される。firefox-35.0a2.ja.win32.installer.exeというファイルだ。ダブルクリックでインストールを開始する。
|
図11 Firefox Developer Editionのインストール |
青いイラストがいつもと違う雰囲気を出している。インストール手順などは、普段のFirefoxと同じである。インストール直後には、新機能紹介ページが表示される(図12)。
|
図12 インストール直後の新機能紹介ページ |
ちなみにスタートページは、図13である。
|
図13 Firefox Developer Editionのスタートページ |
こちらも青のイラストとなっている。メニューバーなどは、黒でデザインされ硬質感が漂う。いかにも開発者向けといった感じである。さて、図12の新機能紹介ページに戻ろう。どういった機能があるのか、動画や解説ページのリンクが並ぶ。図12からさらに下にスクロールしたのが図14である。
|
図14 ツールと機能の紹介 |
詳細解説ページは、すべて日本語となっている。
|
図15 WebIDEの詳細解説ページ |
動画の方は、残念ながら英語のままであった(図16)。
|
図16 スタイルエディタの機能紹介動画 |
翻訳作業などは、Mozilla Japanのコミュニティなどを中心に行われている。その努力に感謝するとともに、有効利用させていただきたいと思う。搭載された機能を簡単に紹介しよう。
WebIDE
Webアプリを直接開発、配布、デバッグできるツールである。作業はブラウザ、もしくはFitrefox OS上で行う。テンプレートから新しいFirefox OSアプリ(Webアプリ) を作成したり、既存アプリのコードをデバッグすることができる。
Valence(旧名はFirefoxツールアダプタ）
実体はアドオンであるが、Firefox Developer Editionにはデフォルトでインストールされている。さまざまなブラウザをFirefox開発者ツールでデバッグできるようになる。OSや機種を超えた互換性のチェックが行える。Mozillaによれば、まだ実験段階のアドオンであるとのことだ。
ページインスペクタ
WebページのHTMLとCSSを調査したり、ページの構造やレイアウトを変更するツールである。
Webコンソール
ページコンテンツで実行するJavaScriptによって明示的に記録するエラー、警告、情報メッセージ、ネットワーク要求、JavaScript、CSS、セキュリティのエラーや警告を記録する。さらに、JavaScriptでWebページを制御可能。
JavaScriptデバッガ
JavaScriptのコードをステップ実行して確認したり、バグを発見するため変数の変更などを行う。
ネットワークモニタ
ブラウザが実行したすべてのネットワーク要求(たとえばページの読み込みやXMLHttpRequestsなど)について、個々の要求にかかった時間、要求の詳細情報をモニタリングする。
Web Audioエディタ
Web Audio Editorはページ内で構築したオーディオコンテキストを調査して、そのグラフを可視化する。結果、すべてのオーディオノードが設計通りに接続されていることをリアルタイムに確認できる。
スタイルエディタ
WebページのCSSファイルを確認・編集を行う。さらに、新しいスタイルシートを追加したり、既存のCSSファイルをWebページに適用可能となる。
詳細な使い方については、リンク先(ダウンロードページでも同様のリンクがある)を参照していただきたい。まず、注目なのは、WebIDEであろう。間もなく日本国内でもFirefox OS搭載スマーフォンがリリースされる予定である。HTML 5とJavaScriptの知識さえあれば、アプリ開発は可能である。その開発環境として、最適な環境といえるだろう。
図17 WebIDE、Firefox OS 1.3をシミュレート
WebIDEだけでなく、上述したツールがすべて1つのブラウザから利用できる点が特徴ともいえる。Valenceのように、途上のツールもあるが、逆にユーザーからのフィードバックも歓迎している。意見などでもかまわないので、積極的に対応してほしい。
