Firefox OSアプリを作ってみよう（3）
アプリをカスタマイズする
WebIDEの基本的な使い方はこれでざっとひと通り解説しました。
さてここからは作成したPrivileged Appのソースコードに踏み込んでみましょう。WebIDEが生成するPrivileged Appのコードには、なかなか興味深い技術が使われています。先ほど生成したhello_fxos_appのコードを覗いてカスタマイズすることで、最新のHTML5 Open Web Appsの面白さを体験してみます。Open Web Appsとは、既存のWeb標準とオープンなテクノロジーを活用して、Firefox OS を含む様々な環境で動作し、リッチな体験ができるアプリのことです。
hello_fxos_appを閉じてしまった方は、画面上部右上のドロップダウンメニューから［パッケージ型アプリを開く］をクリックしてhello_fxos_appディレクトリを選択し［開く］をクリックしてください。
WebIDE画面左側のディレクトリツリーから、js/app.jsを開きます。app.jsの65行目あたりに以下のコードを見つけられるでしょう。
request = new XMLHttpRequest({ mozSystem: true });
XHR（XMLHttpRequest）オブジェクトを生成する典型的なソースコードですが、"mozSystem: true"というオプションがついていますね。これは、System XHRといってXHRでクロスオリジンリクエストを可能にするオプションです（詳しくはこちらを参考にしてください）。
hello_fxos_appは、MDNをキーワード検索するサンプルアプリでした。キーワード検索を実現する処理としては、テキストフォームに入力されたキーワードをMDNのAPIにXHRで問い合わせ、結果をJSON形式で受け取って表示しています。このJavaScriptプログラムはFirefox OS上では動きますが、同じプログラムをWebブラウザ用に書きなおしたとしてもWebブラウザでは動きません。Webブラウザで動作しない理由は、同一生成元ポリシーによりリクエストがブロックされるからです。
同一生成元ポリシーとは、Webブラウザ上でXSSなどのJavaScriptによる不正な攻撃を防止するために定められたルールで、同一のオリジン（プロトコル、ポート、ホストの組み合わせ）以外からJavaScriptでのデータリクエストがあった場合、これをブロックします。JavaScriptが動作する多くのWebブラウザでは、デフォルトで有効なため、XHRでMDNにリクエストを送ったとしても、結果のJSONデータを取得することはできません。
Firefox OSのアプリでも同一生成元ポリシーは適用されます。しかし、通常のWebアプリとはすこし事情が異なります。Forefox OSアプリでの特権（Privileged）タイプはアプリストアでのコードレビューやそれに相当する審査を経なければ公開することができません。このようなアプリの安全性を保証するプロセスを経る必要がある代わりに、信頼されたアプリだけが使えるAPIを利用することができます。
Firefox OSのSystem XHRは、アプリタイプPrivilegedでパーミッションを追加することで利用できます。つまりSystem XHRを使ったアプリを公開するためには、アプリストアの審査を受けてストアの認証を受ける必要があるので、野良アプリでほいほい使って悪用することはできないというわけですね。
System XHRの使い方は、前述のようにXHRオブジェクト生成時に"mozSystem: true"オプションを追加するだけです。もうひとつ、System XHRを有効にするためにmanifest.webappファイル内でSystem XHRパーミッションを追加します。
"permissions": {
"systemXHR":{}
}
WebIDEが生成するPrivileged Appの、manifest.webappにはすでに追加されていますが、イチから書くときは忘れないように注意が必要です。パーミッションを追加するまでは機能が正しく動作しません。
System XHRを使うと、異なるドメインにあるデータも同じドメインにあるデータと同じように取得できるので、使いどころは多いです。例えば、行政機関が公開しているオープンデータを取得して、アプリで利用するということにも使えます。行政が公開しているオープンデータはcsvなどのテキストデータで提供されているので、JavaScriptでデータを加工して表をつくったり、グラフを生成したりしても面白そうですね。
筆者は試しに大阪市のオープンデータを利用するFirefox OSアプリをつくってみました。GitHubでソースコードを公開しています。
このサンプルアプリはWebIDEのPrivireged Appテンプレートをカスタマイズして作成しています。大阪市の施設情報ポイントデータCSVファイルをXHRで読み込み表を作成します。CSVのパースにはjQuery CSVを使用しています。
WebIDEのテンプレートには、他にもアプリの国際化など興味深いコードが盛り込まれていて、いろいろと勉強になることが多いです。他にもパーミッションを追加して、BluetoothやローカルファイルシステムなどのAPIを駆使したアプリを作成することもできます。WebIDEのテンプレートを参考にしながらFirefox OSアプリ開発の感覚をつかんでいくのがよいでしょう。
Fx0をさわってみた
最後に、今回実機デバッグで使った「Fx0」をさわってみた感想を少しばかり。筆者はauのFx0端末発表会で先行して実機をさわらせていただきましたが、今回開発者メニュー関係を含めてしっかり使ってみる機会に恵まれました。
まず一言でいうと「ふつうのスマートフォンとして使える高い完成度」だと感じました。
端末発表会では「ギーク向け セカンド端末」とアピールされていたので、一般的なスマートフォンに比べて安定性などはそれほど考慮されていないのかと思っていました。
しかし、Fx0は非常に安定して軽快に動作します。たくさんのアプリを起動してプロセスを切り替えてみましたが、OSやアプリの動作が遅くなることはありませんでしたし、画面のスクロールも非常に滑らかです。このあたりは一般ユーザーにも好評なところだと言えます。軽快な動作で直感的に操作できるカジュアルなスマートフォンという位置づけもいいのではないでしょうか。
シースルーの筐体とこだわりのホームボタンもかっこいいです。個人的には背面カバーをはずしたときの内部デザインが好きです。バッテリーパックの下あたりで、基盤をチラみせしているところがにくいですね（笑）。
アプリマーケットにはけっこうな数のアプリが登録されていますが、iOSやAndroidと比べるとやはり少数であることは否めません。ここはアプリ開発者によって多くのアプリが開発されることが求められます。世界初のハイエンドなFirefox OS搭載スマートフォンである「Fx0」がギークにアプローチしているというのも、たくさんのギークにアプリを開発してもらいたいというメッセージなのでしょう。
筆者は以前からFlame、KeonといったFirefox OSの開発者向け端末を持っていますが、それらとは段違いの安定性だと感じました。さらにSIMが実際に挿入されていて4G LTEで通信できているというのもなんだか感動的です。すでに開発者向け端末をお持ちの方も、ぜひ「Fx0」を体験してみることをおすすめします。
最後に
Firefox OSについて概要からアプリ開発、実機Fx0までざっとご紹介いたしましたが、いかがだったでしょうか？ Firefox OSはオープンソースの軽量なモバイルデバイス向けOSであり、HTML5でアプリを開発できます。アプリ開発に必要なのはWebブラウザ Firefoxだけあれば可能という手軽さが特長です。
Firefox OSでは、デバイスAPIなどWebブラウザには実装されていない様々なHTML5に関係する先駆的機能をつかって、アプリを開発することができます。Firefox OSでのアプリ開発を経験することで、Web技術者はよりHTML5についての理解を深めることができるでしょう。
みなさんもFirefox OSアプリ開発を通じて一歩進んだHTML5アプリ開発の世界をのぞいてみてください！
下記サイトにて、KDDIが開催を予定しているFirefox OSに関連するイベントや、最新のHTML5技術、Webプラットフォームを用いた新たな楽しみ方についての情報を発信しています。
「Fx0」の取扱い店舗についても下記サイトからご覧いただけます。
