2013年4月22日月曜日

 Firefoxブラウザ上のアドオンマネージャでは現在Firefox OS Simulatorの2.0.1をインストールする事が出来ますが、既に3.0のプレビュー版が公開されています(Firefox OS Simulator – previewing version 3.0)。今回は最新のFirefox OS Simulatorの導入方法と新機能を解説したいと思います。

導入の手順

 新しい機能の解説の前に、まずはFirefox OS Simulator 3.0を導入してみましょう。アドオンマネージャと手順は異なりますが簡単です。
  1. プラットフォームに合わせたxpiをダウンロードする
  2. xpiをFirefoxブラウザにインストールする
これだけです。xpiとはFirefox用のプラグインの拡張子です。

1.プラットフォームに合わせたxpiをダウンロードする

 Firefox OS Simulator 3.0のxpiはFirefox OS Simulator – previewing version 3.0の"Downloading the preview"辺りのリンクからダウンロードする事が出来ます。一応コチラにもリンクを載せますが、変更される可能性もあるのでなるべく本家サイトの方からダウンロードして下さい。各プラットフォームに分かれているので、自分の環境のxpiをダウンロードして下さい。

  • Firefox OS Simulator Preview for Windows
  • Firefox OS Simulator Preview for Mac
  • Firefox OS Simulator Preview for Linux


  • 2.xpiをインストールする

     ダウンロードしたxpiファイル(Macではr2d2b2g-mac.xpiでした)をFirefoxブラウザにD&Dすればインストールする事が出来ます。


     警告が出ますが「今すぐインストール」を押下します。


     インストールが完了すればアドオンの一覧にFirefox OS Simulator 3.0が表示されます。


    3.0で出来る事

     Firefox OS Simulator 3.0の主な追加機能は以下の4点です。

  • デバイスへのアプリインストール
  • シミュレータの画面の回転
  • 位置情報APIの利用
  • マニフェストのバリデーション

  • デバイスへのアプリインストール

     Firefox OSをサポートしたデバイスを接続してあれば、直接アプリケーションをインストールする事が出来るようになりました。Windowsではまだ利用出来ないようです。以下のバグfixがされたバージョンのFirefox OSが入っているデバイスであれば本機能を利用出来るようです。残念ながら今回は手元に最新のFirefox OSが焼かれた端末がなかったので試せませんでした。鋭意作成中なのでまた別のエントリで紹介するかもしれません。

  • Bug 842725 - install to device via b2gremote throws "appInfo is null"

  • シミュレータの画面の回転

     シミュレータの画面を回転させる事が出来るようなりました。シミュレータを起動すると、ホームボタンの辺りに画面回転のボタンが追加されています。画面回転のボタンを押下すると縦、横を変更出来ます。


    位置情報APIの利用

     位置情報のAPIを使えるようになりました。画面の回転と同じく、シミュレータの下部にボタンが追加されています。Geolocation APIを利用して位置情報の取得も行う事が出来るようになった様です。サンプルとして位置情報を取得してGoogle Mapを表示してみました。Geolocation APIの詳細については別途エントリに書きます。


    マニフェストのバリデーション

     以前はmanifest.webappに記述誤りがあるとインストール出来ないまま何も表示等がなかったのですが、3.0からはmanifest.webappの内容を検証し、問題があれば警告などを表示してくれるようになりました。



    終わりに

     Firefox OS Simulator 3.0では、画面回転や位置情報APIが追加されてアプリの開発が少し便利になりました。manifest.webappの検証なども大変助かりますね。
    実機へのアプリインストールは、Firefox OS入りの実機を用意するハードルが割と高めなので恩恵を受けるのが難しいですが、もうすぐ端末が発売されるのでその頃には役立つ機能となっていると思います。上には記述しませんでしたが、Firefox OSの基本的なUIのセットとなるGAIA UIもFirefox OS Simulator 3.0では最新になっているそうです。GAIA UIの利用についても追々解説したいと思います。

    参考


    Firefox OS Simulator – previewing version 3.0

    Firefox OS Simulator previewing version 3.0を試す

     Firefoxブラウザ上のアドオンマネージャでは現在Firefox OS Simulatorの2.0.1をインストールする事が出来ますが、既に3.0のプレビュー版が公開されています(Firefox OS Simulator – previewing version 3.0)。今回は最新のFirefox OS Simulatorの導入方法と新機能を解説したいと思います。

    導入の手順

     新しい機能の解説の前に、まずはFirefox OS Simulator 3.0を導入してみましょう。アドオンマネージャと手順は異なりますが簡単です。
    1. プラットフォームに合わせたxpiをダウンロードする
    2. xpiをFirefoxブラウザにインストールする
    これだけです。xpiとはFirefox用のプラグインの拡張子です。

    1.プラットフォームに合わせたxpiをダウンロードする

     Firefox OS Simulator 3.0のxpiはFirefox OS Simulator – previewing version 3.0の"Downloading the preview"辺りのリンクからダウンロードする事が出来ます。一応コチラにもリンクを載せますが、変更される可能性もあるのでなるべく本家サイトの方からダウンロードして下さい。各プラットフォームに分かれているので、自分の環境のxpiをダウンロードして下さい。

  • Firefox OS Simulator Preview for Windows
  • Firefox OS Simulator Preview for Mac
  • Firefox OS Simulator Preview for Linux


  • 2.xpiをインストールする

     ダウンロードしたxpiファイル(Macではr2d2b2g-mac.xpiでした)をFirefoxブラウザにD&Dすればインストールする事が出来ます。


     警告が出ますが「今すぐインストール」を押下します。


     インストールが完了すればアドオンの一覧にFirefox OS Simulator 3.0が表示されます。


    3.0で出来る事

     Firefox OS Simulator 3.0の主な追加機能は以下の4点です。

  • デバイスへのアプリインストール
  • シミュレータの画面の回転
  • 位置情報APIの利用
  • マニフェストのバリデーション

  • デバイスへのアプリインストール

     Firefox OSをサポートしたデバイスを接続してあれば、直接アプリケーションをインストールする事が出来るようになりました。Windowsではまだ利用出来ないようです。以下のバグfixがされたバージョンのFirefox OSが入っているデバイスであれば本機能を利用出来るようです。残念ながら今回は手元に最新のFirefox OSが焼かれた端末がなかったので試せませんでした。鋭意作成中なのでまた別のエントリで紹介するかもしれません。

  • Bug 842725 - install to device via b2gremote throws "appInfo is null"

  • シミュレータの画面の回転

     シミュレータの画面を回転させる事が出来るようなりました。シミュレータを起動すると、ホームボタンの辺りに画面回転のボタンが追加されています。画面回転のボタンを押下すると縦、横を変更出来ます。


    位置情報APIの利用

     位置情報のAPIを使えるようになりました。画面の回転と同じく、シミュレータの下部にボタンが追加されています。Geolocation APIを利用して位置情報の取得も行う事が出来るようになった様です。サンプルとして位置情報を取得してGoogle Mapを表示してみました。Geolocation APIの詳細については別途エントリに書きます。


    マニフェストのバリデーション

     以前はmanifest.webappに記述誤りがあるとインストール出来ないまま何も表示等がなかったのですが、3.0からはmanifest.webappの内容を検証し、問題があれば警告などを表示してくれるようになりました。



    終わりに

     Firefox OS Simulator 3.0では、画面回転や位置情報APIが追加されてアプリの開発が少し便利になりました。manifest.webappの検証なども大変助かりますね。
    実機へのアプリインストールは、Firefox OS入りの実機を用意するハードルが割と高めなので恩恵を受けるのが難しいですが、もうすぐ端末が発売されるのでその頃には役立つ機能となっていると思います。上には記述しませんでしたが、Firefox OSの基本的なUIのセットとなるGAIA UIもFirefox OS Simulator 3.0では最新になっているそうです。GAIA UIの利用についても追々解説したいと思います。

    参考


    Firefox OS Simulator – previewing version 3.0

    2013年4月19日金曜日

     今回はMozillaが提供しているOpen Web Appsのアプリケーションテンプレートを使ってプロジェクトを作成し、動かしてみたいと思います。

    必要な環境:

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

  • Web資産は多くても課題は山積み

     前回「Firefox OS アプリケーションでHello World!」で簡単なOpen Web Appsを作成しました。Open Web AppsはHTML5やjavascript,CSSで構成し、Webアプリケーションのフロントエンドに似ている、という事が分かりました。しかし「Webアプリケーションのフロントエンドに似ている」だとか「HTML5やjavascript,CSSで自由に作れる」と言われても具体的にどの様に開発していけば良いのか判らないですね。Firefox OSはモバイル用のOSですので通常のPCで利用する様なWebアプリケーションとはUI/UXが異なるはずです。また、モバイルで利用出来るリソースには限りがあります。PCの様にリッチなアニメーションや複雑なDOM操作がサクサク動くという事はまずないです。画像やjavascript,cssのサイズにも気を配る必要がありますし、基本的に画面をタッチする事によって操作を行うのでその為の仕組みも必要です。沢山のWeb資産が使えると言ってもモバイル特有の課題に対しては様々な試行錯誤が必要になります。
     

    アプリケーションテンプレートを使う

     ありがたい事に、MozillaはOpen Web Apps用のアプリケーションテンプレートをいくつかGithub上で公開しています。これらのテンプレートを利用する事で、Open Web Appsの各種機能や基本的なUI、プロジェクトの構成などを学ぶ事が出来ます。今のところ以下の4つのテンプレートが提供されています。今回は一番単純なmortar-app-stubを利用します。

    ※但し、これらのテンプレートは1ヶ月程前から「非推奨」という警告が追加されています。近々内部構成が変わるという事なので、参考程度に見て下さい。
    Open Web App Templates
    • mortar-app-stub:
      Open Web Appsに必要なだけの基本的な空白のテンプレート。
    • mortar-game-stub:
      入力、レンダリング、ループ処理などシンプルなゲームテンプレート
    • mortar-list-detail:
      master-detailのレイアウトと、必要なライブラリが付属している
    • mortar-tab-view:
      タブで画面を切り替える事が出来るテンプレート

    テンプレートでプロジェクトを作成する

     早速テンプレートを使ってOpen Web Appsを作ってみましょう。テンプレートはGithub上で公開されているのでgit cloneでコピーする事でそのまま使えます。gitを利用する他にvoloというパッケージマネージャを利用する方法もありますが、voloを含めて構成が変更される予定らしいので今回はスルーする事にします。
     以下のgitコマンドで"template01"にmortar-app-stub.gitをコピーします。これだけで準備完了です。
    git clone https://github.com/mozilla/mortar-app-stub.git template01

     沢山のファイルが作成されたかと思いますが、まずはFirefox Simulator上で動かしてみましょう。手順は前回と同様で、manifest.webappをFirefox Simulatorに読み込ませればOKです。manifest.webappは以下のパスにあります。
    template01/www/manifest.webapp

     インストールして動かしてみると・・・

     色々と文字が表示されますね。元々あったメッセージの他に「非推奨」という警告メッセージも表示されています。mortar-app-stubは空白のテンプレートなので、画面遷移なども無く、画面にメッセージを表示するだけです。動的に変化する部分もありません。

    テンプレートプロジェクトの構造

     ではプロジェクトの構造を見ていきましょう。githubからcloneしたプロジェクトの構成は以下の通りです。ファイル構成自体はjavascriptベースのアプリケーションサーバであるNode.jsと似ています。これはnpmというNode.js用のパッケージ管理ツールにこのテンプレートが依存しているからですが、この辺りも変わる可能性があるので詳細は省きたいと思います。

    tempate01
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── tools
    ├── volofile
    └── www

     このファイル構成の中でOpen Web Appsに関係するファイルが入っているのがwwwディレクトリです。wwwディレクトリの中身を見てみましょう。

    Open Web Apps部分の構造

     mortar-app-stubから作成したOpen Web Appsの内部構成は以下の様になっています。
    www/
    ├── css
    │ ├── app.css
    │ └── install-button.css
    ├── favicon.ico
    ├── img
    │ ├── glyphicons-halflings-white.png
    │ ├── glyphicons-halflings.png
    │ └── icons
    │ ├── mortar-128.png
    │ ├── mortar-16.png
    │ └── mortar-48.png
    ├── index.html
    ├── js
    │ ├── app.js
    │ ├── init.js
    │ ├── install-button.js
    │ └── lib
    │ ├── install.js
    │ ├── receiptverifier.js
    │ ├── require.js
    │ └── zepto.js
    └── manifest.webapp

     沢山ファイルがありますね。恐らくこの辺りの構成はテンプレートの構造が変わってもあんまり影響を受けないはずです。この中で今後も重要と思われるファイルをピックアップしたいと思います。

    • manifest.webapp
      言うまでもなくまずはmanifest.webappですね。中身については前回(Firefox OS アプリケーションでHello World!)説明した以上の事は特にないです。
    • js/lib/require.js
      libディレクトリ内には外部ライブラリを置いてあります。require.jsはRequireJSというライブラリです。RequireJSはjavascriptの非同期ローディングとモジュール化を行う為のライブラリです。アプリケーション用のjavascriptをRequireJSを利用してモジュール定義をしたり、読み込みを行う事になります。
    • js/lib/zepto.js
      Zepto.jsはjQueryと多くの部分で互換のある軽量なライブラリです。jQueryに比べて1/4のファイルサイズという事から、モバイル向けに利用される例が多いようです。
    • js/lib/receiptverifier.js
      receiptverifier.jsはMozillaが提供している有料アプリケーションの決済等を検証する為のライブラリです。
    • js/init.js
      アプリケーションの初期化を行う為のスクリプトです。index.html内で読み込まれ、内部ではRequireJSの機能を使ってapp.jsを読み込んでいます。
    • js/app.js
      アプリケーションのロジックを記述するスクリプトです。アプリケーションのコア部分であるという認識でいいと思います。ここに各種制御のロジックを記述していく事になります。


    起動のフロー
     ファイルが多いので起動フローを通して各種ファイルの関係を整頓したいと思います。
    アプリ起動
      ↓
    index.htmlが読み込まれる
      ↓
    index.html下部のscriptタグでjs/lib/require.jsが読み込まれる
      ↓
    js/lib/require.jsの読み込み完了後、data-mainに指定したjs/init.jsが読み込まれる
      ↓
    js/init.js内でRequireJSのbaseUrlを"js/lib"にセットし、js/app.jsを読み込む
      ↓
    js/app.jsでモジュールをdefineする。内部ではzeptoをrequireし、
    js/lib/receiptverifier.jsとjs/install-button.jsを読み込んでいる
     大分ややこしいですね。今回のmortar-app-stubだと複雑な構造ながら特にjs周りでは何もやっていません。javascriptによって画面の操作などを行う場合は、js/app.jsに書いて行くことになります。RequireJSを使ってわざわざ色んなファイルを段階的に読み込むのは、index.htmlに記述するであろう他のscriptタグ等と競合しない為です。js/app.js内に記述した変数や処理等はindex.html内の他のscriptからは見えませんし、操作も出来ません。これによってscript間の衝突を防ぎます。この辺りはCommonJSModules/AsynchronousDefinition(AMD)で定義されています。CommonJSはjavascriptでのアプリケーション作成(サーバサイド含む)の為の標準仕様を策定する為のプロジェクトです。

    他のテンプレート

     本当はそれぞれのmotarテンプレートをエントリに分けて解説しようと考えていましたが、今のところ全てdeprecatedなのでここでまとめてその他のテンプレートの概要を簡単に説明したいと思います。
     

    mortar-game-stub

     ゲームアプリケーション用のテンプレートです。requestAnimationFrameを使って内部でメインループを回す構造になっています。テンプレートではキーイベントを受け取って緑の四角形を操作する事が出来ます(動きは若干あやしいですが・・・)。


    mortar-list-detail

     リスト表示のテンプレートです。リストの項目をタップすると詳細画面に遷移します。動作としてはiOSのUINavigationContollerに近いです。


    mortar-tab-view

     タブ表示のテンプレートです。画面下部のボタンを押下すると、上部の画面が切り替わります。


    終わりに

     沢山の新しい事柄が出て来ました。正直「Open Web Appsはかなり複雑」という印象は否めません。ただこれらの知識は通常のWebアプリケーションでも生きてくるので学んでおいて損はないかな、と思います。特にRequireJSを使ったdefineやrequireなどのモジュール操作は今後javascriptを利用していく上で必須の知識だと思います。mortar-app-stubでは登場しませんでしたが、他のテンプレートではBackbone.jsやUnderscore.jsが利用されています。Backbone.jsはjavascript向けのMVCフレームワークの一種です。Underscore.jsはコレクション操作などのUtility的な役割に重点を置いたライブラリで、Backbone.jsは内部でUnderscore.jsを利用しています。複雑な画面構成を実現するにはこういったフレームワークの利用が必須となります。Open Web Appsを作る為に学んだ知識は通常のWebアプリケーションのフロントエンドでも生きてくるはずです。mortarテンプレートについては新しくなったらまたエントリにまとめたいと思います。

    参考

    Open Web Apps入門 テンプレートを使う

     今回はMozillaが提供しているOpen Web Appsのアプリケーションテンプレートを使ってプロジェクトを作成し、動かしてみたいと思います。

    必要な環境:

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

  • Web資産は多くても課題は山積み

     前回「Firefox OS アプリケーションでHello World!」で簡単なOpen Web Appsを作成しました。Open Web AppsはHTML5やjavascript,CSSで構成し、Webアプリケーションのフロントエンドに似ている、という事が分かりました。しかし「Webアプリケーションのフロントエンドに似ている」だとか「HTML5やjavascript,CSSで自由に作れる」と言われても具体的にどの様に開発していけば良いのか判らないですね。Firefox OSはモバイル用のOSですので通常のPCで利用する様なWebアプリケーションとはUI/UXが異なるはずです。また、モバイルで利用出来るリソースには限りがあります。PCの様にリッチなアニメーションや複雑なDOM操作がサクサク動くという事はまずないです。画像やjavascript,cssのサイズにも気を配る必要がありますし、基本的に画面をタッチする事によって操作を行うのでその為の仕組みも必要です。沢山のWeb資産が使えると言ってもモバイル特有の課題に対しては様々な試行錯誤が必要になります。
     

    アプリケーションテンプレートを使う

     ありがたい事に、MozillaはOpen Web Apps用のアプリケーションテンプレートをいくつかGithub上で公開しています。これらのテンプレートを利用する事で、Open Web Appsの各種機能や基本的なUI、プロジェクトの構成などを学ぶ事が出来ます。今のところ以下の4つのテンプレートが提供されています。今回は一番単純なmortar-app-stubを利用します。

    ※但し、これらのテンプレートは1ヶ月程前から「非推奨」という警告が追加されています。近々内部構成が変わるという事なので、参考程度に見て下さい。
    Open Web App Templates
    • mortar-app-stub:
      Open Web Appsに必要なだけの基本的な空白のテンプレート。
    • mortar-game-stub:
      入力、レンダリング、ループ処理などシンプルなゲームテンプレート
    • mortar-list-detail:
      master-detailのレイアウトと、必要なライブラリが付属している
    • mortar-tab-view:
      タブで画面を切り替える事が出来るテンプレート

    テンプレートでプロジェクトを作成する

     早速テンプレートを使ってOpen Web Appsを作ってみましょう。テンプレートはGithub上で公開されているのでgit cloneでコピーする事でそのまま使えます。gitを利用する他にvoloというパッケージマネージャを利用する方法もありますが、voloを含めて構成が変更される予定らしいので今回はスルーする事にします。
     以下のgitコマンドで"template01"にmortar-app-stub.gitをコピーします。これだけで準備完了です。
    git clone https://github.com/mozilla/mortar-app-stub.git template01

     沢山のファイルが作成されたかと思いますが、まずはFirefox Simulator上で動かしてみましょう。手順は前回と同様で、manifest.webappをFirefox Simulatorに読み込ませればOKです。manifest.webappは以下のパスにあります。
    template01/www/manifest.webapp

     インストールして動かしてみると・・・

     色々と文字が表示されますね。元々あったメッセージの他に「非推奨」という警告メッセージも表示されています。mortar-app-stubは空白のテンプレートなので、画面遷移なども無く、画面にメッセージを表示するだけです。動的に変化する部分もありません。

    テンプレートプロジェクトの構造

     ではプロジェクトの構造を見ていきましょう。githubからcloneしたプロジェクトの構成は以下の通りです。ファイル構成自体はjavascriptベースのアプリケーションサーバであるNode.jsと似ています。これはnpmというNode.js用のパッケージ管理ツールにこのテンプレートが依存しているからですが、この辺りも変わる可能性があるので詳細は省きたいと思います。

    tempate01
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── tools
    ├── volofile
    └── www

     このファイル構成の中でOpen Web Appsに関係するファイルが入っているのがwwwディレクトリです。wwwディレクトリの中身を見てみましょう。

    Open Web Apps部分の構造

     mortar-app-stubから作成したOpen Web Appsの内部構成は以下の様になっています。
    www/
    ├── css
    │ ├── app.css
    │ └── install-button.css
    ├── favicon.ico
    ├── img
    │ ├── glyphicons-halflings-white.png
    │ ├── glyphicons-halflings.png
    │ └── icons
    │ ├── mortar-128.png
    │ ├── mortar-16.png
    │ └── mortar-48.png
    ├── index.html
    ├── js
    │ ├── app.js
    │ ├── init.js
    │ ├── install-button.js
    │ └── lib
    │ ├── install.js
    │ ├── receiptverifier.js
    │ ├── require.js
    │ └── zepto.js
    └── manifest.webapp

     沢山ファイルがありますね。恐らくこの辺りの構成はテンプレートの構造が変わってもあんまり影響を受けないはずです。この中で今後も重要と思われるファイルをピックアップしたいと思います。

    • manifest.webapp
      言うまでもなくまずはmanifest.webappですね。中身については前回(Firefox OS アプリケーションでHello World!)説明した以上の事は特にないです。
    • js/lib/require.js
      libディレクトリ内には外部ライブラリを置いてあります。require.jsはRequireJSというライブラリです。RequireJSはjavascriptの非同期ローディングとモジュール化を行う為のライブラリです。アプリケーション用のjavascriptをRequireJSを利用してモジュール定義をしたり、読み込みを行う事になります。
    • js/lib/zepto.js
      Zepto.jsはjQueryと多くの部分で互換のある軽量なライブラリです。jQueryに比べて1/4のファイルサイズという事から、モバイル向けに利用される例が多いようです。
    • js/lib/receiptverifier.js
      receiptverifier.jsはMozillaが提供している有料アプリケーションの決済等を検証する為のライブラリです。
    • js/init.js
      アプリケーションの初期化を行う為のスクリプトです。index.html内で読み込まれ、内部ではRequireJSの機能を使ってapp.jsを読み込んでいます。
    • js/app.js
      アプリケーションのロジックを記述するスクリプトです。アプリケーションのコア部分であるという認識でいいと思います。ここに各種制御のロジックを記述していく事になります。


    起動のフロー
     ファイルが多いので起動フローを通して各種ファイルの関係を整頓したいと思います。
    アプリ起動
      ↓
    index.htmlが読み込まれる
      ↓
    index.html下部のscriptタグでjs/lib/require.jsが読み込まれる
      ↓
    js/lib/require.jsの読み込み完了後、data-mainに指定したjs/init.jsが読み込まれる
      ↓
    js/init.js内でRequireJSのbaseUrlを"js/lib"にセットし、js/app.jsを読み込む
      ↓
    js/app.jsでモジュールをdefineする。内部ではzeptoをrequireし、
    js/lib/receiptverifier.jsとjs/install-button.jsを読み込んでいる
     大分ややこしいですね。今回のmortar-app-stubだと複雑な構造ながら特にjs周りでは何もやっていません。javascriptによって画面の操作などを行う場合は、js/app.jsに書いて行くことになります。RequireJSを使ってわざわざ色んなファイルを段階的に読み込むのは、index.htmlに記述するであろう他のscriptタグ等と競合しない為です。js/app.js内に記述した変数や処理等はindex.html内の他のscriptからは見えませんし、操作も出来ません。これによってscript間の衝突を防ぎます。この辺りはCommonJSModules/AsynchronousDefinition(AMD)で定義されています。CommonJSはjavascriptでのアプリケーション作成(サーバサイド含む)の為の標準仕様を策定する為のプロジェクトです。

    他のテンプレート

     本当はそれぞれのmotarテンプレートをエントリに分けて解説しようと考えていましたが、今のところ全てdeprecatedなのでここでまとめてその他のテンプレートの概要を簡単に説明したいと思います。
     

    mortar-game-stub

     ゲームアプリケーション用のテンプレートです。requestAnimationFrameを使って内部でメインループを回す構造になっています。テンプレートではキーイベントを受け取って緑の四角形を操作する事が出来ます(動きは若干あやしいですが・・・)。


    mortar-list-detail

     リスト表示のテンプレートです。リストの項目をタップすると詳細画面に遷移します。動作としてはiOSのUINavigationContollerに近いです。


    mortar-tab-view

     タブ表示のテンプレートです。画面下部のボタンを押下すると、上部の画面が切り替わります。


    終わりに

     沢山の新しい事柄が出て来ました。正直「Open Web Appsはかなり複雑」という印象は否めません。ただこれらの知識は通常のWebアプリケーションでも生きてくるので学んでおいて損はないかな、と思います。特にRequireJSを使ったdefineやrequireなどのモジュール操作は今後javascriptを利用していく上で必須の知識だと思います。mortar-app-stubでは登場しませんでしたが、他のテンプレートではBackbone.jsやUnderscore.jsが利用されています。Backbone.jsはjavascript向けのMVCフレームワークの一種です。Underscore.jsはコレクション操作などのUtility的な役割に重点を置いたライブラリで、Backbone.jsは内部でUnderscore.jsを利用しています。複雑な画面構成を実現するにはこういったフレームワークの利用が必須となります。Open Web Appsを作る為に学んだ知識は通常のWebアプリケーションのフロントエンドでも生きてくるはずです。mortarテンプレートについては新しくなったらまたエントリにまとめたいと思います。

    参考

    2013年4月10日水曜日

     今回は簡単な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 -アプリマニフェスト-

  • 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 -アプリマニフェスト-

  • 2013年4月5日金曜日

     Firefox OSにはアプリケーションを開発する為のSDKなどが特にありません。アプリケーションはHTML5やjavascriptやCSSを駆使して開発するわけですが、特にSDKが無いので開発自体はそれぞれ好きな環境で行う事になります。 一応スタンダードっぽい構成はある様ですが、それについては次回以降解説したいと思います。今回はFirefox OSアプリケーションを動作させる為の環境としてFirefox OS Simulatorをインストールする手順を解説します。

    Firefox OS Simulatorとは


     Firefox OS SimulatorはFirefox OSの環境をFirefoxブラウザ上で再現する為のアドオンです。現時点では2.0.1がリリースされており、以下の機能を提供しています。
    • APIの利用:
      以下のAPIを利用する事が出来る
      • Contacts API
      • Settings API
    • アプリケーションのインストール:
      開発したアプリケーションやFirefox Marketplaceで公開されているアプリケーションを動かす事が出来る。
    • コンソールの表示:
      ログ、エラーログなどを見る事が出来る
    詳細な解説についてはDevelopers | Firefox Marketplace | Firefox OS Simulatorを参照して下さい。

    Firefox OS Simulatorをインストールする

     Firefox OS Simulatorをインストールしてみましょう。Firefox OS SimulatorはWindows, Mac, Linuxで利用が可能です。

     Firefoxブラウザを立ち上げ、メニューの[ツール]-[アドオン]を選択して下さい。


     "firefox os"をキーにアドオンを検索するとFirefox OS Simulator 2.0.1が表示されます。インストールボタンを押せばインストールが開始されます。簡単ですね。


    Firefox OS Simulatorを使う

     アドオンのインストールが完了したら、Firefoxブラウザのメニューの[ツール]-[Web開発]に"Firefox OS Simulator"の項目が増えているはずです。ここからFirefox OS Simulatorのダッシュボードを開く事が出来ます。


     ダッシュボードはこんな感じです。


     左側にシミュレータの起動スイッチがあります。consoleのチェックをつけると、エラー等のログを表示する画面も起動されます。


     起動するとこんな感じの画面が立ち上がります。最初からいくつかアプリケーションがインストールされてます。ブラウザもあります。
     


     ログのコンソールがコチラ。エラーの他にconsole.logでのアプリケーションのログなども表示されます。シミュレータだとbluetoothが無い、とかWifiが無いとかエラーが出てますね。

    終わりに

     Firefox OS Simulatorの導入が簡単に出来ました。動作も結構ぬるぬるでなかなか快適です。Firefox Marketplaceも使えるので既にリリースされているアプリケーションをチェックする事も出来ます。 次回以降からFirefox OS Simulatorを動作環境として、Firefox OSアプリケーションを作っていきたいと思います。

    Firefox OS Simulatorでアプリの開発環境を整える

     Firefox OSにはアプリケーションを開発する為のSDKなどが特にありません。アプリケーションはHTML5やjavascriptやCSSを駆使して開発するわけですが、特にSDKが無いので開発自体はそれぞれ好きな環境で行う事になります。 一応スタンダードっぽい構成はある様ですが、それについては次回以降解説したいと思います。今回はFirefox OSアプリケーションを動作させる為の環境としてFirefox OS Simulatorをインストールする手順を解説します。

    Firefox OS Simulatorとは


     Firefox OS SimulatorはFirefox OSの環境をFirefoxブラウザ上で再現する為のアドオンです。現時点では2.0.1がリリースされており、以下の機能を提供しています。
    • APIの利用:
      以下のAPIを利用する事が出来る
      • Contacts API
      • Settings API
    • アプリケーションのインストール:
      開発したアプリケーションやFirefox Marketplaceで公開されているアプリケーションを動かす事が出来る。
    • コンソールの表示:
      ログ、エラーログなどを見る事が出来る
    詳細な解説についてはDevelopers | Firefox Marketplace | Firefox OS Simulatorを参照して下さい。

    Firefox OS Simulatorをインストールする

     Firefox OS Simulatorをインストールしてみましょう。Firefox OS SimulatorはWindows, Mac, Linuxで利用が可能です。

     Firefoxブラウザを立ち上げ、メニューの[ツール]-[アドオン]を選択して下さい。


     "firefox os"をキーにアドオンを検索するとFirefox OS Simulator 2.0.1が表示されます。インストールボタンを押せばインストールが開始されます。簡単ですね。


    Firefox OS Simulatorを使う

     アドオンのインストールが完了したら、Firefoxブラウザのメニューの[ツール]-[Web開発]に"Firefox OS Simulator"の項目が増えているはずです。ここからFirefox OS Simulatorのダッシュボードを開く事が出来ます。


     ダッシュボードはこんな感じです。


     左側にシミュレータの起動スイッチがあります。consoleのチェックをつけると、エラー等のログを表示する画面も起動されます。


     起動するとこんな感じの画面が立ち上がります。最初からいくつかアプリケーションがインストールされてます。ブラウザもあります。
     


     ログのコンソールがコチラ。エラーの他にconsole.logでのアプリケーションのログなども表示されます。シミュレータだとbluetoothが無い、とかWifiが無いとかエラーが出てますね。

    終わりに

     Firefox OS Simulatorの導入が簡単に出来ました。動作も結構ぬるぬるでなかなか快適です。Firefox Marketplaceも使えるので既にリリースされているアプリケーションをチェックする事も出来ます。 次回以降からFirefox OS Simulatorを動作環境として、Firefox OSアプリケーションを作っていきたいと思います。

    2013年4月4日木曜日


     Firefox OSの日本語サイトにあるリンクからFirefox Marketplaceのページに行く事が出来ます。そこではAndroid版のFirefox Auroraのapkが配布されていて、実際に実機でFirefox Marketplaceを試す事が出来ます。本記事ではAndroid版Firefox Auroraのインストールから、実際にFirefox Marketplaceを使ってアプリケーションをインストールするまでの手順を解説します。Android端末を持っている方は是非試して見て下さい。


    Android版Firefox Auroraってなに?

     Firefoxは正式リリース版の他に、新機能等を早めに試す事が出来るプレビューリリース版が配布されています。 Beta版とAurora版の2つがあり、Aurora版はBeta版よりも最新の機能を試す事が出来る開発者向けのリリースです。このAurora版にFirefox Marketplaceが搭載されており、Firefox OS向けのアプリケーションをAndroid端末で試す事が出来ます。


    Android版Firefox Auroraをダウンロードする


     Firefox Marketplaceで"Marketplaceを試す≫"ボタンを押すとAndroid版Firefox Auroraのapkをダウンロードするリンクが表示されます。このリンクからapkファイルをダウンロードして下さい。執筆時点では"fennec-21.0a2.ja.android-arm.apk"をダウンロードする事が出来ました。


    Android版Firefox Auroraをインストールする

     apkをインストールする対象はエミュレータでも実機でも構いません。が、エミュレータの場合はFirefoxブラウザのアドオンでFirefox OS Simulatorがあるのであまり意味がないかなと思います。Firefox Auroraをインストールする方法は2つあります。adbコマンドで端末にインストールする方法と、端末で直接apkをダウンロードする方法です。開発環境が無い、あるいは構築が面倒な場合は端末で直接ダウンロードする方法でFirefox Auroraをインストールして下さい。

    adbコマンドでインストールする場合
     ターミナルでapkをダウンロードしたディレクトリに移動し、adb installコマンドを実行します。
    cd "apkをダウンロードしたディレクトリ"
    adb install -r fennec-21.0a2.ja.android-arm.apk

    端末から直接ダウンロードする場合
     まず端末でFirefox Marketplaceを開いて下さい。

     ダウンロードのリンクが現れるので、apkをダウンロードして下さい。ダウンロード後、apkを実行するとインストール出来ます。


    Firefox Marketplaceからアプリケーションをインストールする

     無事apkをインストールする事が出来たでしょうか?ではFirefox Marketplaceを開いて実際にアプリをインストールしてみましょう。


     インストールしたFirefox Auroraを起動するとトップ画面が開かれます。


     メニューを開いて「ツール」を選択します。(画像はGoogle Nexusです。端末にハードのメニューボタンがある場合はそちらを押下して下さい。)


     ツールの一覧の「アプリ」を選択します。


     アプリケーション管理画面が現れます。"マイアプリ"の右側のマーケットのアイコンからFirefox Marketplaceを開くことが出来ます。


     Firefox Marketplaceを開くと上部にピックアップされたアプリが表示されます。スクロールしていくとカテゴリを選択する事が出来ます。


     試しにWikipediaをインストールしてみたいと思います。アプリのアイコンをタップするとアプリの詳細画面が開きます。


     右上の"Free"ボタンを押すと確認ダイアログが表示されます。OKを押すとアプリがインストールされます。


     インストールが完了するとホームにショートカットが作成されます。


     アプリを起動するとFirefox Auroraが立ち上がって、該当のアプリが表示されます。


    まとめ

     簡単にFirefox MarketplaceからFirefox OSアプリケーションをインストールする事が出来ました。実際に実機でアプリケーションを動かす事が出来るのはいいですね。但し、実機で動かす事が出来るのはFirefox Marketplaceにリリースされているアプリケーションだけで、自分で作ったアプリを実機で動かすといった事はまだ出来ないようです。仕組みとしてはそんなに難しくないはずなのでいずれ開発中のアプリケーションをFirefox Auroraで動かすといった事も出来るようになるのではないかなと思います。

    Firefox MarketplaceをAndroid版Firefox Auroraで試す


     Firefox OSの日本語サイトにあるリンクからFirefox Marketplaceのページに行く事が出来ます。そこではAndroid版のFirefox Auroraのapkが配布されていて、実際に実機でFirefox Marketplaceを試す事が出来ます。本記事ではAndroid版Firefox Auroraのインストールから、実際にFirefox Marketplaceを使ってアプリケーションをインストールするまでの手順を解説します。Android端末を持っている方は是非試して見て下さい。


    Android版Firefox Auroraってなに?

     Firefoxは正式リリース版の他に、新機能等を早めに試す事が出来るプレビューリリース版が配布されています。 Beta版とAurora版の2つがあり、Aurora版はBeta版よりも最新の機能を試す事が出来る開発者向けのリリースです。このAurora版にFirefox Marketplaceが搭載されており、Firefox OS向けのアプリケーションをAndroid端末で試す事が出来ます。


    Android版Firefox Auroraをダウンロードする


     Firefox Marketplaceで"Marketplaceを試す≫"ボタンを押すとAndroid版Firefox Auroraのapkをダウンロードするリンクが表示されます。このリンクからapkファイルをダウンロードして下さい。執筆時点では"fennec-21.0a2.ja.android-arm.apk"をダウンロードする事が出来ました。


    Android版Firefox Auroraをインストールする

     apkをインストールする対象はエミュレータでも実機でも構いません。が、エミュレータの場合はFirefoxブラウザのアドオンでFirefox OS Simulatorがあるのであまり意味がないかなと思います。Firefox Auroraをインストールする方法は2つあります。adbコマンドで端末にインストールする方法と、端末で直接apkをダウンロードする方法です。開発環境が無い、あるいは構築が面倒な場合は端末で直接ダウンロードする方法でFirefox Auroraをインストールして下さい。

    adbコマンドでインストールする場合
     ターミナルでapkをダウンロードしたディレクトリに移動し、adb installコマンドを実行します。
    cd "apkをダウンロードしたディレクトリ"
    adb install -r fennec-21.0a2.ja.android-arm.apk

    端末から直接ダウンロードする場合
     まず端末でFirefox Marketplaceを開いて下さい。

     ダウンロードのリンクが現れるので、apkをダウンロードして下さい。ダウンロード後、apkを実行するとインストール出来ます。


    Firefox Marketplaceからアプリケーションをインストールする

     無事apkをインストールする事が出来たでしょうか?ではFirefox Marketplaceを開いて実際にアプリをインストールしてみましょう。


     インストールしたFirefox Auroraを起動するとトップ画面が開かれます。


     メニューを開いて「ツール」を選択します。(画像はGoogle Nexusです。端末にハードのメニューボタンがある場合はそちらを押下して下さい。)


     ツールの一覧の「アプリ」を選択します。


     アプリケーション管理画面が現れます。"マイアプリ"の右側のマーケットのアイコンからFirefox Marketplaceを開くことが出来ます。


     Firefox Marketplaceを開くと上部にピックアップされたアプリが表示されます。スクロールしていくとカテゴリを選択する事が出来ます。


     試しにWikipediaをインストールしてみたいと思います。アプリのアイコンをタップするとアプリの詳細画面が開きます。


     右上の"Free"ボタンを押すと確認ダイアログが表示されます。OKを押すとアプリがインストールされます。


     インストールが完了するとホームにショートカットが作成されます。


     アプリを起動するとFirefox Auroraが立ち上がって、該当のアプリが表示されます。


    まとめ

     簡単にFirefox MarketplaceからFirefox OSアプリケーションをインストールする事が出来ました。実際に実機でアプリケーションを動かす事が出来るのはいいですね。但し、実機で動かす事が出来るのはFirefox Marketplaceにリリースされているアプリケーションだけで、自分で作ったアプリを実機で動かすといった事はまだ出来ないようです。仕組みとしてはそんなに難しくないはずなのでいずれ開発中のアプリケーションをFirefox Auroraで動かすといった事も出来るようになるのではないかなと思います。
    Related Posts Plugin for WordPress, Blogger...