2013年4月10日水曜日

Firefox OS アプリケーションでHello World!

 今回は簡単なFirefox OSアプリケーションの作成を通してFirefox OSアプリケーションの基本的な仕組みを学びたいと思います。必要な環境としては以下の通りです。

  • OS:Windows | Mac | Linux
  • ブラウザ: Firefox
  • シミュレータ:Firefox OS Simulator
  • エディタ:指定なし

  • シミュレータの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サーバ上にあり、基本的にオンラインで利用します。オフラインでの動作も設定によってサポートする事が出来ます。

    メリット:
  • サーバでソースを管理するのでアップデートなどを簡単に行える
  • Webアプリケーションのフロントエンドを再利用しやすい

  • デメリット:
  • 基本的にオンラインで動作させる事になる
  • APIへアクセス出来る種類がパッケージ型に比べて少ない

  • パッケージ型

    パッケージ型アプリケーションはアプリケーション本体をZIPファイルにして配布する形式です。

    メリット:
  • オフラインで利用が可能
  • より多くのAPIへアクセス出来る

  • デメリット:
  • ZIPファイルでの配布なのでアップデートする場合は新しい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 件のコメント:

    コメントを投稿