土曜日に「あまちゃん」を見るのが楽しみな大熊猫です。
ちなみにBSで一週間分みてますｗ
ここ最近、当番の頻度が高くなってきてストックしていたBLOGのネタが無くなったので
今回はFirefox OSのアプリ開発に挑戦してみました。
※アプリ開発に挑戦と書きましたが、環境構築からアプリ化までの一連の流れになります。
Firefox OSについて
Firefox OSとはMozilla製のモバイルデバイス向けのプラットフォームです。
このFirefox OS搭載のスマートフォンが今年の7月より欧州や南米から商用展開される予定という事で最近俄かに盛り上がりを見せています。
日本でもKDDIがの導入を検討しているそうです。
と言うわけで今回はFirefox OSのアプリ開発の導入部分に挑戦してみようと思います。
開発環境
Firefox OSのアプリ開発にはテキストエディターとFirefox（ブラウザ）があれば大丈夫です。
Firefox OSとiOSやAndroid向けのアプリ開発との大きな違いがこの部分になります。
確認環境
基本的な確認はFirefoxがあればできますが、今回はFirefoxのAdd onにシュミレーター(Firefox OS Simulator)がありますのでこちらを利用します。
利用出来るAPIなどについて
既存のAPIの利用が可能
Firefox OSのアプリ開発は基本的にはWebサイトやWebアプリの開発となんら変わりありません。Canvas（グラフィックの描画）やGeolocation(位置情報)などを含む、馴染みのあるAPIは利用が可能です。
簡単に言えばFireFoxで動作が確認出来るものは現時点でも利用できます。
WebAPI
Web APIはMozillaが中心となり策定を進めているもので、OSに依存ぜず全てのwebブラウザで動作を一貫するAPIを提供し端末やブラウザ間の溝を埋める事を目的として活動しているようです。
標準化に向けてはW3Cにも提出予定を予定しているようです。
WebAPIについては以下の参考サイトをご覧下さい。
参考
WebAPI – MozillaWiki
※現在はFirefoxでしか動かないものが多数を占めています。
デモ（かなり簡単な・・・）
今回利用したAPIはBattery Status APIです。
デモはこちら
Firefox以外では正しく表示されません！！
残念ながらデモ機が手元に無い為、PC上で確認が出きるAPIのみを利用しました。Alarm APIとか面白そうなんですけどね。
そして何の工夫も捻りもないデモで、すみません。m(_ _)m
このデモはデバイスのバッテリーの状況をBattery Status APIを利用し習得したものを
数値化し表示しています。
バッテリーの状態を習得している部分はこんな感じです。
$(function(){
// Battery API
$('#batteryLevel').text(navigator.battery.level * 100 + '%');
});
このAPIは先ほどの一覧を見た方はすでにお分かりの通り、モバイルデバイスに特化したものでは無く
内臓バッテリーの状況を返します。
今回のサンプルはデスクトップマシーンのFirefoxでも確認ができますが
デスクトップマシーンでは常に100%になっているかと思います。
ノートやタブレットなどでFirefoxから確認するとバッテリーの残量が％（パーセント）で
表示されているはずです。
アプリ化する
簡単なサンプルではありますが、こちらをアプリ化してみましょう。
Firefo OSのアプリには以下の二つの形式が存在します。
ホスト型アプリ
サーバー上に全てのデータを公開する形、つまり通常のWebアプリになります。
利点としてはWebアプリのように開発者ｆが自由に更新を行う事が出来る点です。
パッケージ型アプリ
Firefox Marketplace(AndroidやiOSのAppStore のようなアプリストア)に公開する形式です。
Firefox Marketplaceでは他のアプリストアと同様に審査が行われた後の公開となります。
審査が行われる事により、保障されたアプリとして提供されます。
この二つの最大違いはManifestファイルの有無になります。
Manifestファイルとはアプリの情報を設定するファイルのことで
前者は必要がありませんが、後者は必須となります。
シュミレーターでパッケージ型アプリとして確認
「パッケージ型アプリ」としてSimulatorで確認するために「Manifest」を作成します。
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": "",
"url": "http://met.hanatoweb.jp/"
},
"default_locale": "ja"
}
動作確認
Firefox OS Simulator の Dashboard にアプリを追加します。
Simulator上でアプリが起動します。
余談ですがデバイス上（スマートフォンなど）に表示されるアイコンなどは、画像を用意し「Manifestファイル」に指定すれば表示されます
またホスト型アプリとしして確認する場合は、Simulator上のブラウザを起動し
公開先にURLにアクセスすればOKです。
まとめ
今回はFirefox OS向けのアプリ開発の一連の流れを簡単にやってみました。
すごく簡単に出来たので、普及に期待したいところなんですが、iOSやAndroidが市場を独占している現時点ではFirefox OSのスマートデバイス（電話やタブレット）が主流になるのはまず考えにくいのが現実かと思われます。
しかし、一方ではWebOS、TizenなどのFirefox OSと同じく、Web技術（HTML+CSS+JavaScript）をアプリ開発のプラットフォームとして採用しているOSの登場もあり、近い将来はモバイルプラットフォームの情勢は変わるかもしれません。
その部分に期待したいところです。
でも近い将来すら待てないお子様なので（？）まずは低価格のタブレットなどに搭載していただき、遊ばしてもらいたいのが私の本音ですｗ