気軽にAngularJSを試してその成果をGitHub Pagesで公開しちゃおう☆

この記事は以下の読者を対象としています。

- AngularJSを使ってみたいけど何から始めていいのかわからない
- Gruntが便利なことは知ってるけど何をどう設定すればいいの？

## AngularJSを試してみよう
AngularJSを体験するために今回は[yeoman](http://yeoman.io/)というツールを使うよ。これでAngularJSを使ったアプリを簡単に試せるんだ。まずはインストールから始めよう。

### 諸々のツールをインストールする
#### npm
みんなのパソコンにはnpmは入ってるかな？yeomanを使うには必須のツールだよ！コマンドラインを開いて以下のコマンドを実行して、バージョン番号っぽい数字が表示されればOKだよ。

```
npm -v
```

入ってなかったキミは、[node.jsをmacにさくっと入れてみる【n番煎じ】](http://qiita.com/YukiAsu/items/00d2e2b23ea054a2ed6e)を参考にインストールしてみてね！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のデータバインディングを使ってみた。

```javascript:app/scripts/main.js
'use strict';

angular.module('hogeApp')
  .controller('MainCtrl', function ($scope) {
    $scope.favorites = [
      'sushi',
      'yakiniku',
      'melon'
    ];
  });
```

```html:app/views/main.html
<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',`の部分は自分のユーザー名とリポジトリ名に書き換えてね。

```:javascript:Gruntfile.js
    // 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'
        }
      }
    }
```

上のコードを書き終わったら以下のコマンドを上から順にコマンドラインで実行してね。

1. `npm install grunt-build-control --save-dev`
1. `git init`
1. `grunt build`
1. `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のリポジトリ名\> にアクセスして確認してみよう！