Skip to content

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(画面遷移)

by : 2018/04/09

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の画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

画面遷移の作成

ではJavaScriptファイルを js/app.js として作成します。まず最初の画面用のコントローラーを定義します。

ここで注意する点として、index.htmlがapp.htmlを読み込んでいるということが挙げられます。そのため、 $(function() {}) のようなイベント時においてコントローラ化を行うとまだページ内容が存在しない状態になります。また、SPAとしての画面遷移も考慮する必要があります。

そこで document.addEventListenerinit イベントを使います。ここでは各画面が初期化される際に呼ばれますので、最初の画面を初期化する際にbodyに対してコントローラ化します。これはナビゲーションタグが #app 内にはないためです。

ボタンを押した際のイベント

そしてボタンを押した際のイベントを作ります。コントローラ管理化の #nav を見つけ、そのpushPageメソッドをコールします。第一引数にページ名、オプションとしてdataというキーで次の画面に引き継ぐ情報が送れます。

ページ遷移の処理

ページ遷移のアニメーションはOnsen UIが自動で行ってくれますが、コントローラ化は自分で実装します。すでにあるdocument.addEventListenerinit イベントを使います。先に設定したdataはpage.dataで取れますので、それをコントローラ化する際のオプションとして渡します。

ページの表示

newControllerは次のようになります。準備ができた時 __ready が呼ばれますので、そこで画面表示を更新します。

こうすることで画面遷移したタイミングで画面が書き換わります。イベントのハンドリングはhifiveのコントローラで変わらず行えます。


デモコードはhifiveWithOnsenUI/navigation at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

w

%s と連携中

%d人のブロガーが「いいね」をつけました。