こんにちは、張です。
モバイルOSというと、どうもAndroidとiOSの話題で持ち切りになる気がしますが、最近その２大OSの牙城の一角を崩そうとする第３のOSの動きは注目を集めつつあります。今回第３のOSの一つと言われているFirefox OSのサンプルアプリを作ってみました。
Firefox OSのアプリの概要
開発方法
HTML5+CSS+Javascriptで開発します。普通のWeb開発とさほど変わりません。
分類
提供方式によって分ける場合：
- ホスト型アプリ
リソース（HTML、CSS、Javascript、マニフェストなど）がWebサーバに置かれ、端末からHTTP（HTTPS)でアクセスして実行します。 - パッケージ型アプリ
リソースが一つのZIPファイルにまとめられて端末に配布され、端末上で実行します。
利用できるWeb APIによって分ける場合：
サンプル作成
今回サンプルとしてGoogleニュースリーダーを作成してみました。
サンプルはパッケージ型のWebアプリで、メニュー、記事一覧と記事詳細の３つの画面から構成されています。
作成手順
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+JavascriptとjQuery Mobileで実装。詳細については省きますけど、ajaxを使ったWebアプリの作成方法とほぼ同じだと考えてもいいと思います(PhoneGapのイメージと似ているような気もします）。
手順１と２で作成した全ファイル：
3. 今回のサンプルアプリではクロスドメインの通信が発生します。その関連のエラーが発生しないように独自のWebサーバを経由して記事をダウンロードするようにします。
記事ダウンロード用の擬似コード:
<?php header("Access-Control-Allow-Origin: *"); $url = $_GET["url"]; echo file_get_contents($url);
4. アプリのインストール。手元に実機がないので、Firefox OS Simulatorを利用した手順になりますが、「Add Directory」→ 手順１で作成したマニフェストファイル選択→「開く」の順に実行すれば、手順１と手順２で作成したソースを自動的にパッケージされインストールされます。インストールに成功したら、アプリは自動的に起動されます。
5. 出来上がったアプリ
メニュー画面：
記事一覧画面：
記事詳細画面：
ソースコード
今回作成したサンプルのソースコードはサンプルソースよりダウンロードできます。ただ実際に動かしたい場合以下の設定が必要です。
- rssreaderproxyをPHPが使えるWebサーバに配置して、common.php内のMY_HOSTとHTTP_PROXYを環境に合わせて修正
- rssreader/js/RssReader.jsの先頭にあるajax_proxyを環境に合わせて修正
※あくまでデモ用のソースで、セキュリティ上の配慮がまだ足りない可能性はあります。
