読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

Firefox OSのアプリを作ってみました

こんにちは、張です。

モバイルOSというと、どうもAndroidiOSの話題で持ち切りになる気がしますが、最近その2大OSの牙城の一角を崩そうとする第3のOSの動きは注目を集めつつあります。今回第3のOSの一つと言われているFirefox OSのサンプルアプリを作ってみました。

Firefox OSのアプリの概要

開発方法

HTML5+CSS+Javascriptで開発します。普通のWeb開発とさほど変わりません。

分類

提供方式によって分ける場合:

  • ホスト型アプリ
    リソース(HTML、CSSJavascriptマニフェストなど)がWebサーバに置かれ、端末からHTTP(HTTPS)でアクセスして実行します。
  • パッケージ型アプリ
    リソースが一つのZIPファイルにまとめられて端末に配布され、端末上で実行します。

利用できるWeb APIによって分ける場合:

  • Webアプリ
    通常のWebアプリ。最低限のWeb APIしか利用できません。ホスト型でもパッケージ型でも可能です。
  • 特権アプリ
    信頼されたMarketplaceによってデジタン署名されたサードパーティーのアプリ。Webアプリで利用可能なAPIに加え、特権API(例えば連絡先関連)も利用できます。パッケージ型で提供されます。
  • 認定アプリ
    事業者やOEMによって認定されたシステムアプリ。ほとんどのWeb APIが利用できます。パッケージ型で提供されます(基本的にプレインストール)。

サンプル作成

今回サンプルとしてGoogleニュースリーダーを作成してみました。
サンプルはパッケージ型のWebアプリで、メニュー、記事一覧と記事詳細の3つの画面から構成されています。

作成手順

1. マニュフェストファイルmanifest.webappを作成

{
	"version": "1.0",
	"name":"RssReader",
	"description": "Firefox OS Test",
	"launch_path": "/default.html",
	"icons": {
		"128": "/resources/images/icon-128.png"
	},
	"developer": {
		"name": "ITI",
		"url": "www.iti.co.jp"
	},
	"default_locale": "ja"
}

2. 画面レイアウトと記事取得部分をHTML5+CSS+JavascriptjQuery Mobileで実装。詳細については省きますけど、ajaxを使ったWebアプリの作成方法とほぼ同じだと考えてもいいと思います(PhoneGapのイメージと似ているような気もします)。
手順1と2で作成した全ファイル:
f:id:IntelligentTechnology:20131008123249p:plain
3. 今回のサンプルアプリではクロスドメインの通信が発生します。その関連のエラーが発生しないように独自のWebサーバを経由して記事をダウンロードするようにします。
記事ダウンロード用の擬似コード:

<?php 

header("Access-Control-Allow-Origin: *");

$url = $_GET["url"];

echo file_get_contents($url);

4. アプリのインストール。手元に実機がないので、Firefox OS Simulatorを利用した手順になりますが、「Add Directory」→ 手順1で作成したマニフェストファイル選択→「開く」の順に実行すれば、手順1と手順2で作成したソースを自動的にパッケージされインストールされます。インストールに成功したら、アプリは自動的に起動されます。
f:id:IntelligentTechnology:20131008124613p:plain
5. 出来上がったアプリ
メニュー画面:

記事一覧画面:

記事詳細画面:

ソースコード

今回作成したサンプルのソースコードサンプルソースよりダウンロードできます。ただ実際に動かしたい場合以下の設定が必要です。

  • rssreaderproxyをPHPが使えるWebサーバに配置して、common.php内のMY_HOSTとHTTP_PROXYを環境に合わせて修正
  • rssreader/js/RssReader.jsの先頭にあるajax_proxyを環境に合わせて修正

※あくまでデモ用のソースで、セキュリティ上の配慮がまだ足りない可能性はあります。

感想

Firefox OSアプリは、HTML5CSSJavascriptで開発できるので、iOSAndroidアプリに比べたら、ハードルがかなり低いと思います。もしiOSAndroidのネイティブアプリに近い表現力とパフォーマンスが得られるとなると、Firefox OSがかなり強力なプラットフォームになるのではないかと個人的に感じています。