ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれる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タグの中身は
- <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は間もなく正式リリースになります。ぜひお試しください！