Asial Blog

Recruit! Asialで一緒に働きませんか?

Onsen UI 2.0の紹介と始め方

カテゴリ :
Monaca
タグ :
JavaScript
Onsen UI

ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれるUIフレームワークとして開発しているのがOnsen UIです。現在も開発が継続されており、間もなく2.0が正式リリースとなります(執筆時点でβ)。



特に大きな転換ポイントと言えるのが、AngularJSとの切り離しになります。そこで今回はOnsen UI 2.0の使い方を紹介します。



インストール方法は4つ



Onsen UIのインストール方法は主に4つ用意しています。いずれか使いやすいものを選んでください。



Node.js/npmを使う方法



Node.js/npmを使ってインストールする場合、次のようにコマンドを打ちます。



  1. npm install onsenui@2.0.0-beta.7 --save // β版の現在の場合。
  2. npm install onsenui --save // 2.0の正式版リリース後。現在は1.3系がインストールされます。

また、このままですと node_modules 以下に配置されて使いづらいので、browserifyをインストールします。



  1. npm install -g browserify

そしてコードを書きます。例えばファイルを index.js とします。




  1. require('onsenui');
  2.  
  3. // 自分のWebアプリケーションのコード

後は最後に browserify を実行します。



  1. browserify index.js -o app.js

これで onsenuiが入った状態でJavaScriptコードが生成されます。JavaScript側ではapp.jsを読み込むようにすれば問題ありません。



Bowerを使う方法



BowerもNode.js/npm同様に進めることができます。Monaca IDEはBowerを使ったプロジェクトのインポートに対応していますので、さらに手軽と言えそうです。ただしBower自体はnpmを使ってインストールします。



  1. npm instlal bower -g

そしてアプリを開発するプロジェクトのルートで bower initを実行します。



  1. bower init

次にOnsen UIをインストールします。現在はバージョンを指定する必要があります。



  1. 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 とします。



  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="apple-mobile-web-app-capable" content="yes" />
  6.     <meta name="mobile-web-app-capable" content="yes" />
  7.     <title>Onsen UI 2.0 Quickstart</title>
  8.     <script src="node_modules/onsenui/js/onsenui.min.js"></script>
  9.  
  10.     <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css" type="text/css" media="all" />
  11.     <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
  12. </head>
  13.  
  14. <body>
  15.   <ons-page>
  16.   </ons-page>
  17.   <ons-tabbar>
  18.   <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
  19.     <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
  20.     <ons-tab page="page3.html" label="Page 3" icon="square"></ons-tab>
  21.     <ons-tab page="page4.html" label="Page 4" icon="square"></ons-tab>
  22.     <ons-tab page="page5.html" label="Page 5" icon="square"></ons-tab>
  23.   </ons-tabbar>
  24. </body>

見て分かる通り、onsenui.min.jsしかJavaScript側では読み込んでいません。スタイルシートはベースになるonsenui.cssと、各種コンポーネント用のonsen-css-components.cssを読み込んでいます。



bodyタグの中身はを使ったOnsen UIの定義になります。さらにpage1.htmlを次のような内容で作成します。



  1. <h3 class = "title-h3">iOS Switch</h3>
  2. <p>
  3.   <ons-switch></ons-switch>
  4. </p>
  5. <h3 class = "title-h3">Material Switch</h3>
  6. <p>
  7.   <ons-switch modifier="material" checked></ons-switch>
  8. </p>

こちらはヘッダーもなく、いきなりbodyタグ内の内容を記述します。さらにpage2.htmlを次のように定義します。



  1. <ons-list>
  2.   <ons-list-header>Page 2</ons-list-header>
  3.   <ons-list-item>Item</ons-list-item>
  4.   <ons-list-item>Item</ons-list-item>
  5. </ons-list>

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



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





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






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



Onsen: HTML5 Hybrid App Framework & UI Components