Mobile Angular UI はその名のとおり、AngularJS ベースの、モバイル向けUIフレームワークです。
ライブラリの紹介ページ：http://mobileangularui.com/
使い方などのドキュメント：http://mobileangularui.com/docs/
こちらでデモが見れます。
今回は Yeoman の AngularJS テンプレートに Mobile Angular UI を組み込んでみたので、その方法について書きます。
前提
- 開発環境 は Mac OS X (Mavericks)とします。
-
Yeoman と Yeoman の generator-angular を使います。
-
もしまだ入ってなければ、次のようにセットアップしてください。
$ npm install -g yo grunt-cli bower $ npm install -g generator-angular -
上記でもし npm コマンドがなければ、Homebrew か何かで Node.js をインストールしてください。
Homebrewでインストールする場合の例$ brew install node
-
導入手順
① まず、Yeoman で AngularJS アプリケーションの雛型を作成します。
次のようににコマンドを実行。
$ yo angular --minsafe
次のように聞かれますが、
紹介ページをみると ngRoute は必要らしいので、それだけ残し、それ以外は競合すると面倒そうなので外しておきます。
雛型の生成が終わると、次のような構成になっているはずです。
② Bower で Mobile Angular UI をいれます。
$ bower install mobile-angular-ui --save
インストールが終わると、次のような構成になっているはずです。
（なんか Bootstrap や jQuery ほか追加されているけど、内部で使ってるのかな？）
③ index.html から Mibile Angular UI の CSS と JavaScript を読み込みます。
-
CSS
-
mobile-angular-ui-base.min.cssを追加
-
-
JavaScript
-
mobile-angular-ui.min.jsを追加
-
④ AngularJS に Mobile Angular UI を組み込みます。
app.js で mobile-angular-ui を追加。
⑤ いったん、ここで動作確認してみます。
ローカルサーバを起動します。
$ grunt serve
次のように表示されれば、とりあえず AngularJS の動作確認はOKです。
⑥ 次に、Mobile Angular UI のサンプルを表示してみます。
-
もともと
app/styles/main.cssに記載されている AngularJS テンプレートの内容は消して空にします。
-
AngularJS テンプレートでのメインページは
app/views/main.htmlです。このファイルにMobile Angular UIのライブラリに含まれているデモページのソースを張りつけてみます。-
今回は
forms.htmlの中身を張りつけました。
-
-
次のように表示されればOKです。
実際に動かせるサンプルはこちら (GitHub Pages)
感想
まだ提供されている機能が少ないので、いま時点では Twitter BootStrap 等を使って自分で書いた方が早いかも。
またどうせCSSフレームワークを使うなら、ionic や Onsen UI のようなモバイル用CSSフレームワークの方が、いま時点では機能が豊富かと思います。
ほか
- 今回のソースは GitHub に置いておきます⇒https://github.com/hkusu/AngularJS_mobileUI_demo
- ionic と Onsen UI の導入方法については、以前に書いたので宜しければ参考にしてください。