hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（ビュー）

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はejsと組み合わせた表示更新について紹介します。

利用するソフトウェア/ライブラリ

• Bower
• hifive
• Onsen UI
• jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。時刻を表示する部分はejsの埋め込みになっています。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

hifiveの作成

次にhifiveの処理です。まず画面を読み込んだ時のイベント document.addEventListener init 時において、コントローラ化とデータを渡します。渡すデータとして、ページ情報と画面に適用される変数を渡します。

そしてコントローラの初期化時において、テンプレートをダイナミックに定義します。 page.id は app になりますので、テンプレート名は app となります。そして、 #app に対してテンプレートID app の内容を反映します。

後はボタンを押したタイミングなどでも同様に画面に反映できます。

こうすることでボタンを押すと時間が更新される仕組みができあがります。

---

このようにテンプレートを使うことで画面の細かい表示を気にすることなくデータの変更と反映ができるようになります。なお、hifiveではデータバインディングによって変数を変更するだけで画面を更新する仕組みもあります（若干処理が複雑になるので今回は止めました）。

デモコードはhifiveWithOnsenUI/view at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。