Firefox OS 1.1 Simulator

Firefox OS Simulator アドオンで、デスクトップ環境にて Firefox OS アプリ のテストやデバッグが可能になります。Simulator では、実際のデバイスを使うよりも Code-Test-Debug のサイクルが高速化します。また当然ながら、Simulator を使うために実際のデバイスは必要ありません。

本質的に、Simulator アドオンを構成するものは以下のとおりです:

• Simulator: これには Firefox OS デスクトップクライアントが含まれています。これはデスクトップ環境で実行する、Firefox OS の高水準層バージョンです。Simulator には、標準的な Firefox OS デスクトップビルドには存在しない付加的なエミュレーション機能も含まれています。
• Dashboard: Simulator の開始・終了やアプリのインストール・アンインストール・デバッグを可能にする、Firefox ブラウザで提供するツールです。また Dashboard は、アプリを実際のデバイスにプッシュしたり、アプリマニフェストについて一般的な問題をチェックしたりすることもできます。

以下のスクリーンショットで、Simulator を使用したデバッグセッションを示しています。

Dashboard は右上の、Firefox のタブ内で実行しているものです。ここでは "Where am I?" という名前のパッケージ型アプリを追加しました。左上では、Simulator アプリを実行しています。またデバッグツールを接続しており、それは下部にあるパネルです。コンソールペインに、アプリに関するメッセージが表示されているのをご覧いただけるでしょう。

本ガイドでは以下のトピックを扱います:

• Simulator アドオンのインストール方法
• アプリを追加・削除・更新する方法
• マニフェストの検証
• Simulator の実行方法
• JS debugger などのデバッグツールを Simulator で実行しているアプリに接続する方法
• 課金アプリ向けのテストレシートを取得する方法
• 接続しているデバイスにアプリをプッシュする方法
• 実際の Firefox OS デバイスに対する Simulator の制限事項

Simulator アドオンのインストール

Simulator は、Firefox のアドオンとしてパッケージ化および頒布しています。インストール方法は以下のとおりです:

1. Firefox で addons.mozilla.org 内の Simulator のページを訪れてください。
2. "Firefox に追加" をクリックしてください。
3. アドオンをダウンロードすると確認のメッセージが表示されますので、"今すぐインストール" をクリックしてください。

アドオンのサイズの都合上、インストール中に Firefox が数秒間フリーズしたり、"警告: 応答のないスクリプト" というタイトルのダイアログが表示される場合があります。ダイアログが表示された場合は、インストールが完了するまで待つために "処理を続行" をクリックしてください。これは Firefox 27 以降では表示されないでしょう。

Simulator アドオンをインストールすると Firefox が定期的に新しいバージョンの確認を行い、自動的に更新します。

Simulator をインストールすると Dashboard が自動的に開きますが、"Firefox" メニュー (または OS X や Linux では "ツール" メニュー) の "Web 開発" で "Firefox OS Simulator" を選択することで、いつでも Dashboard を開くことができます:

Dashboard は、アプリを Simulator に追加したり実行したりするために使用するツールです。以下のようなものです:

アプリの追加・削除・更新

アプリの追加

パッケージ型アプリを Simulator に追加するには、Dashboard を開いて "Add Directory" をクリックします。そして、アプリのマニフェストファイルを選択してください。

ホスト型アプリを追加するには、"URL for page or manifest.webapp" と表示されているテキストボックスに URL を入力して "Add URL" をクリックしてください。URL がマニフェストを指している場合は、そのマニフェストが使用されます。そうでない場合は、Dashboard が当該 URL 向けのマニフェストを生成します: よって、URL を入力するだけで任意の Web サイトをアプリとして追加できます。

アプリを追加すると、Dashboard がマニフェストファイルに対して一連のテストを行って、一般的な問題のチェックを行います。どのようなテストを行うかについて詳しくは、マニフェストの検証の章をご覧ください。

マニフェストの検証でアプリにエラーが発見されなければ、Dashboard は自動的に Simulator でアプリを実行します。

アプリの管理

アプリを追加すると、Manager 内のインストールされたアプリのリストに表示されます:

それぞれのエントリは、アプリに関する下記の情報を示します:

• アプリの名前: マニフェストから取得します
• アプリの種類: "Packaged"、"Hosted"、"Generated" のいずれかになります
• アプリのマニフェストファイルへのリンク
• マニフェストの検証結果

また、下記 4 つのコマンドもあります:

• "Refresh": アプリに何らかの変更を施した後に、Simulator 内のアプリを更新および再読み込みします。また Dashboard で、マニフェストの検証を再度実行します。アプリに変更を施しても、インストール済みアプリへ自動的には反映されません: 変更点を適用するために、アプリの更新が必要です。
• "Connect": 選択したアプリを、開発ツールに接続します。アプリを実行していない場合は、Dashboard が Simulator およびアプリを起動します。
• "Remove" ("X"): アプリを Simulator や Dashboard から削除します。Dashboard を開いている間は、このアクションを取り消すことができます。
• "Receipt": 課金アプリのレシート検証のテストを行います。テストしたいレシートの種類を選択すると、そのテストレシートとともにアプリを再インストールします。

マニフェストの検証

マニフェストを与えると、Manager はマニフェストの検証テストをいくらか実行します。これは、3 つのカテゴリについて問題を報告します:

• manifest errors: アプリのインストールや実行ができなくなる問題です。
• manifest warnings: アプリの正常な動作を妨げる問題です。
• simulator-specific warnings: アプリが使用している機能で、Simulator が未サポートであるものです。

アプリのエントリ内に、発生した問題の要約を表示します: 要約をクリックすると、詳細が表示されます。

Manifest errors

Dashboard は以下のような状況をエラーとして報告します。これを修正しなければ、当該アプリは Simulator で実行できないでしょう:

• マニフェストに、必須のフィールド "name" がない。
• マニフェストが正しい JSON ではない。
• アプリはホスト型アプリであるが、マニフェスト内の type フィールドが "privileged" または "certified" である。これはパッケージ型アプリでのみ有効。
• 一般的な appCache のエラー (パッケージ型アプリは appCache を使用できない、マニフェストファイルをリクエストすると HTTP リダイレクトあるいは HTTP エラーのステータスが返る)

以下は、"name" がないマニフェストを追加しようとしたときの結果です:

Manifest warnings

Dashboard は、以下のマニフェストの問題を Warning として報告します:

• アイコンがない。
• アイコンが 128 ピクセルより小さい: Marketplace に提出するすべてのアプリは、少なくとも 128 ピクセル四方のアイコンが最低 1 個必要です。
• type フィールドを認識できない。
• マニフェストで、認識できない許可設定を要求している。
• マニフェストで、拒否されるであろう許可設定を要求している。
• マニフェストで、アクセス許可を決められない許可設定を要求している。

Simulator-specific warnings

最後に Manager は、Simulator で完全にはサポートしていない Firefox OS の機能を使用するアプリに対して、Warning を発します:

• type フィールドが "certified" ですが、Simulator は certified アプリを完全にはサポートしていません。
• マニフェストで、Simulator が未サポートの API を使用する許可設定を要求している。

Simulator を実行する

Simulator を起動する方法は 2 通りあります:

• アプリを追加したり、アプリ名の隣にある "Refresh" や "Connect" ボタンをクリックすると、Dashboard が自動的に Simulator でアプリを実行します。
• Dashboard の左側にある "Stopped" という名前のボタンをクリックすると、Simulator のホームスクリーンがブートします。なお、あなたのアプリを実行するには操作が必要です。

どちらの方法でも、Simulator を実行すると "Stopped" という名前のボタンが緑色に変わり、名前が "Running" に変わります。Simulator を停止するには、このボタンをもう一度クリックしてください。

Simulator は別のウィンドウとして表示され、シミュレーションするスクリーン領域が 320x480 ピクセルであるようなサイズになります。また、ウィンドウ下部のツールバーと上部のメニューバーで付加機能を提供します:

タッチイベントをシミュレーションするには、マウスボタンでクリックして、ボタンを押したままドラッグします。よってホームスクリーンで右から左へクリック アンド ドラッグを行うことで、組み込み済みのアプリと合わせてあなたが追加したアプリが表示されます:

Simulator ツールバー

ウィンドウ下部のツールバーには左から順にホームボタン、スクリーン回転ボタン、Geolocation ボタンがあります。

• ホームボタンを押すとホームスクリーンに移動します (あるいは、2秒間押し続けるとタスクリストを表示します)。
• スクリーン回転ボタンを押すと、デバイスの向きのポートレートとランドスケープを切り替えます。これは orientationchange イベントを生成します。
• Geolocation ボタンを押すと、現在の緯度・経度情報か独自の緯度・経度情報による位置情報の提供を問い合わせるダイアログが表示されます: この情報は Geolocation API を通して、アプリで利用できます。

Simulator メニューバー

Simulator 上部のメニューバーで、開発をより効率的にする有用なコマンドを利用できます:

• File -> Quit (Ctrl/Cmd - Q): Simulator をシャットダウンします。
• App -> Refresh (Ctrl/Cmd - R): 実行中のアプリを更新します。

"App Refresh" コマンドのキーボードショートカットで、Web ページ開発のようにアプリを反復開発することができます:

• コードを編集します (そして、必要であれば volo / yeoman / grunt などのビルドツールに戻ります)
• Simulator で実行しているアプリを更新するために、キーボードショートカットを押下します。

開発ツールの接続

アプリのデバッグを支援するため、Simulator に開発ツールを接続できます。現時点では JavaScript デバッガ、Web コンソール、スタイルエディタ、プロファイラ、ネットワークモニタしか接続できませんが、より多くの開発ツールをサポートするよう作業中です。

開発ツールを Simulator に接続するには、アプリの "Connect" ボタンをクリックします:

Dashboard が開発ツールボックスペインを Dashboard タブの下部に表示して、アプリをツールに接続します:

Web コンソール

アプリはグローバルの console オブジェクトを使用してこのコンソールにログを出力できます。また、アプリによって生成される他のさまざまなメッセージも表示します: ネットワークリクエスト、CSS や JS の警告やエラー、セキュリティエラー。(Web コンソールについて詳しく学びます)

デバッガ

エラーや問題点を早急に追究するためにデバッガを使用して、接続したアプリで実行している JavaScript コードのステップ実行、ブレークポイントの管理、式のウォッチができます。(デバッガについて詳しく学びます)

スタイルエディタ

スタイルエディタを接続すると、アプリで参照している CSS ファイルの閲覧や編集が可能になります。変更した箇所はアプリを更新する必要なしに、リアルタイムにアプリへ反映されます。(スタイルエディタについて詳しく学びます)

プロファイラ

アプリに接続したプロファイラツールを使用して、JavaScript コードで時間がかかっている箇所を見つけることができます。プロファイラはサンプルについて現在の JavaScript のコールスタックやコンパイル状況を周期的にサンプリングします。(プロファイラについて詳しく学びます)

ネットワークモニター

新たなネットワークモニターのおかげで、アプリが開始したすべてのネットワークリクエストのステータス、ヘッダ、コンテンツ、タイミングを、ユーザフレンドリーなインターフェイスで分析できます。(ネットワークモニターについて詳しく学びます)

レシート

課金アプリを開発している場合は、正当な (暗号により署名された) レシートでレシート検証コード (例えば、ユーザがアプリを購入済みであることや払い戻しの操作を行ったことを検証して、ユーザへの通知および状況に応じて機能のロックやロック解除を行う) のテストを行うべきです。

Simulator Dashboard で各アプリの項目にある "Receipts" メニューにより、"Valid"、"Invalid"、"Refunded" のテストレシートとともにアプリをインストールできます。テストしたいレシートの種類を選択すると、Dashboard が Marketplace のレシートサービスからその種類のテストレシートを取得して、Simulator でテストレシートとともにアプリを再インストールします:

デバイスへのプッシュ

Firefox OS デバイスを所有している場合は、デバイスを Simulator に接続でき、またアプリを Dashboard からデバイスへプッシュすることもできます。

デバイスを接続する

デバイスを接続するには、connecting a Firefox OS device to the desktop で案内している手順に従ってください。ADB は Simulator アドオンに組み込まれていますので、インストールする必要はありません。

アプリをデバイスにプッシュする

デバイスとデスクトップの設定を行って、デバイスを USB でデスクトップ PC に接続すると、"Device connected" というメッセージが Dashboard の左側に表示され、また各アプリのエントリに "Push" という名前のコマンドが新たに表示されます:

"Push" をクリックすると、アプリが Firefox OS デバイスにインストールされます。

Firefox OS デバイス接続の確認

デバイスを再起動するごとに、最初の "Push" 要求はデバイス側での確認が必要です:

Linux でのトラブルシューティング

udev ルールを作成した後にデバイスを接続できない場合は、こちらのバグをご覧ください。

Simulator の制限事項

Firefox OS Simulator は完全なシミュレーションではないことに注意してください。

ハードウェアの制限事項

スクリーンサイズを除き、Simulator はメモリ容量や CPU の速度といった、Firefox OS デバイスのハードウェアの制限事項をシミュレーションしません。

Audio/Video コーデック

ハードウェアアクセラレーションによるデコードに依存する以下のコーデックは、それゆえに未サポートです:

• MP3
• AAC
• H.264 (MP4)
• WebM

すなわち、これらのコーデックに依存する Youtube などの Web サイトやビデオ再生アプリのテストに Simulator を使用することはできません。

非対応の API

デバイスで動作する API には、Simulator で動作しないものがあるでしょう。これは一般的に、サポートするハードウェアがデスクトップ PC で使用できないためです。私たちは Geolocation のように一部の API のシミュレーションを実装しており、将来のリリースでさらに増やす予定です。ただし、現時点では以下の API をサポートしていません。これらを使用するとエラーが発生したり、誤った結果になる可能性があります:

• Telephony
• WebSMS
• WebBluetooth
• Ambient Light
• Proximity
• Network Information
• navigator.onLine および offline イベント
• Vibration

助けを得る

疑問点がある場合は、dev-developer-tools メーリングリスト や irc.mozilla.org の #devtools で質問してみてください。

 

詳細なログ取得を有効にする

about:config で設定 [email protected] を作成して値を整数値 0 に設定して、アドオンを無効化および再有効化してください。Simulator のオペレーションに関する付加的なメッセージがエラーコンソール (より新しいバージョンの Firefox ではブラウザコンソール) に表示されます。