Apps
todo: 過去のメモ とか最近試した結果をまとめる形でFirefox OS のアプリ開発手順を書く。
基本的に Web技術 のみを使ってアプリを作成することができる。
Web ブラウザがアプリとやりとりするのに必要な情報として、マニフェストファイルが必要となります。
これは最低限のもの。文字コードは UTF-8 without BOM を推奨。
{
"name": "My App",
"description": "My elevator pitch goes here",
"launch_path": "/",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Your name or organization",
"url": "http://your-homepage-here.org"
},
"default_locale": "en"
}
MDN のアプリマニフェストにマニフェストファイルの項目が他にも載っています。
"launch_path" や "icons" はルート相対パス： /index.html のようにスラッシュから始める形にしてください。
CSS や JavaScript の参照 <link ～>、<script ～> は相対パスで書くのをオススメ。
JavaScript は jQuery などのライブラリのファイルを入れることも可能。
mozilla-b2g / gaia を git clone か zip でダウンロード。
この中の Shared ディレクトリを使用します。
Building Blocks に CSS Link と HTML Code があるので、それぞれを自分のアプリのコードに追加します。 ダウンロードした Shared ディレクトリから必要な(関連する) CSS ファイルとディレクトリを自分のアプリのディレクトリにコピーします。
WebAPI で確認することが可能。ものによってはデスクトップ版でも使用可能。
Simulator Dashboard - Firefox OS resource://r2d2b2g-at-mozilla-dot-org/r2d2b2g/data/content/index.html でアプリの追加や更新を行う。詳しくはこちら
シミュレータを起動する前に Dashboard の Console にチェックを入れると、シミュレータを一緒にコンソール画面も表示されます。
実際にインストールするためには navigator.mozApps.install("http://path.to/my/example.webapp"); で
アプリをインストールします。
adb logcat でデバッグログを見ることが可能。
Get the Android SDK より Android SDK をダウンロードし、解凍。
Windows の場合、C ドライブのルートディレクトリに 置くのがよいかと。環境変数に C:\android-sdk\sdk\platform-tools を追加して、コマンドプロンプトで adb を実行すると、コマンド一覧が出力されます。
使用法は以下の通り、
adb logcat
adb logcat | grep GeckoConsole
See also アプリを公開する
シミュレータのトラブルシューティング もご覧ください。
B2G のエンジンは起動できているがホーム画面を正しく読み込みできない場合に黒画面の右下に mozilla のワードマークが表示されている状態で停止します。
エラーログに manifest is null というエラーが resource://gre/modules/Webapps.jsm や app://system.gaiamobile.org/shared/js/manifest_helper.js で出力されている場合、｀DOMApplicationRegistry: Could not parse JSON: ... /manifest.webapps ...` というエラーが resource://gre/modules/Webapps.jsm で出力されている場合などは、インストールされているアプリの manifest.webapp ファイルに何らかの問題があります。manifest ファイルが UTF-8 で書かれており、JSON 構文が間違っていないか (キー名を引用符でくくっているか、カンマを忘れていないかなど) 確認してください。
シミュレータでは問題となる manifest.webapp ファイルを持つアプリを削除しても (Undo できるようファイルが残っているため)、シミュレータをインストールしている Firefox を再起動するまでこの問題は解決しません。
シュミレータで Add Directory してテストする場合など、Packaged App として開発している場合には CSP がデフォルトオンになっています。CSP のデフォルトでは HTML ページの <script> タグ中に直接書いたインラインスクリプトは禁止されているため動作しません。独立した js ファイルに分離するか、アプリの CSP 設定を変更してください。
シュミレータで Add Directory してテストする場合など、Packaged App として開発している場合には CSP がデフォルトオンになっています。CSP がオンになっている場合に eval() (や Function コンストラクタ、setTimeout(), setInterval() など) にコードを文字列として与えることは禁止されています。許可するための方法はありません。eval() を使う場合は Web サイトから読み込む Hosted Apps として開発する必要があります。