イマドキのIDE事情 第17回スマートフォン向けの新OS!Firefox OSアプリを作ってみよう
skill

イマドキのIDE事情 第17回
スマートフォン向けの新OS!
Firefox OSアプリを作ってみよう

2014.12.18

ent83_img01.jpg

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

ent83_img02.jpg
Firefox OSのWebサイト

■ Firefox OSの開発環境

Firefox上で動作するアドオンとしてFirefox OSエミュレータが提供されているので、これを使用してFirefox OS向けのアプリ開発を体験してみよう。Firefox OS SimulatorアドオンはこちらのURLからインストールすることができる。ただし、このエミュレータはFirefox OS 1.1までしか対応していない。Firefox OS 1.2以降はアプリマネージャWebIDEというツールに置き換えられているのでそちらを利用してほしい。

ent83_img03.jpg
Firefox OS Simulatorアドオンのインストール

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

ent83_img04.jpg
Firefox OS Simulatorのダッシュボード

ent83_img05.jpg
シミュレータを起動したところ

それでは実際に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」ボタンをクリックするとアプリケーションが起動する。

ent83_img06.jpg
サンプルアプリを実行したところ

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

■ Firefox OSに未来はあるか?

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

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

原稿:竹添直樹
株式会社ビズリーチ所属。Scalaを愛するJVM系プログラマ。業務の傍らOSS開発や執筆活動を行っている。
https://twitter.com/takezoen

※本記事は2013年2月25日にマイナビニュースに掲載された記事を基に、一部加筆修正しています。

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW