Firefox OSアプリの開発〜公開までを試してみる

FirefoxOS

みなさん、第３のOSと呼ばれるOSをご存知でしょうか。

iOS・Androidの次と呼ばれるOSは、実は複数あり「Firefox OS」、「Ubuntu」、「Tizen」などが上げられます。

本記事では、これらの中の「Firefox OS」に焦点を当て、アプリの開発からマーケットに公開するまでを解説します。

開発準備（シミュレータのインストール）

まず、シミュレータのインストールは、FireFoxブラウザから行います。

シミュレータでの動作確認であれば、実機を用意する必要はありません。

・Firefoxを起動し、「ツール」＞「Web開発」＞「WebIDE」を選択

・WebIDE起動後、「ランタイムを選択」＞「シミュレータをインストール」を選択

・OSのバージョンを選択し、シミュレータをインストール

以上でシミュレータのインストールは完了です。

開発準備（シミュレータのインストール）

今回作成するアプリは、テンプレートで用意されている「Hello World」に手を加えて作成します。まず初めに、「HelloWorld」プロジェクトを作成します。

・WebIDEを起動し、「アプリを開く」＞「新規アプリ」を選択

・テンプレートの「HelloWorld」を選択し、プロジェクト名を入力

・プロジェクトの保存先を選択

以上でプロジェクトが作成されます。

・プロジェクト作成後、インストール済みのシミュレータを起動

・シミュエータ起動後「インストールして実行（▶ボタン）」を選択すると、アプリが起動

Hello Worldアプリは、以下のように構成されています。

HelloWorld

icons /

app.js

index.html

manifest.webapp

manifest.webappはFirefox OSアプリとしての各設定が記述されており、

WebIDEでmanifest.webappを選択すると、内容の確認と編集できます。

上記の設定ではアプリ起動時にindex.htmlが表示されます。

次に、index.htmlを確認します。

HTMLの内容を変更するとアプリ起動時の画面に反映されます。試しに、borderの色をblackからredに変更後、アプリを再起動させます。

枠の色が、黒から赤に変更されました。

このように、Firefox OSアプリはHTMLやJavaScript/CSSを編集し、アプリを作成していきます。Webアプリの開発経験があれば、新しい知識を身につけることなくアプリを開発することができます。

実機での動作確認

シミュレータで動作確認を実施することは可能ですが、実際にアプリをリリースするとなると、やはり最低１台は実機が欲しいところです。

開発者向け端末「Flame」、もしくは2014年末にauから発売された「Fx0」を購入するのが一番簡単に実機で動作確認ができる方法です。

しかし、「Flame」の発売は終了しているため新品を取得することは難しく、「Fx0」は回線契約が必要となるため、手が出しにくいのが現状です。

そこで、今回アプリの実機検証を行うために、上記の２機種ではなく海外で発売されているFirefox Phoneを使用することにしました。「ZTE OPEN C 」という機種ですが、アメリカやヨーロッパで発売されています。（eBayで米ドル $99.99で購入することが可能です）

実機で作成したアプリを動作させるのにも、WebIDEを使用します。WebIEDを起動した状態で、Firefox PhoneをUSBで接続すると、シミュレータではなく、実機を選択できるようになります。

アプリ企画

今回の目標は、アプリをマーケットに無事リリースさせることです。そのため、作成するアプリには以下の制限を設けました。

・ネットワーク通信は使用しない。

・端末のデータにはアクセスしない。

理由ですが、通信や端末へのアクセスを行わないことで、安全なアプリとして審査に通る可能性が高いと考えたからです。

開発開始

今回は日々の体重を記録するアプリを作成します。機能は体重の入力、体重の一覧を表示するだけのシンプルなものです。

では、先ほど作成したHelloWorldをもとに、アプリを作成していきます。

１.画面の準備

入力画面と一覧画面の２画面が必要なため、HTMLを２つ作成します。

<body>
  <div id="day_location">
    <p id="day">0</p>
  </div>
  <div id="display_location">
    <p id="display">0</p>
    <p id="kg">kg</p>
  </div>
  <div id="num_button">
    <a onclick="plus('7');">7</a>
    <a onclick="plus('8');">8</a>
    <a onclick="plus('9');">9</a>
    <a onclick="plus('4');">4</a>
    <a onclick="plus('5');">5</a>
    <a onclick="plus('6');">6</a>
    <a onclick="plus('1');">1</a>
    <a onclick="plus('2');">2</a>
    <a onclick="plus('3');">3</a>
    <a onclick="plus('C');">C</a>
    <a onclick="plus('0');">0</a>
    <a onclick="plus('.');">.</a>
  </div>
  <a class="button1" id="add">登録</a>
</body>

<body>

</div>

</div>

</div>

</body>

上記の画面にCSSを追加し、入力画面っぽくしてみました。

一覧画面も、入力画面と同様にHTMLとCSSで作成します。

入力したデータの保存は、ローカルストレージに保存します。

/**
 * 追加ボタン押下時処理
 * 一覧画面に遷移
 */
$("#add").click(function() {
  var inputNum = $("#display").text();
  // ストレージに登録
  addStrage(getToday(), inputNum);
  // 画面遷移
  window.location.href = "list.html";
});
/**
 * ローカルストレージに体重を登録します
 * day:本日日付（yyyy/MM/dd）
 * weight:体重
 */
function addStrage(day,weight) {
  localStorage.setItem(day,weight);
}