コンテンツへスキップ

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を使って行います。

$ bower install hifive jquery onsenui –save

view raw
index.
hosted with ❤ by GitHub

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

{
"directory": "public/components"
}

view raw
index.json
hosted with ❤ by GitHub

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

<!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>

view raw
index.html
hosted with ❤ by GitHub

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

<ons-navigator swipeable id="nav" page="app.html"></ons-navigator>

view raw
index.html
hosted with ❤ by GitHub

app.htmlの作成

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

<ons-page id="app">
<ons-toolbar>
<div class="center">Hello World</div>
</ons-toolbar>
<ons-button modifier="quiet" id="btn">画面移動</ons-button>
</ons-page>

view raw
index.html
hosted with ❤ by GitHub

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

画面遷移の作成

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

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;
}
});

view raw
index.js
hosted with ❤ by GitHub

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

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

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

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

'#btn click': function() {
this.$find('#nav')[0].pushPage(
'new.html',
{
data: {
time: new Date()
}
}
);
}

view raw
index.js
hosted with ❤ by GitHub

ページ遷移の処理

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

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;
}
});

view raw
index.js
hosted with ❤ by GitHub

ページの表示

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

const newController = {
__name: 'NewController',
__ready(context) {
this.$find('#time').html(context.args.time);
}
};

view raw
index.js
hosted with ❤ by GitHub

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


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

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

From → hifive

コメントは受け付けていません。

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