シミュレータのFirefox OS SimulatorはFirefoxブラウザのアドオンです。まだインストールしていない場合は以下を参考にして下さい。
Firefox OS Simulatorでアプリの開発環境を整える
Firefox OSアプリケーション(Open Web Apps)の仕組み
Firefox OSアプリケーションは通常のWebアプリケーションと区別するために正式には「Open Web Apps」と呼称するようです。Open Web AppsはHTML5やjavascript、CSSなどをベースに開発します。内部構造はWebアプリケーションのフロントエンドによくにています。実際にWebアプリケーションのフロントエンドをそのままOpen Web Appsとして動作させる事も可能です(正常に動くかどうかは別として)。内部構造の例:
www
├── js
│ └── *.js
├── css
│ └── *.css
├── img
│ └── *.png
├── index.html
├── favicon.ico
└── manifest.webapp
Open Web AppsはAndroidのAndroidManifest.xmlやiOSのinfo.plistと同じく、manifest.webappという定義ファイルを作成します。manifest.webappにアプリケーションの名前や権限の設定、エントリポイントなどを記述する事でFirefox OS側でアプリケーションを認識する事が出来るようになります。Open Web AppsとWebアプリケーションを区別するのはこのmanifest.webappだけです。
Open Web Appsの種類
Open Web Appsには"ホスト型"と"パッケージ型"の2つの種類があります。アプリケーションの実装自体はどちらもHTML5やjavascript、CSSで行いますが、設定や配布方法が異なり、メリット・デメリットがあります。今回作成するのはホスト型のアプリケーションとなります。ホスト型
ホスト型アプリケーションはURLから実行されるアプリです。アプリケーションの本体はWebサーバ上にあり、基本的にオンラインで利用します。オフラインでの動作も設定によってサポートする事が出来ます。メリット:
デメリット:
パッケージ型
パッケージ型アプリケーションはアプリケーション本体をZIPファイルにして配布する形式です。メリット:
デメリット:
Hello World!を作る
では簡単なOpen Web Appsを実際に作り、シミュレータにインストールしてみましょう。作成するのは定番の"Hello World!"を画面に表示するだけのアプリケーションです。ディレクトリ構成としては以下の様になります。helloworld/
├── index.html
└── manifest.webapp
まずはアプリケーションの本体となるindex.htmlを作成します。bodyにh1タグで"Hello World!"と記述しただけの簡単なファイルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
次にmanifest.webappを記述します。manifest.webappはJSON形式のファイルです。AndroidやiOSではXMLで設定を記述しますが、Open Web AppsではWebで一般的なJSON形式での設定を採用しています。manifest.webappで設定出来る項目は沢山ありますが、アプリケーションとして認識させる為の必須項目は"name"と"description"と"icons"だけです。これらの記述しておけばとりあえずインストールする事が出来るようです。以下のmanifest.webappでは必須項目に加えてバージョンやロケール、開発者の情報などいくつかの項目を記述しています。
{
"version": "0.1",
"name": "Hello World!",
"description": "first firefox app.",
"launch_path": "/index.html",
"icons": {
},
"developer": {
"name": "Hello",
"url": "http://yourawesomeapp.com"
},
"default_locale": "ja"
}
必須項目以外で一番重要なのは"launch_path"でしょうか。これはアプリケーションのエントリポイントを指定する項目です。"/index.html"を指定していますね。アプリケーションが起動した時にindex.htmlを開く様に設定しています。
Firefox OS Simulatorにインストールする
ではアプリケーションをFirefox OS Simulatorにインストールして見ましょう。Firefoxブラウザを起動し、Firefox OS Simulatorのダッシュボードを開きます。
"Add Directory"ボタンを押下して、manifest.webappを選択します。
するとDashboardにアプリケーションが追加されます。
Firefox OS Simulatorを起動してみましょう。アプリケーションの一覧に"Hello World!"が追加されているはずです。起動すると"Hello World!"が表示されます。
おわりに
さて、Open Web Appsはmanifest.webappによって簡単に定義出来る事がわかりました。しかし、Helloworldだけではまだまだ色んな疑問が湧きます。例えば、画面遷移はどうするのか?データの保存はどうするのか?通信処理はどうするのか?UI部品はどうするのか?バックグラウンドで処理出来るのか？アプリ間の連携は出来るのか？タッチ処理やスワイプ、アニメーション系はどうなってるのか?WebGLはどうなるのか?アプリケーションを配布するにはどうすればいいか?有料アプリケーションは作れるのか？などなど色々と気になりますね。これらについては今後順を追って解説していきたいと思います。参考
Open Web Apps を始めよう – なぜ、そしてどのように アプリ開発を始めよう MOZILLA DEVELOPER NETWORK -アプリマニフェスト-
記載されている会社名、および商品名等は、各社の商標または登録商標です。
0 コメント:
コメントを投稿