Onsen UIをタブレットデバイスでも使おう
Onsen UIを使うとHTML5を使ったハイブリッドアプリやWebサイトを素早く、かつ 高品質に作成することができます。数多くのデモが登録されていますが、その多くがスマートフォン向けになっています。ではタブレットはどうかと言えば、Onsen UIを使えばタブレットアプリやサイトでも作ることができます。今回はその方法を紹介します。
ons-split-viewを使おう
タブレットは画面幅が広いのでスマートフォンで言うところの2画面相当の情報を表示できます。そこでons-split-viewを使って情報を表示してみましょう。
ons-split-viewの基本形は次のようになります。
<ons-split-view
secondary-page="secondary.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
secondary-pageで指定されるHTMLは左側に表示されます。右側がメインページになり、その表示幅を main-page-width を使ってパーセントで指定します。今回は次のように指定します
<ons-split-view
var="app.splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="width 500px">
メニューはsecondary.html、メインコンテンツはpage1.htmlになります。これは実際のファイルを置くことも、次のようにテンプレートでの指定もできます。
<!-- ID指定でメニューテンプレートを指定 -->
<ons-template id="secondary.html">
<ons-page style="background-color: white; border-right: 1px solid #ddd;">
<ons-list ng-controller="MenuController">
<ons-list-item
modifier="tappable"
class="list__item__line-height"
ng-click="changePage('page1.html')">
<i class="fa fa-home fa-lg" style="color: #666"></i>
Page 1
</ons-list-item>
<ons-list-item
modifier="tappable"
class="list__item__line-height"
ng-click="changePage('page2.html')">
<i class="fa fa-gear fa-lg" style="color: #666"></i>
Page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
向きを変えた時の対応
厄介なのがデバイスの向きを変更した時の処理です。縦向きにした時にはスライドメニューの方が使い勝手が良いと感じられるでしょう。そこで ons-if-orientation を使って表示を切り替えます。
<!-- メニュー自体に設定を追加 -->
<ons-sliding-menu
main-page="page1.html"
menu-page="secondary.html"
side="left"
var="app.slideView"
ons-if-orientation="portrait" <!-- 縦向きの場合スライドメニューを利用 -->
close-on-tap
swipeable>
</ons-sliding-menu>
<!-- divタグで囲んだ指定 -->
<div ons-if-orientation="landscape"> <!-- 横向きの場合はスプリットビュー -->
<ons-split-view
var="app.splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
</div>
このようにして縦向き、横向きに応じて機能の出し分けが可能です。
ページ切り替え機能の変更
続いてメニューをタップした時の動作も縦向き、横向きに応じて変更します。
var module = ons.bootstrap('myApp', ['onsen']);
module.controller('MenuController', function($scope) {
ons.ready(function() {
});
$scope.changePage = function(name) {
if (ons.orientation.isLandscape()) {
app.splitView.setMainPage(name);
}else{
// メニューは自動で閉じる
app.slideView.setMainPage(name, {closeMenu: true});
}
}
});
殆ど同じなのですが、縦向きの場合はスライドメニューを自動で閉じるように指定しています。メニューからは、
<ons-list-item
modifier="tappable"
class="list__item__line-height"
ng-click="changePage('page2.html')">
<i class="fa fa-gear fa-lg" style="color: #666"></i>
Page 2
</ons-list-item>
のようにchagePageという関数を呼び 出すようにします。これでiPadに最適化されたUIを構築できます。
HTMLの全体像は次のようになります。
<!DOCTYPE html>
<html class='' ng-app="myApp">
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel='stylesheet prefetch' href='stylesheets/onsenui.css'>
<link rel='stylesheet prefetch' href='stylesheets/onsen-css-components.css'>
</head>
<body>
<ons-sliding-menu
main-page="page1.html"
menu-page="secondary.html"
side="left"
var="app.slideView"
ons-if-orientation="portrait"
close-on-tap
swipeable>
</ons-sliding-menu>
<div ons-if-orientation="landscape">
<ons-split-view
var="app.splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="width 500px">
</ons-split-view>
</div>
<ons-template id="secondary.html">
<ons-page style="background-color: white; border-right: 1px solid #ddd;">
<ons-list ng-controller="MenuController">
<ons-list-item
modifier="tappable"
class="list__item__line-height"
ng-click="changePage('page1.html')">
<i class="fa fa-home fa-lg" style="color: #666"></i>
Page 1
</ons-list-item>
<ons-list-item
modifier="tappable"
class="list__item__line-height"
ng-click="changePage('page2.html')">
<i class="fa fa-gear fa-lg" style="color: #666"></i>
Page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-navigator>
<ons-page>
<ons-toolbar>
<div class="center">Page1</div>
</ons-toolbar>
<div style="text-align: center; color: #999; padding: 60px 10px 10px 10px;">
<p>This spitview collapses when the width is less than 500px. </p>
<p>
<a href="#" target="_blank" class="button button--light">Open Another Window</a>
</p>
</div>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-navigator>
<ons-page>
<ons-toolbar>
<div class="center">Page2</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">
Page2 Contents
</p>
</ons-page>
</ons-navigator>
</ons-template>
<script src='javascripts/all.js'></script>
<script>
var module = ons.bootstrap('myApp', ['onsen']);
module.controller('MenuController', function($scope) {
ons.ready(function() {
});
$scope.changePage = function(name) {
if (ons.orientation.isLandscape()) {
app.splitView.setMainPage(name);
}else{
app.slideView.setMainPage(name, {closeMenu: true});
}
}
});
</script>
</body>
</html>
デモはGitHub Pageにて確認できますのでタブレットデバイスでご覧ください。ソースコードはmoongift/OnsenUI_for_Tabletにて公開しています。
タブレットやスマートフォンへの対応を考えた場合、レスポンシブにするという方法も考えられますが、スライドメニューのように画面幅に応じて表示を変える方が最適化できる場合もあります。Onsen UIを使うことでデバイスの状態に応じた最適なUX提供が行えるようになるはずです。ぜひお試しください。
Onsen UI – A Custom Elements-Based HTML5 UI Framework | Onsen UI
