この記事は以下の読者を対象としています。
- AngularJSを使ってみたいけど何から始めていいのかわからない
- Gruntが便利なことは知ってるけど何をどう設定すればいいの?
AngularJSを試してみよう
AngularJSを体験するために今回はyeomanというツールを使うよ。これでAngularJSを使ったアプリを簡単に試せるんだ。まずはインストールから始めよう。
諸々のツールをインストールする
npm
みんなのパソコンにはnpmは入ってるかな?yeomanを使うには必須のツールだよ!コマンドラインを開いて以下のコマンドを実行して、バージョン番号っぽい数字が表示されればOKだよ。
npm -v
入ってなかったキミは、node.jsをmacにさくっと入れてみる【n番煎じ】を参考にインストールしてみてね!MacでもLinuxでも大丈夫だよ!
gruntとbower
npmが入ったらgruntとbowerも入れておこう。最近のWebアプリ開発では知っておいた方がいいツールだよ。npmが入っていれば以下のコマンドでインストールできるからね。
npm install -g grunt-cli bower
compass
今回はSassも含まれているのでgemをインストールしておこう。
gem install compass
yeoman
以下のコマンドを実行してね!yeoman本体とAngularJS用のgenerator-angularが入るよ。
npm install -g yo && npm install -g generator-angular
yeomanでアプリを生成する
先に、アプリを作成するディレクトリに移動しておこう。そうしたら以下のコマンドを実行だ!
yo angular
yeomanおじさんのAAが表示されたらうまくいってて、選択肢(Sassを使う?など)は全てYesでOKだ。
_-----_
| |
|--(o)--| .--------------------------.
`---------´ | Welcome to Yeoman, |
( _´U`_ ) | ladies and gentlemen! |
/___A___\ '__________________________'
| ~ |
__'.___.'__
´ ` |° ´ Y `
Out of the box I include Bootstrap and some AngularJS recommended modules.
[?] Would you like to use Sass (with Compass)? Yes
[?] Would you like to include Twitter Bootstrap? Yes
[?] Would you like to use the Sass version of Twitter Bootstrap? Yes
[?] Which modules would you like to include? angular-resource.js, angular-cookies.js, angular-sanitize.js, angular-route.js
ここでディレクトリの中をみてほしい。Gruntfile.jsやbower.jsonなどが生成されていることがわかる。
AngularJSを体験してみる
ここまででAngularJSを体験する準備はできている。以下のコマンドを使うとブラウザが立ち上がるよ。
grunt serve
ちょっと書き足してみよう
生成されたHTMLやJavaScriptはAngularJSっぽいことをあまりしていないので自分で書き足してみよう。下記ではAngularJSのデータバインディングを使ってみた。
'use strict';
angular.module('hogeApp')
.controller('MainCtrl', function ($scope) {
$scope.favorites = [
'sushi',
'yakiniku',
'melon'
];
});
<div>
I like <span ng-repeat="f in favorites">{{ f }}<span ng-show="!$last">, </span></span> ( ♥ᴗ♥ )
</div>
コードを書き換えたらそのままブラウザを見てみよう。表示内容が更新されているはずだ。これはgrunt serve
の効果だ。いろいろ自分好みにコードを書き換えてみたら、次はGitHub Pagesにアップロードしてみよう。
GitHub Pagesで公開しちゃおう
GitHub Pagesへの公開は、yeoman標準では用意されていないので自分で作る必要があるよ。
まずはGitHubにリポジトリを作っておいてね。割り振られるURLはhttp://<GitHubのユーザー名>.github.io/<GitHubのリポジトリ名>になるよ。
次にGruntfile.jsにbuildcontrolを追加してね。下記みたいにkarmaの下に書き足そう。
remote: 'git@github.com:<GitHubのユーザー名>/<GitHubに作ったリポジトリ名>.git',
の部分は自分のユーザー名とリポジトリ名に書き換えてね。
// Test settings
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
buildcontrol: {
options: {
dir: 'dist',
commit: true,
push: true,
message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%'
},
pages: {
options: {
remote: 'git@github.com:<GitHubのユーザー名>/<GitHubに作ったリポジトリ名>.git',
branch: 'gh-pages'
}
}
}
上のコードを書き終わったら以下のコマンドを上から順にコマンドラインで実行してね。
npm install grunt-build-control --save-dev
git init
grunt build
grunt buildcontrol:pages
最後のコマンドを実行するとGitHub Pagesへのデプロイが始まるよ。
$ grunt buildcontrol:pages
Running "buildcontrol:pages" (buildcontrol) task
Committing changes to gh-pages.
[gh-pages 7e321f5] Built hoge from commit (unavailable) on branch master
1 file changed, 1 insertion(+), 1 deletion(-)
Pushing gh-pages to git@github.com:grapswiz/trial-and-error.git
To git@github.com:grapswiz/trial-and-error.git
2f5f109..7e321f5 gh-pages -> gh-pages
Done, without errors.
Execution Time (2014-04-09 15:49:50 UTC)
buildcontrol:pages 14.4s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 100%
Done, without errors.
が表示されればデプロイ成功!
http://<GitHubのユーザー名>.github.io/<GitHubのリポジトリ名> にアクセスして確認してみよう!