hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（タブバー）
Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。
そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーを使った処理について紹介します。
利用するソフトウェア/ライブラリ
- Bower
- hifive
- Onsen UI
- jQuery
インストール
まず各ライブラリをインストールします。インストールはBowerを使って行います。
This file contains hidden or 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 hidden or 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 hidden or 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でタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。
This file contains hidden or 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> | |
| <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タグなどは不要です。
This file contains hidden or 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="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と同様に簡易的な内容で作成します。
This file contains hidden or 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="tab2"> | |
| <p style="text-align: center;"> | |
| This is the second page. | |
| <ons-button id="btn" modifier="large">ボタン</ons-button> | |
| </p> | |
| </ons-page> |
hifiveの実装
今回、コントローラは最低限としています。
This file contains hidden or 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 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によって初期化するコントローラを分けています。
This file contains hidden or 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 '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と組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。
コメントは受け付けていません。