必要な環境:
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し、大分ややこしいですね。今回のmortar-app-stubだと複雑な構造ながら特にjs周りでは何もやっていません。javascriptによって画面の操作などを行う場合は、js/app.jsに書いて行くことになります。RequireJSを使ってわざわざ色んなファイルを段階的に読み込むのは、index.htmlに記述するであろう他のscriptタグ等と競合しない為です。js/app.js内に記述した変数や処理等はindex.html内の他のscriptからは見えませんし、操作も出来ません。これによってscript間の衝突を防ぎます。この辺りはCommonJSのModules/AsynchronousDefinition(AMD)で定義されています。CommonJSはjavascriptでのアプリケーション作成(サーバサイド含む)の為の標準仕様を策定する為のプロジェクトです。
js/lib/receiptverifier.jsとjs/install-button.jsを読み込んでいる
他のテンプレート
本当はそれぞれの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テンプレートについては新しくなったらまたエントリにまとめたいと思います。参考
記載されている会社名、および商品名等は、各社の商標または登録商標です。
0 コメント:
コメントを投稿