hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（ビュー）
Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。
そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はejsと組み合わせた表示更新について紹介します。
利用するソフトウェア/ライブラリ
- Bower
- hifive
- Onsen UI
- jQuery
インストール
まず各ライブラリをインストールします。インストールはBowerを使って行います。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ bower install hifive jquery onsenui –save |
今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "directory": "public/components" | |
| } |
index.htmlの作成
次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title></title> | |
| <meta charset="utf-8" /> | |
| <meta name="description" content="" /> | |
| <meta name="author" content="" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="components/onsenui/css/onsenui.min.css" /> | |
| <link rel="stylesheet" href="components/onsenui/css/onsen-css-components.min.css" /> | |
| <!–[if lt IE 9]> | |
| <script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> | |
| <![endif]–> | |
| <link rel="shortcut icon" href="" /> | |
| </head> | |
| <body> | |
| <script src="components/onsenui/js/onsenui.js"></script> | |
| <script src="components/jquery/dist/jquery.min.js"></script> | |
| <script src="components/hifive/ejs-h5mod.js"></script> | |
| <script src="components/hifive/h5.dev.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
Onsen UIの記述
bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ons-navigator swipeable id="nav" page="app.html"></ons-navigator> |
app.htmlの作成
そしてapp.htmlを作成します。#appを忘れずに付けておきます。時刻を表示する部分はejsの埋め込みになっています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ons-page id="app"> | |
| <p style="text-align: center;"> | |
| 現在の時刻は<br /> [%= time.toUTCString() %] <br />です。 | |
| </p> | |
| <ons-button id="btn">更新</ons-button> | |
| </ons-page> |
この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。
hifiveの作成
次にhifiveの処理です。まず画面を読み込んだ時のイベント document.addEventListener init 時において、コントローラ化とデータを渡します。渡すデータとして、ページ情報と画面に適用される変数を渡します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('init', (event) => { | |
| const page = event.target; | |
| switch (page.id) { | |
| case 'app': | |
| h5.core.controller('body', helloController, { | |
| data: { | |
| options: { | |
| time: new Date() | |
| }, | |
| page: page | |
| } | |
| }); | |
| break; | |
| } | |
| }); |
そしてコントローラの初期化時において、テンプレートをダイナミックに定義します。 page.id は app になりますので、テンプレート名は app となります。そして、 #app に対してテンプレートID app の内容を反映します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const helloController = { | |
| __name: 'HelloController', | |
| __ready(context) { | |
| const page = context.args.data.page; | |
| const options = context.args.data.options; | |
| this.view.register(page.id, page.innerHTML); | |
| this.view.update('#app', page.id, options); | |
| }, | |
| '#btn click'() { | |
| } | |
| }; |
後はボタンを押したタイミングなどでも同様に画面に反映できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const helloController = { | |
| __name: 'HelloController', | |
| // : | |
| '#btn click'() { | |
| this.view.update('#app', 'app', { | |
| time: new Date() | |
| }); | |
| } | |
| }; |
こうすることでボタンを押すと時間が更新される仕組みができあがります。
このようにテンプレートを使うことで画面の細かい表示を気にすることなくデータの変更と反映ができるようになります。なお、hifiveではデータバインディングによって変数を変更するだけで画面を更新する仕組みもあります（若干処理が複雑になるので今回は止めました）。
デモコードはhifiveWithOnsenUI/view at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。
Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。
hifive開発者ブログ 
コメントは受け付けていません。