2013/09/17

新OSでアプリを作ろう!Firefox OSでアプリ開発の基本

新OSでアプリを作ろう!Firefox OSでアプリ開発の基本

世間は新型iPhoneの発売に沸いていますね。そんな中、前回はiPhoneとAndroidのシェアを奪う第三局になれるのか注目の集まるFirefox OSについて概要をざっくりと説明しました。

ですが、やはり手っ取り早く理解するには、自分で作って動作させることが一番だと思いますので、今回はFirefox OSのアプリを作成し、シミュレータで動作させてみたいと思います。

目次

Firefox OS 開発環境の構築方法

まず必要なものは当たり前ですがFirefoxです。
Firefox OSの開発環境を構築する際には、Firefox OS Simulatorをインストールします。
前回の記事を参考に、ここからシミュレータのアドオンをダウンロード・インストールします。

アドオンでシミュレータを起動すると

このように表示されます。

Firefox OSでの必要最低限の開発環境の構築は以上です。
他にもコードを記述するエディタが必要になりますが、eclipseといったような統合開発環境は用意されていませんので、エディタはご自分の使い慣れたものを使用していただいて構いません。

サンプルコードの作成

では早速サンプルコードを作成してみましょう。

今回はすべての基本となる「Hello World!!」を表示するコードを作成します。
まず、任意のディレクトリ内にHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Firefox OS Sample</title>
</head>
<body>
<h1>Firefox OS Sample</h1>
<p>Hello World!!</p>
</body>
</html>

見て頂くと解るように、ただ単純に「Hello World!!」と表示するソースコードですね。

ブラウザで表示させるためにはこれだけで十分ですが、アプリとして動作させるためにはもうひとつファイルを作成する必要があります。

それが、マニフェストファイルと呼ばれるファイルです。

{
	"name"	:	"Firefox OS Sample",
	"description"	:	"Hello World!!",
	"launch_path"	:	"/index.html",
	"default_locale"	:	"ja"
}

マニフェストファイルはJSON形式で記述し、拡張子.webappとします。

先ほど作成したHTMLファイルと同じディレクトリに保存しておいてください。

指定する項目は他にもありますが、必須項目namedescriptionです。 では各々の項目についての詳細は以下のとおりです。

name アプリの名前を指定します
description アプリの説明を記述します。
launch_path htmlファイルへのパスを記述します。
default_locale マニフェストの使用言語を指定します。

他にもアプリの規模や種類によって記述する項目が必要になってきます。 各項目の詳細はこちらに詳しく掲載されています。

シミュレータへアプリのインストール

2つのソースコードを作成・保存できたところで、シミュレータへインストールしてみましょう。

Firefoxを起動し、ツール⇒Web開発⇒Firefox OS Simulatorと選択し、ダッシュボードを表示させます。
Add Directoryをクリックし、インストールしたいアプリのマニフェストファイルを選択します。
すると、シミュレータが起動し、アプリがインストール・実行された画面が表示されます。

このように画面に表示されます。
そして、メニューを表示すると、

このように、アプリがインストールされていることが分かります。

まとめ

いかがでしたか?簡単なソースコードだったとはいえ、Firefox OSの魅力であるWebアプリの導入の容易さは体感できたのではないでしょうか。
Firefox OSを利用すれば、JavaやObject-Cといった言語を一から勉強し直さなくてもアプリ開発が出来るようになります。
日本での発売が待ち遠しいですね。