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

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

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のデータバインディングを使ってみた。

app/scripts/main.js

'use strict';

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

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

    // 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のリポジトリ名> にアクセスして確認してみよう！