onsen ui（AngularJSベース）のアプリケーション開発環境を構築


- [前回の ionic の環境構築](http://qiita.com/hkusu/items/a9d5908ede11110acb88)に続いて、今度は onsen ui の開発環境を構築したメモです。 
	- onsen ui の公式ページ：http://onsenui.io
	- GitHub：https://github.com/OnsenUI/OnsenUI
- 今回も、公式ページにあるような Monaca 等からの利用ではなく、単純にスマホWEBサイト（非ネィティブアプリ）でUIライブラリとして利用することを想定しています。

# デモ

- 公式で提供のサンプルを参考に、さくっと作ってみました。手順とソースは後で説明しますが、どんなもんか参考にしてください。ちなみにこれぐらいであれば、JavaScriptを一行も書かずに出来ました^^
	- 今回も GitHub Pages に載せてます。
	- ファイルは minify していません
	- onsen ui のモバイル対応ブラウザは『iOS 6+, Android2.3.4+』とのことです。
- デモURL
	- iOSテーマ
		- タブ版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-tab.html
		- スライドメニュー版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-sd.html
	- Androidテーマ
		- タブ版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-tab.html
		- スライドメニュー版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-sd.html
		- スライドメニューってAndroidでなじみあるかしら？と疑問を持ちつつ..

# 環境構築にあたって

- Yeoman のテンプレートがあるかなと思い探したのですが、いま現在（2014/3/17）では無いみたい。
- Bower には対応していたので（これ公式？）、onsen ui 自体は Bower でインストール

# 手順

- `app` ディレクトリを作成し配下へ移動

```
$ mkdir app
$ cd app
```

- Bower で onsen ui をインストール

```
$ bower install onsenui --save
```

すると onsen ui と AngularJS がインストールされます。

![スクリーンショット 2014-03-17 12.23.00.png](https://qiita-image-store.s3.amazonaws.com/0/35733/ec3b8b83-d38b-8dab-f85c-c1b9a6135ab5.png "スクリーンショット 2014-03-17 12.23.00.png")

- スクリプト用(.js)、CSS用(.css)、Viewyou(.html)用のディレクトリを作成
	- ここは好みだと思うので、自由でいいです。

![スクリーンショット 2014-03-17 12.26.20.png](https://qiita-image-store.s3.amazonaws.com/0/35733/aa34efb5-adeb-1578-46cc-cffd2422967f.png "スクリーンショット 2014-03-17 12.26.20.png")

- 最小構成で動作確認するのに最低限必要なのは、`app/index.html` と `app/scripts/app.js` です。次のように用意（[公式](http://onsenui.io)からダウンロードできるサンプルソースを参考にしました）。

```html:app/index.html
<!doctype html>
<html lang="ja" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>My App</title>

    <link rel="stylesheet" href="bower_components/onsenui/build/css/onsenui.css">
    <link rel="stylesheet" href="bower_components/onsenui/build/css/topcoat-mobile-onsen-ios7.css">
    <link rel="stylesheet" href="styles/app.css"/>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/onsenui/build/js/onsenui.js"></script>
    <script src="scripts/app.js"></script>
</head>

<body>

<ons-screen>
    <ons-navigator title="Page">
        <ons-page class="center">
            <h1>Page Content</h1>
        </ons-page>
    </ons-navigator>
</ons-screen>

</body>
</html>
```

```javascript:app/scripts/app.js
(function(){
	'use strict';
	angular.module('myApp', ['onsen.directives']);
})();
```

- 最低限は上記で動くはずなので、動作確認。WebStormでプレビューしてみます（なければ Grunt を使うか、もしくは `index.html` をブラウザへドラッグ）

![スクリーンショット 2014-03-17 12.58.56.png](https://qiita-image-store.s3.amazonaws.com/0/35733/6c11034e-7190-4a8d-06c7-ab3d391067be.png "スクリーンショット 2014-03-17 12.58.56.png")

# 動作確認が終わったら

- 公式のドキュメントやサンプルソースを参考に、自分用のアプリケーションを作成していってください。下記は私がサンプルソースやドキュメントを参考に作ってみたデモです。
	- iOSテーマ
		- タブ版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-tab.html
		- スライドメニュー版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-ios-sd.html
	- Androidテーマ
		- タブ版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-tab.html
		- スライドメニュー版：http://hkusu.github.io/AngularJS_onsenui_demo/app/index-android-sd.html
	- ソースはこちら（GitHub）
		- https://github.com/hkusu/AngularJS_onsenui_demo
- マークアップしていく為の参考URL
	- http://onsenui.io/docs/
	- http://onsenui.io/themes/
	- アイコンは [Font Awesome](http://fortawesome.github.io/Font-Awesome/)のが使えるようです。
- サンプルソース
	- 公式から7つのサンプルソースをブラウザダウンロードすることができます。
		- http://onsenui.io/guide/getting_started.html
	- 私の今回のソースもそのまま使い回してもらって構いません。大したものではないですが^^;

AnguraJSでスクリプト書いたりはできないのかな？未検証..

# 最後に

- まだ複雑なページは作っていませんが、情報コンテンツの提供をメインとした（つまり静的な閲覧させるだけの）スマホサイトであれば、上記のデモのようにテンプレートを作るだけでそれっぽいものが作れました^^
- ただ実機での確認や、カスタマイズがどれだけ出来るか未検証なので、それは今後みていこうかと思います。