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>

 

こちらはを使っています。いずれのファイルもJavaScriptの定義であったり、AngularJSの記述は一切ありません。

 

このファイルを開くと、次のように表示されます。

 

 

まさにスマートフォンアプリ風のUIになっているのが分かるかと思います。さらにons-tabbarの一番左のページがデフォルト表示になります。今回はpage2.htmlまでしか作っていませんが、タブ1とタブ2がタップで表示切り替えできる点も確認できるかと思います。

 


 

このように外部ライブラリへの依存性が減ったことで、自由度が高まったり、すでに多数あるJavaScriptフレームワークと組み合わせた開発ができるようになっています。Onsen UI 2.0は間もなく正式リリースになります。ぜひお試しください!

 

Onsen: HTML5 Hybrid App Framework & UI Components

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP