Firefox OSとは?

Firefox OSは、Mozilla Foundationで開発されているスマートフォン向けの新OSだ。iOSやAndroidなど既存のスマートフォン向けOSと異なり、Web技術をネイティブサポートしているという点が大きな特徴だ。iOSやAndroid向けのアプリは、基本的にObjective-CやJavaで記述する必要があるが、Firefox OSの場合にはHTML5、CSS3、JavaScriptといったWeb技術を用いて開発したものがネイティブに実行されるのだ。

図1 : Firefox OSのWebサイト

今回はこのFirefox OS向けアプリの開発方法について取り上げてみたい。

Firefox OSの開発環境

Firefox上で動作するアドオンとしてFirefox OSエミュレータが提供されているので、これを使用してFirefox OS向けのアプリ開発を体験してみよう。Firefox OS SimulatorアドオンはこちらのURLからインストールすることができる。

図2 : Firefox OS Simulatorアドオンのインストール

Firefox OS Simulatorをインストールすると以下のようなダッシュボードが表示され、左側のスイッチを「Stopped」から「Running」に切り替えることでシミュレータが起動する。

図3 : Firefox OS Simulatorのダッシュボード

図4 : シミュレータを起動したところ

それでは実際にFirefox OSアプリを作成してみよう。サンプルアプリケーションとして、以下のようなHTMLを用意した。これはHTML5のローカルストレージを使用してテキストフィールドに入力した内容の保存・取得を行う簡単なアプリケーションだ。もちろんjQueryなどの外部ライブラリも問題なく使用することができ、Ajaxを使用してサーバと通信を行うことも可能だ。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <title>サンプルアプリ</title>
  </head>
  <body>
    <h1>サンプルアプリ</h1>
    <input id="message" type="text"/>
    <input id="set" type="button" value="設定" />
    <input id="get" type="button" value="取得" />
    <script type="text/javascript">
    $(function(){
      $('#set').click(function(){
        // 入力した内容をローカルストレージに保存
        window.localStorage.setItem('value', $('#message').val());
      });

      $('#get').click(function(){
        // ローカルストレージから値を取得して表示
        alert(window.localStorage.getItem('value'));
      });
    });
    </script>
  </body>
</html>

Firefox OS用のアプリには、この他に「.webapp」という拡張子を持つマニフェストファイルが必要になる。ここではHTMLファイルと同じ場所に以下の内容でmanifest.webappというファイルを作成した。

{
  "name":"Sample App",
  "description": "Hello, Firefox OS",
  "launch_path": "/index.html",
  "icons": {
    "128": "/icon.png"
  }, 
  "developer": {
    "name": "Naoki Takezoe",
    "url": "http://d.hatena.ne.jp/takezoe/"
  },
  "default_locale": "ja"
}

Firefox OS Simulatorのダッシュボードから「Add Directory」ボタンをクリックし、このファイルを追加するとシミュレータにアプリケーションをインストールすることができる。ダッシュボードから「Run」ボタンをクリックするとアプリケーションが起動する。

図5・図6 : サンプルアプリを実行したところ

このようにFirefox OSでは既存のWeb技術を使用してネイティブアプリケーションを開発することができる。開発ツールやライブラリなども使い慣れたものを使用でき、通常のWeb開発と違いブラウザ毎の挙動の差異などを気にする必要もない。Web開発者にとっては非常に取っつきやすいプラットフォームといえるだろう。

Firefox OSに未来はあるか?

スマートフォン向けのOSは現時点ではiOSとAndroidが支配的で、ここにFirefox OSが割って入ることができるかどうかは未知数だ。しかし、Web技術をモバイル向けOSの中心に置くというコンセプトはChrome OSなどにも通じるものがあり、決してFirefox OSがはじめてというわけではない。Firefox OSの成否は、まずはいかに多くのデベロッパを取り込めるかにかかっているのではないだろうか。

iOSやAndroidでもJavaScriptでアプリを開発するためのツールは存在するが、問題はその実行速度だ。HTMLやCSS、JavaScriptといったWeb技術を用いて開発されたアプリケーションが、実際にFirefox OSを搭載した端末上でiOSやAndroidのネイティブアプリと同等の速度で動作するのであれば、既存のWeb開発者にとっては魅力的なプラットフォームといえる。また、普段はプログラミングをしないようなカジュアルなユーザにとってもアプリ開発が身近なものになるのは間違いない。

国内ではすでにKDDIがFirefox OS搭載のスマートフォンを今後1～2年の間に発売する方向で検討を進めているとのことだ。実機の登場を待ちたい。