Onsen UI 2.0の紹介と始め方
ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれるUIフレームワークとして開発しているのがOnsen UIです。現在も開発が継続されており、間もなく2.0が正式リリースとなります（執筆時点でβ）。
特に大きな転換ポイントと言えるのが、AngularJSとの切り離しになります。そこで今回はOnsen UI 2.0の使い方を紹介します。
インストール方法は4つ
Onsen UIのインストール方法は主に4つ用意しています。いずれか使いやすいものを選んでください。
Node.js/npmを使う方法
Node.js/npmを使ってインストールする場合、次のようにコマンドを打ちます。
npm install onsenui@2.0.0-beta.7 --save // β版の現在の場合。
npm install onsenui --save // 2.0の正式版リリース後。現在は1.3系がインストールされます。
また、このままですと node_modules 以下に配置されて使いづらいので、browserifyをインストールします。
npm install -g browserify
そしてコードを書きます。例えばファイルを index.js とします。
require('onsenui');
// 自分のWebアプリケーションのコード
後は最後に browserify を実行します。
browserify index.js -o app.js
これで onsenuiが入った状態でJavaScriptコードが生成されます。JavaScript側ではapp.jsを読み込むようにすれば問題ありません。
Bowerを使う方法
BowerもNode.js/npm同様に進めることができます。Monaca IDEはBowerを使ったプロジェクトのインポートに対応 していますので、さらに手軽と言えそうです。ただしBower自体はnpmを使ってインストールします。
npm instlal bower -g
そしてアプリを開発するプロジェクトのルートで bower initを実行します。
bower init
次にOnsen UIをインストールします。現在はバージョンを指定する必要があります。
bower install onsenui#2.0.0-beta.7 --save
ファイルは bower_components/onsenui/ 以下にインストールされます。
ファイルをダウンロードする
3つ目はJavaScript/スタイルシートファイルを直接ダウンロードする方法です。Releases · OnsenUI/OnsenUI-distから最新版がダウンロードできます。解凍したフォルダの中にあるjs/cssフォルダを好きな場所に配置してください。
Monacaのテンプレートを使う
最後にMonacaのテンプレートを使う方法です。Monacaのプロジェクトテンプレートの中に、Onsen 2.0 クイックスタートというテンプレートを用意していますので、これを選択するという方法になります。これは予めOnsen UI 2.0が組み込まれていますので手軽にはじめることができます。
こちらがOnsen UI 2.0クイックスタートプロジェクトです。
Reactと組み合わせたデモも内包されています。
実際に使ってみる
では実際にOnsen UI 2.0を使ってみたいと思います。例えばHTMLは次のようになります。ファイル名は index.html とします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<title>Onsen UI 2.0 Quickstart</title>
<script src="node_modules/onsenui/js/onsenui.min.js"></script>
<link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
</head>
<body>
<ons-page>
</ons-page>
<ons-tabbar>
<ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
<ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
<ons-tab page="page3.html" label="Page 3" icon="square"></ons-tab>
<ons-tab page="page4.html" label="Page 4" icon="square"></ons-tab>
<ons-tab page="page5.html" label="Page 5" icon="square"></ons-tab>
</ons-tabbar>
</body>
見て分かる通り、onsenui.min.jsしかJavaScript側では読み込んでいません。スタイルシートはベースになるonsenui.cssと、各種コンポーネント用のonsen-css-components.cssを読み込んでいます。
bodyタグの中身は<ons-*>を使ったOnsen UIの定義になります。さらにpage1.htmlを次のような内容で作成します。
<h3 class = "title-h3">iOS Switch</h3>
<p>
<ons-switch></ons-switch>
</p>
<h3 class = "title-h3">Material Switch</h3>
<p>
<ons-switch modifier="material" checked></ons-switch>
</p>
こちらはヘッダーもなく、いきなりbodyタグ内の内容を記述します。さらにpage2.htmlを次のように定義します。
<ons-list>
<ons-list-header>Page 2</ons-list-header>
<ons-list-item>Item</ons-list-item>
<ons-list-item>Item</ons-list-item>
</ons-list>
こちらは
このファイルを開くと、次のように表示されます。
まさにスマートフォンアプリ風のUIになっているのが分かるかと思います。さらにons-tabbarの一番左のページがデフォルト表示になります。今回はpage2.htmlまでしか作っていませんが、タブ1とタブ2がタップで表示切り替えできる点も確認できるかと思います。
このように外部ライブラリへの依存性が減ったことで、自由度が高まったり、すでに多数あるJavaScriptフレームワークと組み合わせた開発ができるようになっています。Onsen UI 2.0は間もなく正式リリースになります。ぜひお試しください！
