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

by 3 contributors:

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

アプリマネージャはFirefox OS 1.2以降の開発者向けです。それより低いバージョンではFirefox OS 1.1 Simulatorがサポートされています。アプリマネージャはFirefox 33以降WebIDEに置き換えられつつあります。WebIDEはアプリマネージャの全機能のほか、FirefoxOSアプリを作成、開発するための編集機能を提供しています。

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

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

さぁ始めよう(Quick setup):

このセクションはあなたが可能な限り早く使用できるように記載されています。
もし、これ以上の詳細な情報が欲しい場合、端末とシステムの設定 セクションまで飛ばしてください。
何かトラブルが起きた場合は、トラブルシューティング セクションを参照してください。
  1. デスクトップ版のFirefox 26以上をインストール
  2. アプリマネージャを開く(URLバーに”about:app-managerと入力するか、FirefoxのメニューでTools > Web Developer > 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. アプリ パネルを選択し、任意のアプリを追加してください。 (パッケージかホストされたアプリ)
  7. 更新ボタンを押下することで接続しているシミュレレータか端末にインストールされているアプリを表示します。
  8. デバッグボタンを押下することで起動中のアプリに開発者ツールを用いて接続することが出来ます。

端末とシステムの設定

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

Firefox 1.2以上が必要

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

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

利用可能なビルド:

記:Firefox OS 1.2以降をビルドするには、Firefox OSビルドの必要条件を読んでから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を手動でインストール: ADBのインストールで説明されているadbをダウンロードしてインストールする必要があります。ポート転送を設定を有効にする必要がありますので、ターミナルから以下のコマンドを入力してください。:
adb forward tcp:6000 localfilesystem:/data/local/debugger-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ボタンをタップし(プロンプトが見えるよう電源ボタンも押さないといけないかも) 接続ステータスバーの表示が"B2Gに接続"と更新され、接続をキャンセルするための切断ボタンが使えるようになるでしょう。

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

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

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

Install Simulator

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

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

記: The Firefox OS 1.5 シミュレータは削除されました。1.5は2.0に変わったためです。もしFirefox OS 1.5 シミュレータがインストール済みの場合、自動的に2.0に更新されることはありません。なので1.5をアンインストールし、代わりに2.0をインストールしてください。Firefox OS 2.0 シミュレータは自動更新されます。

記: Firefox OS 1.2 シミュレータは削除されました。バージョン1.2の電話機が出ない見通しとなったためです。 — ゆえにこのバージョンは価値が限定されています。そして他のバージョンでデバッグすることに時間を使う方が意味があるでしょう。

アプリマネージャでカスタムビルドを実行する

カスタムB2G デスクトップや Gaia/Gecko ビルドをアプリマネージャのシミュレータ経由で実行できます。 その方法のマニュアルはRunning custom Firefox OS/Gaia builds in the App Managerを見て下さい。

アプリのパネル: Firefox OS アプリをテスト、デバッグする

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

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

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

マニフェストエディタ

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

デバッグ

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

ツールボックスで遊び回るのを楽しめるでしょう — DOMやCSSを変更したり。リアルタイムで端末に更新されるのがわかるでしょう。更新はインストール済みのアプリのコードに保存されます; 次回端末でアプリを開いた時にわかるでしょう。

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

各種エラー

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

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

端末のパネル

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

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

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

ついに、"スクリーンショット"ボタンをクリックすることで、今の端末のディスプレイのスクリーンショットを取れるようになりました。スクリーンショットは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. 次に、アプリマネージャに再接続すると、デバッグ用の認定アプリが見えるようになるでしょう。

B2Gデスクトップクライアントを使用する

B2Gデスクトップクライアントでは、B2Gデスクトップクライアントのルートフォルダにあるgreprefs.jsのプロファイルに、設定が予め定義されています。B2Gデスクトップクライアントを停止して、devtools.debugger.forbid-certified-apps の設定を false になるよう編集します。次にB2Gデスクトップクライアントを再起動してアプリマネージャと接続します。全てのアプリを再起動見る事ができるでしょう。

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

トラブルシューティング

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

  • Firefox OS機に関連付いたボタンをクリックしても何もならない場合、Android機とFirefox OS機を、同時にコンピューターに接続していないかを確認して下さい。
  • 端末とシステムの設定 の節を一通り読んで、全てのステップに従っていることを確認してください
  • 端末は少なくともFirefox OS 1.2以上ですか?
  • 全てのアプリが見えない? Certified Apps debuggingを有効にする必要があるのでは?
  • 電話機の設定で"Remote Debugging"を有効にしていますか?
  • ADB Helper add-onを使用していない場合:
    • adb forward コマンドの実行に成功していますか?
  • ADB Helper add-onを使用していて、一番下のツールバーに端末が列挙されない場合:

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

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

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