アプリマネージャを使用する

アプリマネージャはデスクトップ版のFirefoxの為の新しいツールです。アプリマネージャはFirefox OS端末およびシミュレータ向けのアプリケーションのテスト、開発、デバッグをサポートし、ブラウザから直接利用できます。

 

アプリマネージャは以下で構成されています。

  • アプリ パネルローカルに存在するアプリ(PC内にアプリのソースコードが存在するアプリ)の管理が行えます。
    そして、端末やシミュレータへのアプリのインストールやToolboxesを使用してのデバッグが行えます。
  • 端末 パネル :  接続されたFirefox OSデバイスに関する様々な情報(インストールされたアプリの一覧と、利用するAPIの権限情報、Firefox OSのバージョン)が表示されます。
  • Toolboxes, : 開発者向けのツール( Web コンソール, インスペクタ, デバッガなど )になり、アプリパネルからアプリを選択し、操作することが出来ます。

さぁ始めよう(Quick setup):

このセクションはあなたが可能な限り早く使用できるように記載されています。
もし、これ以上の詳細な情報が欲しい場合、Configuring_device セクションまで飛ばしてください。
何かトラブルが起きた場合は、Troubleshooting セクションを参照してください。
  1. デスクトップ版のFirefox 26以上をインストール
  2. URLバーに”about:app-managerと入力し、アプリマネージャを開く
  3. 実際の端末を持っていない場合:
    1. Firefox OS Simulatorをインストールする
    2. アプリマネージャの下のツールバーからシミュレータを起動を選択してください。選択後、インストール済みのシミュレータが表示されます。シミュレータを選択する事で、選択されたシミュレータが起動します。
  4. 実際の端末を持っている場合:
    1. 端末のFirefox OSのバージョンを1.2以上にアップデートしてください。
      keon/peakの場合はこgeaksphoneの公式ページよりアップデートしてください。
    2. 端末設定からスクリーンロックを解除してください (Settings > Screen Lock)。その後、Remote Debuggingを有効にしてください(Settings > Device information > More information > Developer)。
    3. デスクトップ版のFirefoxのアドオンであるADB Helperをインストールしてください。
    4. 端末とあなたのPCをUSBケーブルで接続してください。
    5. アプリマネージャの下のツールバーにあなたのデバイスが表示されますので、それを選択してください。
  5. 下のツールバーに"Connected to: xxx"と表示されます。
  6. アプリ パネルを選択し、任意のアプリを追加してください。 (packagedか hosted)
  7. Refreshボタンを押下することで接続しているシミュレレータか端末にインストールされているアプリを表示します。
  8. Debugボタンを押下することで起動中のアプリに開発者ツールを用いて接続することが出来ます。

端末とシステムの設定

アプリマネージャを使うにはあなたの使用している環境と端末を正しく設定する必要があります。このセクションでは必要となる手順を記載しています。

Firefox 1.2以上が必要

端末がFirefox OS/Boot2Geckoが1.2以上である必要があります。インストールされているバージョンの確認するには、設定アプリを起動し Device Information > Softwareの順で確認して下さい

もし、必要となるバージョン以上がインストールされていない場合、使用している端末によってインストール方法が異なり、あなた自身でソースコードからビルドする必要がある場合のあります。

利用可能なビルド:

Firefox OS 1.2以降をビルドするには、Firefox OS build prerequisitesを読んでからBuilding and installing Firefox OSの指示にしたがってください。

リモートデバッグ

次にFirefox OSのリモートデバッグを有効にします。設定アプリから Device information > More information > Developerと進み、Remote Debbugingのチェックボックスにチェックを入れてください。

ADBまたはADB helper

アプリマネージャはAndroid Debug Bridge (ADB)を使用し、PCと端末間で通信を行います。その為、ADBが必要となり、2つの使用方法があります。:

  • (推奨)デスクトップ版のFirefoxにADBをインストール: ADB Helperアドオンをインストールすることで簡単にセットアップすることが出来ます。この方法で必要な環境がアドオンに含まれるため、手動でADBをインストールする必要はなく、adb forwardを使用する必要はありません。

    Download ADB Helper Add-on
  • ADBを手動でインストール: Android SDK パッケージをダウンロードし、adbをインストールする必要がありますGet the Android SDK を見てください)。そして、ポート転送を設定を有効にする必要がありますので、ターミナルから以下のコマンドを入力してください。:
  • adb forward tcp:6000 localfilesystem:/data/local/デバッガ-socket
    端末の再起動、USBケーブルの再接続を行う度にコマンドを入力する必要がありますので、注意してください。

注意: ADB Helperアドオンをインストールすることで、上記のコマンドの入力は不要となります。

実機をアプリマネージャに接続する

全ての設定が終わったら、端末をPCに接続し、アプリマネージャを起動させてください。:

  1. USBケーブルを使用して端末とPCを接続してください。
  2. 設定アプリからスクリーンロックを解除してください( Settings > Screen Lock に行き、Lock Screenのチェックボックスを解除)。スクリーンがロックされてしまうと、PCとの接続が解除されてしまいます。つまり、これ以上、デバッグができなくなってしまうからです。
  3. デスクトップ版のFirefoxでアプリマネージャを起動する。 ツール > Web開発 > アプリマネージャ のメニューを選択、またはアドレスバーに about:app-manager と入力する。
  4. アプリマネージャのタブの一番下に、接続ステータスバーが見えるようになります (下のスクリーンショットをみてください)。 "Connect to localhost:6000"のボタンをクリックすることで、実機を接続できるでしょう。
  5. うまくいくと、端末に"An incoming request to permit remote debugging connection was detected. Allow connection?"(リモートデバッグの許可リクエストが来ました。接続許可しますか?)というプロンプトが表示されます。OKボタンをタップし(プロンプトが見えるよう電源ボタンも押さないといけないかも) 接続ステータスバーの表示が"Connected to B2G"と更新され、接続をキャンセルするためのDisconnect(接続解除)ボタンが使えるようになるでしょう。

接続ステータスバーのその他の部品で、 アプリマネージャとシミュレータを接続する(次節で述べます)ことや、接続ポートの変更ができます。ポート変更した際、同様にポートフォワーディングも有効にする必要があり、その方法は上記の Enable port forwarding節にあります.

Firefox OSシミュレータのアドオンを使用する

アプリマネージャを使用できる実機を未入手の場合、Firefox OS シミュレータを使うことができます。開始するには、使っているOSに応じたシミュレータをインストールしてください。

Install Simulator

シミュレータをインストールしたら、アプリマネージャタブの下部にある接続ステータスバーに行って「シミュレータを起動」ボタンを押します。3つのボタンが出てきます:

  • "Firefox OS 1.2" ... など (または似た物): 一番左のボタンはインストールしているシミュレータのバージョンを表します。シミュレータと接続するにはクリックしてください
  • "Add": 真ん中のボタンはこの記事にあるシミュレータのインストールリンクへ誘導します。シミュレータをいくつも追加できます(Firefox OS 1.2, Firefox OS 1.3, ...)
  • "Cancel": 右側のボタンは接続をキャンセルします。

アプリのパネル

今や全て動きます。Apps パネルで開始し、アプリマネージャ内部の機能を見て行きましょう。ここからデバイスに既にお持ちのアプリをプッシュしてデバッグすることができます:

  • ローカルアプリをインストールするには、"パッケージアプリを追加"ラベルの横にある「+」をクリックし、ファイル選択ダイアログでアプリのあるディレクトリを選択します
  • 外部のホスト型アプリをインストールするには、マニフェストファイルの"ホストされたアプリを追加"ボックスの中のテキスト領域に絶対パスでURL指定し、「+」のボタンを押します。

あなたのアプリの情報がウィンドウの、下図のように右手に出てきます:

マニフェストエディタ

Firefox 28 以降、アプリパネルの中にマニフェストエディタが含まれています:

デバッグ

"Update"をクリックすることで端末上にアプリをアップデート(インストール)します。"debug"をクリックすることでアプリとツールボックスを接続し、コードを直接デバッグできます:

Firefox 28より前では、ツールは個別のウィンドウで開始されます。 Firefox 28以降では、ツールはアプリマネージャ自体の中の、アプリタブや端末タブと同時の個別のタブで開始されます。タブには見つけやすくなるようアプリアイコンが付いています:

各種エラー

アプリの追加に失敗する場合 — 例えばURLが正しくない場合や、パッケージ型アプリを選択した場合 — このアプリのページは追加されますが、これにはエラー情報が混ざっています。

このビューでアプリを消すこともできます。ウィンドウ左手のアプリ名/説明部分にマウスを移動し、それぞれに現れる"X"ボタンを押すと消えます。ただし端末からアプリを消すわけではありません。そうするには端末自体を操作して、手動で消去する必要があります。

端末のパネル

端末のタブでは接続した端末の情報を表示します。 "インストールされたアプリ" ウィンドウから、  端末上のアプリを開始したりデバッグしたりできます。

記: 認証アプリ はデフォルトで列挙されません。認証アプリをデバッグするを見よ

"許可設定"ウィンドウでは、現在の端末上で色々な Web APIsに求められる権限を表示します。 :

ついに、"Screenshot"ボタンをクリックすることで、今の端末のディスプレイのスクリーンショットを取れるようになりました。スクリーンショットはFirefoxの新しいタブに出てきて、保存も破棄もお好きな様にできます。

認証アプリをデバッグする

現状、開発ビルドであるFirefox OS 1.2を実行したデバイスだけが認証アプリをデバックできます。開発ビルドがある場合、プロファイルでdevtools.debugger.forbid-certified-appsの設定をfalseに変更することで認証アプリをデバッグできるようになります。そうするには、以下のステップに従って下さい:

  1. お使いのコンピューターで、ターミナル/コンソールから下記コマンドを打ち込んで、端末のファイルシステムのシェルに入ります:

    adb shell

    プロンプトがroot@androidに変わります。

  2. 次に下記コマンドでB2Gを停止します:

    stop b2g
  3. 下記ディレクトリに移動します:

    cd /data/b2g/mozilla/*.default/
  4. ここで、以下のようにprefs.jsファイルを更新します:

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
  5. ファイルの編集・保存が終わったら、下記コマンドでB2Gを再開します:

    start b2g
  6. androidファイルシステムをexitコマンドで終了します; つまり普段のターミナルのプロンプトに戻ります。

  7. 次に、アプリマネージャに再接続すると、デバッグ用の認証アプリが見えるようになるでしょう。

記: この設定をGaiaのビルドに追加したい場合、"make DEVICE_DEBUG=1 reset-gaia"と実行します。

トラブルシューティング

デバイスが認識されない時は:

端末がアプリマネージャと接続できなかったり、シミュレータが起動しない場合、教えてください。あるいはバグを記録してください。

添付ファイル

ファイル サイズ 日時 添付者:
apps error 2
71860 バイト 2013-10-02 06:22:49 chrisdavidmills
apps panel 2
74638 バイト 2013-10-02 06:23:02 chrisdavidmills
connection status 2
20663 バイト 2013-10-02 06:23:13 chrisdavidmills
debug view 2
111778 バイト 2013-10-02 06:23:28 chrisdavidmills
device tab 2
150533 バイト 2013-10-02 06:23:39 chrisdavidmills
permissions tab 2
139381 バイト 2013-10-02 06:23:50 chrisdavidmills
apps-panel-fx-28
119135 バイト 2013-12-13 14:48:33 wbamberg
toolbox-fx-28
241249 バイト 2013-12-13 14:48:47 wbamberg

Document Tags and Contributors

Contributors to this page: Yusuke.Y, Uemmra3
最終更新者: Uemmra3,
サイドバーを隠す