Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。
今回はそんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。
利用するソフトウェア/ライブラリ
- Bower
- hifive
- Onsen UI
- jQuery
インストール
まず各ライブラリをインストールします。インストールはBowerを使って行います。
今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。
index.htmlの作成
次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。
Onsen UIの記述
bodyタグ内に次のように記述します。これはOnsen UIの記述に沿っています。詳しくはjQuery – Onsen UIをご覧ください。
この状態で読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。
イベントハンドリング
次にボタンを押した時の処理を作ります。ここはhifiveを使います。 js/app.js に次のように記述します。
通常とほとんど変わりませんが、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と組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。
次はもう少し複雑な画面遷移の方法について紹介します。