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.min.js"></script> | |
| <script src="components/jquery/dist/jquery.min.js"></script> | |
| <script src="components/hifive/ejs-h5mod.js"></script> | |
| <script src="components/hifive/h5.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
Onsen UIの記述
bodyタグ内に次のように記述します。これはOnsen UIの記述に沿っています。詳しくはjQuery – Onsen UIをご覧ください。
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
| <!– Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> –> | |
| <div id="app"> | |
| <ons-page> | |
| <ons-toolbar> | |
| <div class="center">Hello World</div> | |
| </ons-toolbar> | |
| <ons-button modifier="quiet" id="btn">ボタン</ons-button> | |
| </ons-page> | |
| </div> |
この状態で読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。
イベントハンドリング
次にボタンを押した時の処理を作ります。ここはhifiveを使います。 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
| ons.ready(() => { | |
| // ons.notification.alert({message: 'Hello'}) | |
| var helloWorldController = { | |
| __name: 'HelloWorldController', | |
| '#btn click'() { | |
| ons.notification.alert('Hello World'); | |
| } | |
| }; | |
| h5.core.controller('#app', helloWorldController ); | |
| }); |
通常とほとんど変わりませんが、jQueryでよく使う $(function() {}) ではなく、ons.ready を使います。これは $(function() {}) とほとんど変わりませんが、Onsen UIの画面構築まで終わったタイミングで呼ばれるメソッドになります。
ボタンを押した時のイベント処理も通常と変わりません。Onsen UIらしいアラートを出すために ons.notification.alert に置き換えているだけです。
これでボタンを押すとちゃんとアラートが表示されます。
今回のデモはGlitchにて試せます。
Onsen UIとhifiveの基本的な組み合わせは以上になります。Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。
次はもう少し複雑な画面遷移の方法について紹介します。
hifive開発者ブログ 
コメントは受け付けていません。