hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する（画面遷移）
Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。
そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回は
利用するソフトウェア/ライブラリ
- 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を忘れずに付けておきます。
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"> | |
| <ons-toolbar> | |
| <div class="center">Hello World</div> | |
| </ons-toolbar> | |
| <ons-button modifier="quiet" id="btn">画面移動</ons-button> | |
| </ons-page> |
この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。
画面遷移の作成
ではJavaScriptファイルを js/app.js として作成します。まず最初の画面用のコントローラーを定義します。
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 helloWorldController = { | |
| __name: 'HelloWorldController', | |
| '#btn click': function() { | |
| } | |
| }; | |
| document.addEventListener('init', (event) => { | |
| const page = event.target; | |
| switch (page.id) { | |
| case 'app': | |
| h5.core.controller('body', helloWorldController); | |
| break; | |
| } | |
| }); |
ここで注意する点として、index.htmlがapp.htmlを読み込んでいるということが挙げられます。そのため、 $(function() {}) のようなイベント時においてコントローラ化を行うとまだページ内容が存在しない状態になります。また、SPAとしての画面遷移も考慮する必要があります。
そこで document.addEventListener の init イベントを使います。ここでは各画面が初期化される際に呼ばれますので、最初の画面を初期化する際にbodyに対してコントローラ化します。これはナビゲーションタグが #app 内にはないためです。
ボタンを押した際のイベント
そしてボタンを押した際のイベントを作ります。コントローラ管理化の #nav を見つけ、そのpushPageメソッドをコールします。第一引数にページ名、オプションとしてdataというキーで次の画面に引き継ぐ情報が送れます。
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
| '#btn click': function() { | |
| this.$find('#nav')[0].pushPage( | |
| 'new.html', | |
| { | |
| data: { | |
| time: new Date() | |
| } | |
| } | |
| ); | |
| } |
ページ遷移の処理
ページ遷移のアニメーションはOnsen UIが自動で行ってくれますが、コントローラ化は自分で実装します。すでにあるdocument.addEventListener の init イベントを使います。先に設定したdataはpage.dataで取れますので、それをコントローラ化する際のオプションとして渡します。
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 'new': | |
| h5.core.controller('#new', newController, page.data); | |
| break; | |
| case 'app': | |
| h5.core.controller('body', helloWorldController); | |
| break; | |
| } | |
| }); |
ページの表示
newControllerは次のようになります。準備ができた時 __ready が呼ばれますので、そこで画面表示を更新します。
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 newController = { | |
| __name: 'NewController', | |
| __ready(context) { | |
| this.$find('#time').html(context.args.time); | |
| } | |
| }; |
こうすることで画面遷移したタイミングで画面が書き換わります。イベントのハンドリングはhifiveのコントローラで変わらず行えます。
デモコードはhifiveWithOnsenUI/navigation at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。
Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。
hifive開発者ブログ 
コメントは受け付けていません。