FirefoxOS の アプリはWebアプリケーションで構成・開発することが出来ます。このページではFirefox OSスマートフォンでアプリを作るための開発環境の準備、サンプルアプリの開発・Flame実機を使ったデバッグ方法を解説します。

アプリケーションの作成

Web開発の経験があれば、簡単にFirefoxOS用のアプリを作成できます。

最低限必要なのは以下の3ファイルです。
・マニフェスト
・メインプログラム(html,css,jsなど)
・アイコンファイル

pipec-01

pipeC-02

pipeC-03

今回のサンプルアプリでは、indexファイルにカスケード・スクリプトファイルの両方を埋め込みました。
試作アプリにつき、内容・デザインはHello world に毛が生えた程度です。

 

開発環境の準備(ソフトウェアのインストール)

開発環境といっても、ウェブ開発に用いられる専用プログラム(Eclipsやxcodeなど)は不要です。開発自体はエディタ一つで用は足ります。

まずはFirefoxOSシミュレータのインストールをします(パソコンに予めFirefoxブラウザをインストールしておく必要があります)。

pipeA-01

MDN(モジラの開発者用サイト)へアクセスします。

pipeA-02

Simulatorをインストールをクリックします。

pipeA-03

必要に応じ、バージョンを選択してください。今回は、2.0を選択しました。

pipeA-04

ダウンロード中。

pipeA-05

注意事項が出てきます。信頼できると判断した場合は、【今すぐインストール】をクリックします。

pipeA-06

インストールが完了しました。

pipeA-07

アドオンマネージャを確認します(ツールバーのメニューアイコンからでも起動できます)。

pipeA-08

アプリマネージャを起動します。アドレスに、about:app-managerと入力しても起動できます。

pipeA-09

サンプル用アプリケーションを追加します。
赤マルの+をクリックし、アプリ(マニフェスト)が保存されているルートディレクトリを選択します。

pipeA-10

アプリが追加されました。

pipeA-11

シミュレータを起動ボタンをクリックします。

pipeA-12

先程インストールした、シミュレータのバージョンのボタンをクリックします。

pipeA-13

シミュレーターが起動しました。といっても、ブラウザからポップアップでウインドウが開くだけです。

pipeA-14

他のスマートフォンでもおなじみのロック画面が再現されています。

pipeA-15

起動直後の画面です。

pipeA-16

アプリマネージャに戻り、開発したアプリのデバッグを開始します。

pipeA-17

アプリがシミュレータに転送され、起動します。

pipeA-18

作ったゲームは簡単。足し算の答えを答える。以上!

pipeA-19

プルダウンボックスもピッカーデザインを意識せず、シンプルにSelectタグを書くだけにとどめています。

pipeA-20

デリゲートやリスナーなど複雑な物は何もありません。

pipeA-21

今回は、すべてJavascriptで動いています。

pipeA-22

アプリ仕様書作成5分。コーディング10分の作品。

Firefox OS実機(Flame)を用いたデバッグ方法

参考記事:Flame実機レビュー:WindowsパソコンとFirefoxOS端末を接続する方法

pipeB-01

参考記事でも紹介しているよう、ドライバを前もってインストールしておきます。

pipeB-02

ドライバー配布ページよりダウンロードを行います。

pipeB-03

ダウンロードしたファイルを展開し、フォルダに含まれているDriverInstaller.exeを実行します。

pipeB-04

マネージャーが起動しますので、【Install】(インストール)をクリックします。

pipeB-05

開始されます。インストールは数分かかります。終了時にアラートがあがらず自動で閉じられます。

pipeB-06

Flameを接続するとドライバ類のインストールが開始されます。

pipeB-07

pipeB-08

pipeB-09

pipeB-11

すべて、正常にインストールされていることを確認します。

pipeB-12

続いて、ADB Helper Add-onをインストールします。

pipeB-13

利用している端末に合ったディレクトリを選択します。

pipeB-14

今回は、latest(最新バージョン)を利用しました。

pipeB-15

ブラウザの設定によっては、上記のような許可選択画面が出てきます。
問題ないと判断した場合は、許可をクリックします。

pipeB-16

ダウンロード中。

pipeB-17

信頼できる場合は、【今すぐインストール】をクリックします。

pipeB-18

インストールが完了しました。

pipeB-19

アドオンマネージャで確認します。

pipeB-20

正常に端末を認識していれば、接続先に端末が表示されます。

pipeB-21

アプリマネージャから、端末が認識されている状態です。

pipeB-22

アプリを転送すれば、起動が確認できます。

pipeB-23

これで、実機でのデバッグが可能です。

といっても、スクリプトや表示のデバッグは普通にFirebugなどを使った方が早いと思います。ちゃんとしたアプリを作るには、実機での検証は必須ですね。

Firefox OSリファレンス端末「Flame」は8月23日現在売り切れていますが、「Yahooショッピング OSSストア Flame(Firefox OS開発者向けリファレンス端末)」ページにてこれまでに2度販売されています。今後の入荷予定は不明ですが、在庫が復活すればOSSストアで購入が出来るようになります。アプリ開発にいち早くチャレンジしたい方は手に入れておく価値があります。