FirefoxOSでサンプルアプリ

というわけでTizenのHELLO WORLDをしたので

FirefoxOSのサンプルアプリにいってみます。

用意するもの:

Firefoxブラウザ+アドオンのFirefoxOS Simulator

以上です。

ちなみに先日参加したFirefoxOS勉強会で

@dynamitter様の発表にてFirefoxOSのシュミレーターは

公式じゃないけど日本語対応版があるよ、とのことでした。

アドオンのインストール

アドオン.JPG

シュミレータ表示

シュミレータ.JPG

サンプルソースをご本家よりダウンロードしてきます。

サンプル

サンプルダウンロード.JPG

サンプルダウンロード内の「manifest.webapp」を修正します。

「manifest.webapp」はJSON形式です。

以下の設定は今んとこ不要なので削除します。

「"appcache_path": "/offline.appcache",」

「"permissions": {

 "systemXHR": {}

 }」

{

"version": "0.1",

"name": "Your App",

"description": "Your new awesome Open Web App",

"launch_path": "/index.html",

"icons": {

"16": "/img/icons/mortar-16.png",

"48": "/img/icons/mortar-48.png",

"128": "/img/icons/mortar-128.png"

},

"developer": {

"name": "Your Name",

"url": "http://yourawesomeapp.com"

},

"installs_allowed_from": ["*"],

"locales": {

"es": {

"description": "Su nueva aplicacion impresionante Open Web",

"developer": {

"url": "http://yourawesomeapp.com"

}

},

"it": {

"description": "Il vostro nuovo fantastico Open Web App",

"developer": {

"url": "http://yourawesomeapp.com"

}

}

}

}

次にシュミレータにアプリを追加します。

シュミレータディレクトリ追加1.JPG

「ADD Directory」を選択し、対象のアプリの「manifest.webapp」ファイルを選択します。

シュミレータディレクトリ追加2.JPG

右側の「Simulator」ボタンをクリックし、シュミレータを起動します。

シュミレータアプリ.JPG

ちなみにindex.htmlを普通にHTMLで修正してHELLO WORLDにしたのが以下。

シュミレータアプリ2.JPG

フォルダ構成は以下です。

firefoxディレクトリ.JPG

「manifest.webapp」が、起動時のhtmlファイルの指定、アプリ名の指定などを表すファイルです。

Tizenもそうでしたが、超簡単でした。

ここからHTML5javascriptで工夫するのがどこまで出来るか、

というところでしょうか。