「Firefox 34」を試す - WebRTC機能「Firefox Hello」搭載、開発者向けブラウザFirefox Developer Editionも紹介

Firefox Developer Editionを使ってみる

Firefoxの10周年にあたり、バージョン33.1がリリースされたことは、すでにこちらで取り上げた。その際に、Firefox Developer Editionもリリースされた。その名の通り、開発者向けの機能が搭載されたブラウザである。ダウンロードは、図10から行う。

中央にある［無料ダウンロード］をクリックすると、ダウンロードが開始される。firefox-35.0a2.ja.win32.installer.exeというファイルだ。ダブルクリックでインストールを開始する。

青いイラストがいつもと違う雰囲気を出している。インストール手順などは、普段のFirefoxと同じである。インストール直後には、新機能紹介ページが表示される(図12)。

ちなみにスタートページは、図13である。

こちらも青のイラストとなっている。メニューバーなどは、黒でデザインされ硬質感が漂う。いかにも開発者向けといった感じである。さて、図12の新機能紹介ページに戻ろう。どういった機能があるのか、動画や解説ページのリンクが並ぶ。図12からさらに下にスクロールしたのが図14である。

詳細解説ページは、すべて日本語となっている。

動画の方は、残念ながら英語のままであった(図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のように、途上のツールもあるが、逆にユーザーからのフィードバックも歓迎している。意見などでもかまわないので、積極的に対応してほしい。