(10/6 フォントに関する追記あり。)
AngularJSのアプリケーションを作りたいけど、デザインも今っぽくしたいのでマテリアルデザインにしたい。そこで、Angular Materialを使う、という話。
Angular Materialのページは下記の通り。
前提条件は、node.jsとgitクライアントがインストールされていること
bowerをインストール
bowerはフロントエンド開発に必要なパッケージをインストールしてくれるという優れもの。
bowerについては、こちらの記事が詳しい。
インストールは下記の通り。
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の中身は、下記の感じで良いと思う。
{
"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]
なんか書いてみる
のコードをコピって来るのだけど、ちょっといろいろ手を加えないといけない…。
hello.jsの作成
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の作成
同様に
.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の修正
せっかくなので、もう少し動きのあるものを貼り付けたい。タブなんかが分かりやすくて良いと思う。
bodyタグの直下から、<!-- Angular Material Dependencies -->までを一気に消して、その代わりに、
次のソースをペーストする。
<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ができるようになる。ブラウザの幅を変えると変化があるとは、気づかなかった…。