MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

ランタイムのセットアップ

ランタイムは Web ブラウザなど、アプリの実行やデバッグを行う環境です。以下のようなランタイムがあります:

  • Firefox のインスタンス。デスクトップ版あるいは携帯電話で実行する Android 版 Firefox のインスタンスです。
  • Firefox OS を実行するデバイス、またはデスクトップ環境にインストールした Firefox OS シミュレータ。
  • デスクトップまたはモバイルデバイスで実行する Google Chrome や Safari といった、別のブラウザエンジン。

WebIDE では、右側のサイドバーでランタイムを管理します:

サイドバーでは、ランタイムを 4 種類にグループ分けしています:

USB デバイス
USB で接続した Firefox OS デバイス。Firefox 36 より、USB 経由で Android 版 Firefox への接続も可能です。
WI-FI デバイス
Wi-Fi 経由で接続した Firefox OS デバイス。Firefox 39 の新機能
シミュレータ
インストール済みの、Firefox OS シミュレータのインスタンス。
その他
任意のホスト名とポートを使用して、リモートランタイムに WebIDE を接続します。Valence アドオンをインストールしている場合は、アドオンで使用可能になるランタイムをこのセクションに表示します。

ここでは、ランタイムを追加する方法を説明します。

Firefox OS デバイスを接続する

十分に新しいバージョンの Firefox と Firefox OS がある場合は、Wi-Fi 経由で Firefox OS デバイスに接続できます。そうでない場合は、USB 経由で接続しなければなりません。

Android 版 Firefox に接続する

USB で接続した Android デバイスおよび Android 版 Firefox を、"USB デバイス" 配下のランタイムとして表示します。また Firefox 42 より、Wi-Fi 経由でAndroid 版 Firefox に接続できます。

シミュレータを追加する

Firefox OS シミュレータは Firefox OS の上位層であり、パソコン上で動作して Firefox OS デバイスのシミュレーションを行います。これは Firefox OS デバイスと同じサイズのウィンドウで動作し、Firefox OS のユーザインターフェイスや同梱アプリを含み、そして Firefox OS デバイスの API の多くをシミュレーションします。

これは多くの場合、アプリのテストやデバッグに実機が必要ないということです。

シミュレータは Firefox に同梱せず、アドオンとして提供しています。ランタイムサイドバーで "シミュレータをインストール" をクリックすると、さまざまなバージョンの Firefox OS シミュレータをインストールできるページが開きます。

シミュレータはいくつでもインストールできます。シミュレータはダウンロードに時間がかかりますので、お待ちください。

Firefox OS シミュレータ 2.6 以降を使用するには、Firefox 45 以降を使用しなければなりません。

シミュレータをインストールしたら "追加のコンポーネント" ウィンドウを閉じてください。ランタイムサイドバーの項目として、インストールしたシミュレータが表示されます:

シミュレータについて詳しくは、ドキュメントをご覧ください。

シミュレータの設定

Firefox 42 の新機能

Firefox 42 より、サイドバー上のシミュレータの項目の隣に設定アイコンがあります:

アイコンをクリックすると、シミュレータの設定を行う画面を表示します:

以下の設定が可能です:

  • 名前
  • カスタムデスクトップ B2G ビルドを使用する
  • カスタム Gaia プロファイルを使用する
  • シミュレータで特定のデバイスやスクリーンサイズをシミュレーションする

その他のランタイム

リモートランタイム

リモートランタイムによって、任意のホスト名とポート番号を使用してリモートデバイスに接続できます。

内部で Firefox OS デバイスや Android デバイスは、Android Debug Bridge あるいは ADB と呼ばれるプログラムを用いてパソコンと接続しています。デフォルトで WebIDE は、ADB Helper を使用します。これは ADB のインストールやポートフォワーディングの設定により手続きを単純化しますので、Firefox のデスクトップツールとデバイスがメッセージを交換できるようになります。

これはほとんどの場合に便利ですが、ADB を WebIDE の外部で使用したい場合があるかもしれません。例えば、コマンドラインから直接 ADB を実行することがあるでしょう。その場合は adb forward コマンドを使用して、ホスト名とポート番号を指定することによりデバイスと接続します (例: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket)。
さらに WebIDE も接続したい場合は ADB Helper アドオンを無効化したうえでカスタムランタイムにより、adb forward に渡すホスト名とポート番号を入力 (例: localhost:6000) して WebIDE を接続します。

また Firefox 36 より前のバージョンでは、ADB Helper は Android 版 Firefox への接続をサポートしていないため、Android 版 Firefox に WebIDE を接続したい場合はポートフォワーディングを設定したうえで、カスタムランタイムを使用して接続することが必要です。詳しくは Firefox 36 より前のバージョンで ADB を使用して Android 版 Firefox に接続する方法のドキュメントをご覧ください。

Valence で使用できるランタイム

Valence アドオンをインストールしている場合は、以下 3 種類のランタイムが追加されます:

  • Android 版 Chrome
  • iOS 版 Safari
  • デスクトップ版 Chrome

これらのランタイムに接続する手順は、リモートデバッグの該当するページで確認してください。

ランタイムの選択

ランタイムをセットアップすると、ランタイムサイドバーで選択できるようになります。

  • シミュレータを選択すると、WebIDE はシミュレータを起動します。
  • Firefox OS デバイスを選択すると、WebIDE はデバイスに接続します。デバイスでは接続を望むかを問い合わせるダイアログが表示されます。"OK" を押してください。

以上で、WebIDE のツールバーの中央にある "インストールして実行" ボタンが使用可能になります。このボタンをクリックして、選択したランタイムでアプリのインストールや実行を行います。

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,