bowerを用いてMaterial DesignなAngularJSアプリを書き始めるに至るまで

(10/6 フォントに関する追記あり。)

----

AngularJSのアプリケーションを作りたいけど、デザインも今っぽくしたいのでマテリアルデザインにしたい。そこで、Angular Materialを使う、という話。

Angular Materialのページは下記の通り。

https://material.angularjs.org

前提条件は、node.jsとgitクライアントがインストールされていること

# bowerをインストール

bowerはフロントエンド開発に必要なパッケージをインストールしてくれるという優れもの。

bowerについては、こちらの記事が詳しい。

http://qiita.com/oreo3@github/items/eb790fc091aa28af8d33

インストールは下記の通り。

````
npm install bower -g
````

-gオプションがあればグローバルインストール、なければカレントディレクトリにインストールされる。
グローバルインストールすれば、プロジェクトに関わらずbowerが使えるようになるので、グローバルインストールすると良いと思う。


# ライブラリをインストール

Angular Materialを用いると、Material DesignなAngularアプリケーションが作れるので、このライブラリを使いたいと思う。

本当はAngular Materialを動かすためには、AngularJS本体に加えて、angular-animate、angular-ariaという追加のモジュールが必要なのだけど、bowerを使ってangular-materialをインストールするとそれらも一緒にインストールされて便利。

また、bower.jsonにパッケージ情報を含むことができる。bowerのある環境でbower.jsonを使ってパッケージをインストールすることができるので、リポジトリにはbower.jsonだけあれば、あとは開発者がbowerで各々環境を整えることが可能となる。便利。

あと、bowerを実行すると、実行したディレクトリの直下にbower_componentsというディレクトリが作成され、そこの下に色々インストールされる。なんとなくライブラリのインストール場所とbower.jsonの場所は分けたいので、.bowerrcというファイルを作って、そこでインストール先の設定なども書いちゃおうと思う。

.bowerrcについては、下記の記事が詳しい。
http://qiita.com/sys1yagi/items/0a7b13395cf5c16ecd57

## 開発用ディレクトリの作成と、.bowerrcの作成

とりあえず開発用ディレクトリを一つ作って、そこに.bowerrcを保存する。また、開発用ディレクトリ直下にpublicというディレクトリを作成する。.bowerrcの中身は、下記の感じで良いと思う。

````json
{
  "directory": "public/components",
  "json": "bower.json"
}
````

開発のための設定ファイル類は開発用ディレクトリ直下に、実際に公開するページはpublic以下に置くことを考える。そして、必要なライブラリはpublic/components以下に置けば、public以下をデプロイすればサイトが見られるということになる、というディレクトリ構成にした。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + [public]
````

## bower.jsonの作成

コマンドプロンプトを起動して、カレントディレクトリを開発用ディレクトリにする。その後、次のコマンドを打つ。

````
bower init
````

質問が表示されるが、とりあえず全ての質問をデフォルトで答えて良い。初期インストールするパッケージも何も選択肢なくて良い。Looks good?の質問に答えれば(単にエンターキーを押せば良い)、bower init実行時のディレクトリ直下にbower.jsonが作成される。

これで、開発用ディレクトリの直下にbower.jsonが作成された。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
````

## angular-materialのインストール

````
bower install angular-material --save
````

--saveオプションがあると、bower.jsonのdependenciesにangular-materialが追記される。ということは、このようなbower.jsonがある場所でbower installをすれば、やはりangular-materialがインストールされるということになる。チームで開発したり、開発用のマシンが複数あるときは便利。

また、いきなりangular-materialをインストールしても、必要なライブラリも落としてきてくれるので便利。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]
````


# なんか書いてみる

https://material.angularjs.org/0.11.2/#/getting-started

のコードをコピって来るのだけど、ちょっといろいろ手を加えないといけない…。

## hello.jsの作成

````javascript
var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
 
}]);
````

をhello.jsとして、public以下に保存する。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]
````


## hello.cssの作成

同様に

````css
.md-toolbar-tools h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: inherit;
}
````

をhello.cssとして、public以下に保存する。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]
````

## index.htmlの作成

とりあえず、htmlのソースを全コピーして、貼り付けてindex.htmlでpublic以下に保存。

あとは、body要素内に

````
<link rel="stylesheet" href="./hello.css">
````

を追加して、bodyの閉じタグのすぐ上に

````
<script src="./hello.js"></script>
````

を追加する。

これでとりあえず、ヘッダにHello Worldと書かれたページが表示される。

````
+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + index.html
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]
````

## index.htmlの修正

CDNからjsファイルやcssファイルを取ってきているところを、./components/以下のものから取ってくるように修正。

## もっとindex.htmlの修正

せっかくなので、もう少し動きのあるものを貼り付けたい。タブなんかが分かりやすくて良いと思う。

https://material.angularjs.org/0.11.2/#/demo/material.components.tabs

bodyタグの直下から、&lt;!-- Angular Material Dependencies --&gt;までを一気に消して、その代わりに、
次のソースをペーストする。

````html
<div ng-cloak>
  <md-content class="md-padding">
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Hello</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Hello, hello.</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>3 + 4 = {{3+4}}</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>
````

タブをクリックすると、クリックした場所から円が広がるアニメーションが表示されるし、Tab ThreeにはAngular式を入れておいた。ちゃんとAngularJSが動いていれば、3 + 4 = 7 と表示される。

# まとめ

bowerを使ってAngular Materialをインストールできた。とても便利。


# 追記(直しどころ)

https://material.angularjs.org/0.11.2/#/getting-started のソースは、Angular Materialの0.9.4に書かれたものなのでソースが古い。具体的にはフォントが古いので修正する。

フォントをRobotoDraftから、Robotoに変更する。

````
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
````

また、ブラウザの幅を小さくすることで、サイドナビゲーションの表示のon/offができるようになる。ブラウザの幅を変えると変化があるとは、気づかなかった…。