Mozilla Japan ブログ

Mozilla、Firefox、Firefox OS、Thunderbird の最新情報をお伝えします

個別記事アーカイブ

開発版 Firefox で WebIDE が利用できるようになりました

[この記事は、米国 Mozilla Hacks ブログに掲載された WebIDE Lands in Nightly の抄訳です。]

編者注:テストに協力される方は、Nightly 版 Firefox で about:config の devtools.webide.enabled の値を変更してこの機能を有効にする必要があります。有効にすると、本日 (2014/06/24) は Tools>Web Developper>App Manager で WebIDE が起動します。明日 (2014/06/25) 以降は Tools>Web Developper>Web IDE に変更されます。

Mozilla Hacks ブログの開発者ツールに関する記事を読んでいらっしゃる方はご存知かと思いますが、開発者ツールはアプリや Web サイトの振る舞いを単に調査するためだけのツールではなくなっています。本日開発ツールは更に進化し、ブラウザに組み込みの編集機能が追加されました。

WebIDE

多くのツールやテンプレートがあちこちのサイトで公開されているため、アプリを作成するために何をすればいいのかよくわからない、という声を多く耳にしていました。Firefox に内蔵された WebIDE はこのような問題を解決します。WebIDE を利用すると、クリック 1 つでアプリのひな形を作成できます。また編集やテストと言ったアプリ開発に必要な機能も全て持っているため、ゼロから環境を用意することなくアプリ開発を開始できます。WebIDE はアプリのシミュレータや実機へのインストール機能をもち、Firefox の開発ツールとも統合されています。そのためシミュレータや実機上でのデバッグや調査をシームレスに行えます。またリモートデバッグ API を WiFi を通じて利用することで、さまざまなプラットフォームや端末のうえで動作するアプリもデバッグできます。

WebIDE 上で調査されている Readability アプリ

はじめよう

WebIDE を起動後、数クリックでアプリ作成を始められます。まず最初にアプリのひな形を選択します。選択すると、ひな形に基づいてアプリが作成されます。なおここで選べるひな形の種類を増やすように開発を進めています。ひな形作成にご貢献いただけるかたは https://github.com/mozilla/mortar をご覧ください。

編集

アプリのソースコード編集も WebIDE 上で行えます。編集に利用するエディタは CodeMirrortern.js を基に開発され、HTML、JavaScript、CSS の編集を実用に充分耐えるレベルで行えます。

WebIDE

アプリマニフェストも編集できます。編集されたマニフェストファイルは自動的に検証され、マーケットプレースに登録する際におきがちな問題点を事前に修正できます。

編集に必要な機能を全て持っているとはいえ、好きなエディタを利用したいということもあるかと思います。WebIDE が提供するシンプルな API を利用することで、実行環境の管理や異なる端末へのアプリのインストール、開発ツールとの連携といった WebIDE の持つ機能を、外部のエディタから利用できるようになります。内蔵エディタを切って、WebIDE の UI を実行環境の管理とアプリの検証を行うシンプルなものに変更することもできます。利用するエディタを問わず多くの方に、作成したアプリをさまざな端末へインストールするための手段として使って欲しいと思っています。

パッケージ型アプリを WebIDE を開いている例

実行環境とテスト

アプリのテストができるようになったら、まず最初にその実行環境を選びます。シミュレータがない場合は WebIDE からインストールできますし、実機への接続も WebIDE から行えます。実行環境に接続後、Firefox で利用しているツールを使ってアプリをテストできます。デスクトップ向けの Web サイトで行っているのと同様に、Ctrl/Comand+R で端末やシミュレータ上で動作しているアプリをリロードできます。また端末やシミュレータの情報の表示や、スクリーンショットの撮影も行えます。

スクリーンキャスト

WebIDE が実際に動作する様子は次のスクリーンキャストでご覧になれます。

最終的な修正を行っている間、WebIDE は Nightly 版でのみ利用可能です。この機能を試される場合は、以下のように about:config から devtools.webide.enabled の値を設定してください。

Nightly ビルドで WebIDE を有効にするには

全ての Web のために開発中

リモートデバッグプロトコルが WebIDE の中核です。USB で接続された端末に対して全てのツールを利用できるように、Firefox の開発ツールチームは多くの労力を注いできました。ただしこれは始まりにすぎません。リモートデバッグプロトコルを利用する限り、場所やツールを問わず Firefox の開発ツールを利用できるようになるでしょう。

現在のところ、デスクトップ版 Firefox、Android 版の Firefox、そして Firefox OS のみがこのプロトコルに対応しています。プロトコルに対応する環境を拡大するために、現在プロトコルアダプタを開発中です。このアダプタを利用することで、レンダリングエンジンや JavaScript のランタイムに関係なく、全てのモバイルブラウザと、開発ツールや Web IDE を含むリモートでバッギングプロトコルクライアントが通信できるようになります。我々の最初のターゲットは Android 版 Chrome と、iOS 版の Safari です。

このプロジェクト、web-everywhere プロジェクトはテストいただく準備ができていません。https://github.com/campd/fxdt-adapters にて開発が行われています。こちらでどのように実装されているかを見ていただくことができます。また開発への参加は歓迎します!

作成されているツールでのリモートデバッグプロトコルの利用をお考えなら、上記の環境向けに今すぐ開発を始めていただけます。プロトコルに関する情報はこちらの文書をご覧ください。

ここまでお読みいただきありがとうございました。フィードバックはコメント、UserVoice 上のフィードバックチャンネル、もしくは @firefoxdevtools の Twitter アカウントまでお願いいたします。

前後の記事

前の記事: 第1回 Firefox OS × HTML5 × LOD WEB イノベーションハッカソン
次の記事: Firefox OS がモバイルプロジェクトアワードを受賞しました!