Yeoman の AngularJSテンプレに Mobile Angular UI を組み込む


`Mobile Angular UI` はその名のとおり、AngularJS ベースの、モバイル向けUIフレームワークです。

> ライブラリの紹介ページ：http://mobileangularui.com/
> 使い方などのドキュメント：http://mobileangularui.com/docs/

こちらでデモが見れます。

> デモページ：http://mobileangularui.com/demo/

今回は Yeoman の AngularJS テンプレートに `Mobile Angular UI` を組み込んでみたので、その方法について書きます。

# 前提

- 開発環境 は Mac OS X (Mavericks)とします。
- Yeoman と Yeoman の generator-angular を使います。
	- もしまだ入ってなければ、次のようにセットアップしてください。

		```shell
		$ npm install -g yo grunt-cli bower
		$ npm install -g generator-angular
		```

	- 上記でもし npm コマンドがなければ、Homebrew か何かで Node.js をインストールしてください。

		```shell:Homebrewでインストールする場合の例
		$ brew install node
		```

# 導入手順

### ① まず、Yeoman で AngularJS アプリケーションの雛型を作成します。

次のようににコマンドを実行。

```shell
$ yo angular --minsafe
```

次のように聞かれますが、

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-16.43.32.png)

紹介ページをみると `ngRoute` は必要らしいので、それだけ残し、それ以外は競合すると面倒そうなので外しておきます。

雛型の生成が終わると、次のような構成になっているはずです。

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-16.49.45.png)

### ② Bower で Mobile Angular UI をいれます。

```shell
$ bower install mobile-angular-ui --save
```

インストールが終わると、次のような構成になっているはずです。
（なんか Bootstrap や jQuery ほか追加されているけど、内部で使ってるのかな？）

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-16.55.25.png)


### ③ index.html から Mibile Angular UI の CSS と JavaScript を読み込みます。

- CSS
	- `mobile-angular-ui-base.min.css` を追加

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-20.01.57.png)

- JavaScript
	- `mobile-angular-ui.min.js` を追加

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-19.07.39.png)

### ④ AngularJS に Mobile Angular UI を組み込みます。

`app.js` で `mobile-angular-ui` を追加。

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-16.57.26.png)

### ⑤ いったん、ここで動作確認してみます。

ローカルサーバを起動します。

```shell
$ grunt serve
```

次のように表示されれば、とりあえず AngularJS の動作確認はOKです。

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-17.13.53.png)

### ⑥ 次に、Mobile Angular UI のサンプルを表示してみます。

- もともと `app/styles/main.css` に記載されている AngularJS テンプレートの内容は消して空にします。

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-17.21.30.png)

- AngularJS テンプレートでのメインページは `app/views/main.html` です。このファイルに `Mobile Angular UI` のライブラリに含まれているデモページのソースを張りつけてみます。
	- 今回は `forms.html` の中身を張りつけました。

		![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-19.14.56.png)

- 次のように表示されればOKです。

	![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-07-31-19.13.22.png)

[実際に動かせるサンプルはこちら (GitHub Pages)](http://hkusu.github.io/AngularJS_mobileUI_demo/)


# 感想

まだ提供されている機能が少ないので、いま時点では Twitter BootStrap 等を使って自分で書いた方が早いかも。
またどうせCSSフレームワークを使うなら、[ionic](http://ionicframework.com/) や [Onsen UI](http://onsenui.io/) のようなモバイル用CSSフレームワークの方が、いま時点では機能が豊富かと思います。

# ほか

- 今回のソースは GitHub に置いておきます⇒https://github.com/hkusu/AngularJS_mobileUI_demo
- ionic と Onsen UI の導入方法については、以前に書いたので宜しければ参考にしてください。
	- [ionic（AngularJSベース）のアプリケーション開発環境を構築](http://qiita.com/hkusu/items/a9d5908ede11110acb88)（Qiita）
	- [onsen ui（AngularJSベース）のアプリケーション開発環境を構築](http://qiita.com/hkusu/items/664d025eec9f316d7270)（Qiita）