Mozilla では、あなたが Web アプリを素早く書き始められるよう、必要な機能の大半を盛り込んだいくつかのテンプレートを提供しています。各テンプレートは、ビルドや展開を支援するツールを含む静的な Web プロジェクトとなっています。
これには以下のものが含まれます。
- 最小限の妥当な HTML 構造
- あらかじめ生成された
manifest.webapp - Marketplace とやりとりするための JavaScript ライブラリ
- JavaScript コードを組み立てるための require.js
- 自動ローカル開発・展開のための volo
- あらかじめ生成されたレイアウト (テンプレートの一部から)
公開されているテンプレートはすべて mortar レポジトリで参照できます。以下のテンプレートが公開されています。
- mortar-app-stub: 開発を始めるにあたって必要な基本的な者だけを含んだ空白のテンプレート
- mortar-list-detail: レイアウトライブラリを含み、list-detail レイアウトをあらかじめ用意
- mortar-game-stub: 入力と描画ループを処理する最小限の Web ゲームテンプレート
アプリのスタブテンプレートから始める
git を使って このレポジトリ からテンプレートを入手できます。
git clone https://github.com/mozilla/mortar-app-stub.git myapp
ただし、volo を使うことを推奨します。volo は自動プロジェクトのためのツールで、このテンプレートに良い効果をもたらすために使えますので、あらかじめインストールしておきましょう。先に ここ からダウンロードできる node.js が必要です。node.js をインストールしたら、以下のコマンドで volo をインストールします。(許可設定が十分でないために失敗する場合、コマンドの先頭に sudo を付ける必要があるかもしれません)
npm install -g volo
そして、volo の create コマンドを使います。この際、アプリを生成したいフォルダの名前と、mozilla/ の後に使いたい mortar テンプレートの名前を続けて指定します。
volo create myapp mozilla/mortar-app-stub
今後新しいテンプレートが公開されたら、その別のテンプレート URL で同じ create コマンドを使えます。
さて次は？
HTML、CSS、JavaScript はすべて www ディレクトリ以下にあります。さぁ、コーディングを始めましょう。ここには様々なものが生成されていますが、必要ないものは削除して構いません。
テンプレートは JavaScript の管理に require.js を使っています。www/js/app.js を開いてみれば、zepto のように、主要モジュールが定義され、いくつかのライブラリが読み込まれているのが分かるでしょう。Marketplace の JavaScript ライブラリも含まれていますが、これは アプリ内課金 と レシートの検証 を可能にするものです。アプリ内課金を行わない無料アプリを作る場合、これは必要ありません。
その下に、以下のような行が見つかるでしょう。
define(function(require) {
これはアプリの主要モジュールを定義するもので、コーディングはこの関数内で始めます。require を使って、zepto の読み込みと同様に、他のモジュールを読み込めます。モジュールに関して詳しく知りたいときは require.js API を参照してください。
注: 初期設定では、モジュールは www/js/lib から読み込まれます。 作業ディレクトリである www/js からコードを読み込みたい場合は、require('mylib') の代わりに require('./mylib') のような構文を使用します。
CSS は www/css/app.css で編集可能です。通常、別の CSS ファイルを読み込みたい場合は、<link> タグを使う代わりに、このファイルの先頭で @import しましょう。これにより、展開のためにビルドする際、volo optimizer がすべての CSS をインライン展開してくれます。
最後に、volo はいくつかの便利なコマンドを提供してくれています。
$ volo serve # ローカル開発サーバを起動する $ volo add <library> # JavaScript ライブラリを追加する $ volo build # アプリの最適化版を www-built へビルドする $ volo ghdeploy # ビルド版を github へ展開する (先にビルドする必要あり)
これらのコマンドはすべてプロジェクトのルートディレクトリで実行する必要があります。他にもいくつかのコマンドがあり、単に volo と入力することでその一覧を見ることができます。
注: volo 自体にはいくつかの組み込みコマンドしか備わっていません。アプリテンプレートが serve、build、ghdeploy、その他のコマンドを提供します。
チュートリアル
このテンプレートに関する詳細は 天気アプリチュートリアル を参照してください。このテンプレートを使って天気アプリを開発する方法を順を追って解説します。より具体的に volo のコマンドを紹介し、テンプレートについてより詳しく説明します。