コンテンツへスキップ

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

by : 2018/04/10

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でタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。

<ons-page>
<ons-toolbar>
<div class="center">ヘッダー</div>
</ons-toolbar>
<ons-tabbar swipeable position="auto">
<ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
</ons-tab>
<ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
</ons-tab>
</ons-tabbar>
</ons-page>

view raw
index.html
hosted with ❤ by GitHub

tab1.htmlの作成

今回は簡単に次のようなページを作成します。html、head、bodyタグなどは不要です。

<ons-page id="tab1">
<p style="text-align: center;">
This is the first page.
<ons-button id="btn" modifier="large">ボタン</ons-button>
</p>
</ons-page>

view raw
index.html
hosted with ❤ by GitHub

tab2.htmlの作成

tab1.htmlと同様に簡易的な内容で作成します。

<ons-page id="tab2">
<p style="text-align: center;">
This is the second page.
<ons-button id="btn" modifier="large">ボタン</ons-button>
</p>
</ons-page>

view raw
index.html
hosted with ❤ by GitHub

hifiveの実装

今回、コントローラは最低限としています。

const tab1Controller = {
__name: 'Tab1Controller',
'#btn click'() {
ons.notification.alert('ここはタブ1です');
}
};
const tab2Controller = {
__name: 'Tab2Controller',
'#btn click'() {
ons.notification.alert('ここはタブ2です');
}
};

view raw
index.js
hosted with ❤ by GitHub

そしてコントローラ化するのは document.addEventListenerinit イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。

document.addEventListener('init', (event) => {
const page = event.target;
switch (page.id) {
case 'tab1':
h5.core.controller('#tab1', tab1Controller);
break;
case 'tab2':
h5.core.controller('#tab2', tab2Controller);
break;
}
});

view raw
index.js
hosted with ❤ by GitHub

これだけで画面遷移と、それぞれのコントローラによるイベント管理が実現できます。


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

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

From → hifive

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

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