FirefoxブラウザとWebの技術ですぐ作れる！ HTML5で手軽にFirefox OSアプリ開発

Firefox OS搭載スマホ「Fx0」でつくろう！ はじめてのFirefox OSアプリ開発 第1回

　Firefox OSはWebブラウザFirefoxの技術で開発されたオープンソースのスマートフォン、タブレット向けOSです。Firefox OSのアプリケーションはWebブラウザと同様JavaScript、CSSなどのHTML5関連技術をつかって開発することができます。本記事ではFirefox OSの基本的な構造を理解し、アプリの開発から、世界初（※1）のハイエンドなFirefox OS搭載スマートフォンである「Fx0」にインストールして動作させるまでを、Webブラウザ Firefoxのみを使って実施する方法を解説します。手軽なHTML5スマートフォンアプリ開発をFirefoxではじめてみましょう！

※1　Mozilla Corporation調べ、2014年12月現在

Firefox OSの特長

Firefox OSの構成

　Firefox OSはMozillaが開発したオープンソースのスマートフォン、タブレット向けOSです。HTML、JavaScript、CSSなどのHTML5関連技術を用いてアプリを開発できるのが大きな特長であり、比較的軽量なOSとして設計されているため、低リソースのデバイスでも軽快に動作することも特長のひとつです。

　Firefox OSの内部構造は主にGonk、Gecko、Gaiaという3つの層に分かれています。

　一番上のアプリケーション／ユーザーインターフェース層はGaia（ガイア）と呼ばれています。Gonk（ゴンク）はデバイスとのインターフェースとなっているLinuxで、真ん中のGecko（ゲッコー）はHTML5アプリケーションのランタイムです。

Firefox OSのアーキテクチャ
（Mozilla Developer Networkより引用、作者：Mozilla Contributors、ライセンス：CC BY-SA 2.5）

　アプリ開発者に大きく関係するのはGaiaの部分でしょう。Gaia層はFirefox OSの画面やアプリの集合体で、Firefox OSの中で一番目に見える部分、ユーザーが実際に操作するホーム画面やOSの設定、時計や電卓などアプリケーションの集合体です。ホーム画面を含むすべてのアプリケーションはHTML、JavaScript、CSSで開発されているので、Web技術者であれば新しいアプリを開発できるだけでなく、Gaiaそのものをカスタマイズすることもできます。

Firefox OSのアプリ開発

　Firefox OSのアプリ開発の魅力は、最新のWebブラウザで使えるHTML5のパワーが使えるというだけでなく、Webブラウザにはない様々なハードウェア制御系のAPIが使えるということでしょう。Firefox OSではスマートフォンのアラームやバイブレーション、プッシュ通知やBluetoothなどのAPIが提供されているので、Webページでは実現できない機能をもつアプリを開発することが出来ます。

　アプリを開発する環境は、WebブラウザのFirefoxさえあれば大丈夫です。アプリがHTML5なので、デバッグにはFirefox内蔵の開発ツールが使え、別途アドオンで提供されているFirefox OSシミュレータをインストールすれば、Firefox OS上でアプリの動作を確認することもできます。さらにFirefox 34からFirefox OSアプリ開発用のIDEである「WebIDE」が内蔵されました。

　WebIDEによって専用のエディタ、実機でのデバッグなどがサポートされるようになったので、Firefox OSアプリ開発環境の準備はWebブラウザFirefoxをインストールするだけ、と言えるようになりました。通常アプリ開発をはじめる前には様々なツールのインストールやセットアップが必要ですが、Webブラウザだけで全てまかなえるというのは便利ですね。

Firefox OSの開発環境「WebIDE」（1）

WebIDEとは

　WebIDEはFirefoxに新しく搭載された、Firefox OS用アプリを開発するための開発環境です。WebIDEを利用することで、Firefox OS用アプリを迅速に提供でき、デバッグやテストも効率よく行えます。

　JavaScriptやCSSのデバッグは、WebブラウザのFirefoxでも行うことができますが、WebIDEではテンプレートからのアプリ生成やシミュレータの管理、応答性の高いリモートデバッグなどの機能を提供しているので、Firefoxブラウザよりも効率よくFirefox OSアプリが開発できるというわけです。

　最初にWebIDEを起動したときには、インターフェースがシンプルすぎるので「ほんまにこれ使えるんかいな？」と思うかもしれませんが、実際ひととおり使ってみるとツボをおさえたなかなか使えるヤツだと感じるはずです。Firefox OSアプリ開発のキックスタートには、もってこいのツールです。ちなみに筆者はMacを使っているので、以下のスクリーンショットはOS Xの画面のものですが、Windowsでも同様の画面構成になります。

WebIDEの起動画面