[Middleman 3][AngularJS 1]ウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

今回はSPA（Single Page Application）を作るためにMiddlemanとBowerを使ったAngularJS環境を構築してみたいと思います。この環境をMiddlemanのSkeletonにすることで、同じような環境の構築を手軽に行えるようになります。

前回：ウェブデザイナーがはじめるAngularJS：SPA（Single Page Application）をはじめる前に

Middleman環境を用意する

Middlemanについて詳しい説明は省きますので詳しく知りたい方はこちらのシリーズをどうぞ。Middleman環境は前に自作したSkeletonをベースにします。解説はこちらに載せています。

Skeletonのインストール

UserRootに.middlemanフォルダを作り、middleman.skeletonをクローンしてきます。

$ mkdir ~/.middleman
$ cd ~/.middleman
$ git clone https://github.com/nukos/middleman.skeleton

Skeletonを使ってMiddlemanプロジェクトを作る

このSkeletonを使うにはrbenv, Bundler, rbenv-binstubsが必要です。詳しくは初めてのMiddleman：rbenv, bundler 環境でMiddlemanを使ったHello Worldを参照。

Skeletonを使ってMiddlemanプロジェクトを作成します。コマンドのmiddleman.skeleton.angularjsはディレクトリ名になります。--template=middleman.skeletonが先ほどインストールしたSkeletonのディレクトリ名です。

$ middleman init middleman.skeleton.angularjs --template=middleman.skeleton

プロジェクトができたら$ bundle installでモジュールをインストールします。
これでMiddleman環境の構築は終わりです。

Bowerを使ってAngularJSをロードする

初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードするを参考にBower環境を作ります。ここではすでにBower環境ができている前提で説明を進めます。

インストール先ディレクトリを指定する

.bowerrcというファイルを作り、パッケージのインストール先を指定します。

{
  "directory": "vendor/bower_components/"
}

パッケージをインストールする

パッケージはSearch Bower packagesから検索できます。今回インストールするパッケージはAngularJS（angular）本体とルーティングに必要なngRoute（angular-route）の2つです。

angular

$ bower install angular --save-dev
bower angular#*                 cached git://github.com/angular/bower-angular.git#1.3.13
bower angular#*               validate 1.3.13 against git://github.com/angular/bower-angular.git#*
bower angular#*                    new version for git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower angular#*               download https://github.com/angular/bower-angular/archive/v1.3.15.tar.gz
bower angular#*                extract archive.tar.gz
bower angular#*               resolved git://github.com/angular/bower-angular.git#1.3.15
bower angular#~1.3.15          install angular#1.3.15

angular#1.3.15 vendor/bower_components/angular

angular-route

$ bower install angular-route --save-dev
bower angular-route#*       not-cached git://github.com/angular/bower-angular-route.git#*
bower angular-route#*          resolve git://github.com/angular/bower-angular-route.git#*
bower angular-route#*         download https://github.com/angular/bower-angular-route/archive/v1.3.15.tar.gz
bower angular-route#*          extract archive.tar.gz
bower angular-route#*         resolved git://github.com/angular/bower-angular-route.git#1.3.15
bower angular-route#~1.3.15    install angular-route#1.3.15

インストールされるとbower.jsonに記録されます。

{
  "name": "middleman.skeleton.angularjs",
  "version": "1.0.0",
  "authors": [
    "Nuko's Kitchen"
  ],
  "main": "index.js",
  "license": "MIT",
  "homepage": "http://whiskers.nukos.kitchen",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "angular": "~1.3.15",
    "angular-route": "~1.3.15"
  }
}

Sprocketsを設定する

Sprocketsを使ってMiddlemanのアセットパイプラインを使えるようにします。config.rbに以下の設定を追記します。

########################
#
# Sprockets setting
#
########################
after_configuration do
  sprockets.append_path '../vendor/bower_components'
  sprockets.append_path '../vendor/bower_components/angular'
  sprockets.append_path '../vendor/bower_components/angular-route'
end

この設定で、JavaScriptファイルからアセットパイプラインを使ってAngularJSをロードできるようになります。

アセットパイプラインを使ってAngularJSをロードする

あとはアセットパイプラインを使ってAngularJSをロードするだけです。Skeletonにもともと用意されていたassets/js/script.jsにアセットパイプラインの指定を追加します。

//= require "angular.min"
//= require "angular-route.min"

...

layouts/layout.erbに<html ng-app>を加えます。

<!DOCTYPE html>
<html ng-app>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= site_title %></title>
<meta charset="utf-8">
<meta name="keywords" content="<%= site_keywords %>">
<meta name="description" content="<%= site_description %>">
<meta name="author" content="<%= site_author %>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= stylesheet_link_tag 'style' %>
<%= javascript_include_tag 'script' %>
</head>
<body>

<%= yield %>

</body>
</html>

最後にindex.html.erbにAngularJSのサンプルを加えて動作を確認します。

<div>
  <label>Name:</label>
  <input type="text" ng-model="yourName" placeholder="Enter a name here">
  <hr>
  <h1>Hello {{yourName}}!</h1>
</div>

サーバーを起動してhttp://localhost:4567/にアクセスし表示されるサンプルが動作していれば成功です。

$ middleman server

あとはREADME.mdを調整してgithubにリポジトリを作っておけば使い回しできるようになります。
作成したサンプルはgithub: Middleman-AngularJS-Skeletonに上げておきました。

次回、ngRouteを使ってルーティングを試してみたいと思います。

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

ウェブデザイナーがはじめる AngularJS シリーズウェブデザイナーがはじめるAngularJS：MiddlemanとBowerで作るAngularJSアプリ開発環境