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

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

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーを使った処理について紹介します。

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

• Bower
• hifive
• Onsen UI
• jQuery

インストール

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

https://gist.github.com/a1720598bfa48a54e1735b8cb914b439

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

https://gist.github.com/a6a52582cbca4e67418ca2398ebac374

index.htmlの作成

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

https://gist.github.com/b4b6c75af86b1350308b66b497a1bbf6

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIでタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。

https://gist.github.com/a78ddec4ba998bf5e32ec356aac74397

tab1.htmlの作成

今回は簡単に次のようなページを作成します。html、head、bodyタグなどは不要です。

https://gist.github.com/c37a8287cdf64f2ece34a2785630c5f3

tab2.htmlの作成

tab1.htmlと同様に簡易的な内容で作成します。

https://gist.github.com/587211b46494109a5c028c8b9d2b083d

hifiveの実装

今回、コントローラは最低限としています。

https://gist.github.com/904fdbffea5c8964f0ea3930c339e926

そしてコントローラ化するのは document.addEventListener の init イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。

https://gist.github.com/0178782c913baca176f8c4a7f6fb8eb6

これだけで画面遷移と、それぞれのコントローラによるイベント管理が実現できます。

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

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