[Firefox OS アプリ開発] Web 技術者なら誰でも超簡単に開発できる！まずは使ってみよう

#Firefox

諏訪悠紀

2013.03.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Firefox OS とは

Firefox OS とは、みなさんご存知 Firefox の開発元である Mozilla 製のモバイルプラットフォームです。ソニーモバイルや LG といったメーカーが搭載スマホの発売が発表されたりと、業界大注目となっています。ちなみにアプリは HTML/CSS/JavaScript で組み立てるので、Web 技術者であれば誰でも容易に開発が始められます！
ということで、流行を先取りすべく、とっても気になっていた Firefox OS アプリ開発を始めてみました。そのメモをつらつらと書いていきたいと思います。

開発環境を構築する

Firefox OS Simulator をインストールする

Firefox OS Simulator のインストールはとっても簡単。Firefox にアドオンをインストールするだけです！

Firefox OS Simulator | Add-ons for Firefox

アドオンのインストールが完了すると Dashboard が表示されます。左側の Simulator のトグルボタンを押すと Firefox OS Simulator が立ち上がります！

アプリ開発はテキストエディタで

アプリは HTML/CSS/Javascript がコーディングできるエディタであれば何でもOKです。筆者は Sublime Text 2 でやります。

Firefox OS アプリ開発の基礎知識

まずは Firefox OS アプリ開発の基礎知識を学んでいきましょう、ざっくりと。

アプリの種類

ホスト型アプリ

すべてのリソースを Web サーバ上にホスティングする形式のアプリです。いわゆる通常の Web アプリです。Open Web Apps とも呼ばれます。作成したアプリは好きな Web ページからインストールさせることができます。

パッケージ型アプリ

すべてのリソースを Zip にひとまとめにして配布する形式のアプリです。Firefox Marketplace (GooglePlay や AppStore のようなアプリストア) にアプリを公開するにはこの形式のアプリで作る必要があります。ストアではアプリを審査し、問題がなければデジタル署名が行わて公開されるので、保証があるアプリとしてユーザに提供できます。

Manifest ファイル

Manifest ファイルとはアプリの詳細情報を設定するファイルのことです。Web アプリと Firefox OS アプリとの決定的な違いは Manifest ファイルの有無です。逆に言うと Manifest ファイルさえあればどんな Web アプリでもすぐに Firefox OS アプリにすることができるということです。基本的には。手軽ですね！

Firefox OS アプリの作りかた

ということで Firefox OS アプリを作ってみたいと思います！

1. HTML/CSS/JavaScript でコーディングする

まずはアプリの処理をコーディングします。普通の Web アプリと何ら変わりはありません。今回は Battery API を使ってバッテリーの残量を表示するサンプルを作りました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SampleApp</title>
    <link rel="stylesheet" type='text/css' href="/css/app.css">
    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Tauri'>
    <script type="text/javascript" src="/js/lib/zepto.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>
  <body>
    <h2 id="toc-hello-firefox-os">Hello, Firefox OS !!</h2>
    <div>
      <h3>Battery Status</h3>
      <p>level: <span id="battery-level"></span></p>
    </div>
  </body>
<html>

/css/app.css

body {
	font-family: 'Tauri', sans-serif;
	color: #333333;
	background-color: #eeeeee;
}

/js/app.js

$(function(){
  // Battery API
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
  $('#battery-level').text(battery.level * 100 + '%');
});

2. Manifest ファイルを作成する

次に manifest.webapp ファイルを JSON 形式で作成します。以下のような感じです。

manifest.webapp

{
  "version": "0.1",
  "name": "SampleApp",
  "description": "サンプルアプリです。",
  "launch_path": "/index.html",
  "icons": {
    "16": "/img/icons/app_16.png",
    "48": "/img/icons/app_48.png",
    "128": "/img/icons/app_128.png"
  },
  "developer": {
    "name": "Classmethod",
    "url": "http://classmethod.jp"
  },
  "default_locale": "ja"
}

launch_path で指定したファイルがはじめに読み込まれるファイルになります。

3. Firefox OS Simulator で動作を確認する

動作を確認するには Firefox OS Simulator の Dashboard にアプリを追加します。

追加すると自動で Simulator でアプリが起動します！

まとめ

HTML/CSS/Javascript でモバイル向けのアプリ開発はいままでもいろいろありましたが、どうもアプリがもっさり動作したりパフォーマンスが悪かった覚えがあります。Firefox OS は Web ベースなので、その点に関してはとても期待できそうですね。とにかくまずは実機を触ってみたいですね〜。
ということで今回はほんの触りだけ試してみました。基本的にはすごーーーーく簡単なことがお分かりいただけたかなと思います。もっと詳しく知りたいかたは公式リファレンスが割と充実しているので、ぜひ参考にしていきましょう。これからもいろいろ試しながら紹介していきます！