hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（タブバー）
Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。
そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーを使った処理について紹介します。
利用するソフトウェア/ライブラリ
- Bower
- hifive
- Onsen UI
- jQuery
インストール
まず各ライブラリをインストールします。インストールはBowerを使って行います。
| $ bower install hifive jquery onsenui –save |
今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。
| { | |
| "directory": "public/components" | |
| } |
index.htmlの作成
次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。
| <!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でタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。
| <ons-page> | |
| <ons-toolbar> | |
| <div class="center">ヘッダー</div> | |
| </ons-toolbar> | |
| <ons-tabbar swipeable position="auto"> | |
| <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active> | |
| </ons-tab> | |
| <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face"> | |
| </ons-tab> | |
| </ons-tabbar> | |
| </ons-page> |
tab1.htmlの作成
今回は簡単に次のようなページを作成します。html、head、bodyタグなどは不要です。
| <ons-page id="tab1"> | |
| <p style="text-align: center;"> | |
| This is the first page. | |
| <ons-button id="btn" modifier="large">ボタン</ons-button> | |
| </p> | |
| </ons-page> |
tab2.htmlの作成
tab1.htmlと同様に簡易的な内容で作成します。
| <ons-page id="tab2"> | |
| <p style="text-align: center;"> | |
| This is the second page. | |
| <ons-button id="btn" modifier="large">ボタン</ons-button> | |
| </p> | |
| </ons-page> |
hifiveの実装
今回、コントローラは最低限としています。
| const tab1Controller = { | |
| __name: 'Tab1Controller', | |
| '#btn click'() { | |
| ons.notification.alert('ここはタブ1です'); | |
| } | |
| }; | |
| const tab2Controller = { | |
| __name: 'Tab2Controller', | |
| '#btn click'() { | |
| ons.notification.alert('ここはタブ2です'); | |
| } | |
| }; |
そしてコントローラ化するのは document.addEventListener の init イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。
| document.addEventListener('init', (event) => { | |
| const page = event.target; | |
| switch (page.id) { | |
| case 'tab1': | |
| h5.core.controller('#tab1', tab1Controller); | |
| break; | |
| case 'tab2': | |
| h5.core.controller('#tab2', tab2Controller); | |
| break; | |
| } | |
| }); |
これだけで画面遷移と、それぞれのコントローラによるイベント管理が実現できます。
デモコードはhifiveWithOnsenUI/tabbar at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。
Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。
コメントは受け付けていません。