backbone-boilerplateではじめるHTML5アプリケーション開発
JavascriptをベースにしたHTML5アプリケーションを初めて開発するとき、まず、アプリケーションの基盤をどのように構築すればよいか悩む人もいるのではないでしょうか。
かくいう私も悩みました。
プロジェクトの構成はどうするか、フレームワーク(MVCとか)、テストとか、ビルド、CIなど‥
もし、MVCフレームワークにBackbone.jsの利用を考えているなら、backbone-boilerplateを利用してみるのが良いと思います。
https://github.com/backbone-boilerplate/backbone-boilerplate
これは、Backbone.jsを利用したアプリケーションテンプレートで、Backbone, Underscore(Lo-Dash), jQuery, RequireJS などのJavascriptフレームワークを組み込んだアプリケーションの雛形を提供してくれます。
さらに、gruntを利用したビルドや、Mocha + Chai, Jasmineのようなテストフレームワークを利用したテストも組み込まれています。
また、HTML5サイトを構築するためのテンプレートである html5-boilerplate をベースにしています。
2012/1月頃に登場したboilerplateですが、頻繁に更新されていて、Javascriptアプリケーション開発の最新のノウハウが入っていると思います。
セットアップ
利用するためには、node.jsが必要なので、あらかじめインストールします。
backbone-boilerplateのREADMEに記載のとおりに、コマンドを実施します。
1. githubからクローンするか、zipをダウンロードして展開
git clone --depth 1 https://github.com/backbone-boilerplate/backbone-boilerplate
【2014/7/14追記】
※2014/6/24 にbackbone-boilerplateがアップデートされました。
本記事執筆時のbackbone-boilerplateを取得する場合、以下のようにしてください。
git clone https://github.com/backbone-boilerplate/backbone-boilerplate
git checkout c698a5482b2ee7369d4972bfa3faed8f8709ea1b
2. フォルダ名を変更
mv backbone-boilerplate my-project
3. カレントディレクトリを移動
cd my-project
4. 以下のようにコマンド入力
npm install -g grunt-cli bower
npm install -g coveralls
npm install
bower install
利用方法
アプリケーションをローカルPC上で動作させるには、以下のように、gruntタスクを実行します。
grunt server
ブラウザで、http://127.0.0.1:8000/ にアクセスするとアプリが動作します。
ただ、デフォルトだと、以下のように、index.html内にコンテンツが無いので、画面には何も表示されませんが・・
<body> <!-- Application container. --> <main role="main" id="main"></main> <!-- Application source. --> <!-- build:[src] /source.min.js --> <script data-main="/app/main" src="/vendor/bower/requirejs/require.js"></script> <!-- /build --> </body>
テストを実行する
以下のように実行します。
grunt karma:run
テストが実施され、test/coverageフォルダにカバレッジレポートが出力されます。
カバレッジレポートは、デフォルトでは、lcovの形式になっていて、以下のパスに、レポート参照用のindex.htmlが出力されます。
test/coverage/PhantomJS 1.9.7 (Windows 7)/lcov-report/index.html
JenkinsのようなCI環境でレポートをカバレッジレポートを表示したい場合は、coberturaの形式でカバレッジレポートを出力させることもできます。
Gruntfile.jsファイルの以下の箇所を、'lcov'から'cobertura'に変更します。
coverageReporter: {
type: "cobertura",
dir: "test/coverage"
},
以下のパスに、cobertura-coverage.xml が出力されます。
test/coverage/PhantomJS 1.9.7 (Windows 7)/cobertura-coverage.xml
backbone-boilerplateを利用することで、JavascriptベースのHTML5アプリケーションに慣れていない人でも、プロジェクト構成やフレームワーク、ビルドなどを、ひととおりおさえることができます。
ただ、このbackbone-boilerplateには、アプリケーションのサンプルソースが含まれていません。
このboilerplateを利用したサンプルアプリは、別途githubで公開されているため、そちらを参照する必要があります。
https://github.com/tbranyen/github-viewer
backbone-boilerplateについては、今後もブログを書いていきたいと思います。
