Asial Blog

Recruit! Asialで一緒に働きませんか?

Onsen UIをタブレットデバイスでも使おう

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript

Onsen UIを使うとHTML5を使ったハイブリッドアプリやWebサイトを素早く、かつ高品質に作成することができます。数多くのデモが登録されていますが、その多くがスマートフォン向けになっています。ではタブレットはどうかと言えば、Onsen UIを使えばタブレットアプリやサイトでも作ることができます。今回はその方法を紹介します。



ons-split-viewを使おう



タブレットは画面幅が広いのでスマートフォンで言うところの2画面相当の情報を表示できます。そこでons-split-viewを使って情報を表示してみましょう。




スプリットビューによる実装

スプリットビューによる実装



ons-split-viewの基本形は次のようになります。



  1. <ons-split-view
  2.   secondary-page="secondary.html"
  3.   main-page="main.html"
  4.   main-page-width="70%"
  5.   collapse="portrait">
  6. </ons-split-view>

secondary-pageで指定されるHTMLは左側に表示されます。右側がメインページになり、その表示幅を main-page-width を使ってパーセントで指定します。今回は次のように指定します



  1. <ons-split-view
  2.   var="app.splitView"
  3.   secondary-page="secondary.html"
  4.   main-page="page1.html"
  5.   main-page-width="70%"
  6.   collapse="width 500px">

メニューはsecondary.html、メインコンテンツはpage1.htmlになります。これは実際のファイルを置くことも、次のようにテンプレートでの指定もできます。



  1. <!-- ID指定でメニューテンプレートを指定 -->
  2. <ons-template id="secondary.html">
  3.   <ons-page style="background-color: white; border-right: 1px solid #ddd;">
  4.     <ons-list ng-controller="MenuController">
  5.       <ons-list-item
  6.         modifier="tappable"
  7.         class="list__item__line-height"
  8.         ng-click="changePage('page1.html')">
  9.         <i class="fa fa-home fa-lg" style="color: #666"></i>
  10.         &nbsp; Page 1
  11.       </ons-list-item>
  12.       <ons-list-item
  13.         modifier="tappable"
  14.         class="list__item__line-height"
  15.         ng-click="changePage('page2.html')">
  16.         <i class="fa fa-gear fa-lg" style="color: #666"></i>
  17.         &nbsp; Page 2
  18.       </ons-list-item>
  19.     </ons-list>
  20.   </ons-page>
  21. </ons-template>

向きを変えた時の対応



厄介なのがデバイスの向きを変更した時の処理です。縦向きにした時にはスライドメニューの方が使い勝手が良いと感じられるでしょう。そこで ons-if-orientation を使って表示を切り替えます。




通常のスプリットビューの表示

通常のスプリットビューの表示



  1. <!-- メニュー自体に設定を追加 -->
  2. <ons-sliding-menu
  3.   main-page="page1.html"
  4.   menu-page="secondary.html"
  5.   side="left"
  6.   var="app.slideView"
  7.   ons-if-orientation="portrait" <!-- 縦向きの場合スライドメニューを利用 -->
  8.   close-on-tap
  9.   swipeable>
  10. </ons-sliding-menu>
  11. <!-- divタグで囲んだ指定 -->
  12. <div ons-if-orientation="landscape"> <!-- 横向きの場合はスプリットビュー -->
  13.   <ons-split-view
  14.     var="app.splitView"
  15.     secondary-page="secondary.html"
  16.     main-page="page1.html"
  17.     main-page-width="70%"
  18.     collapse="width 500px">
  19.   </ons-split-view>
  20. </div>

このようにして縦向き、横向きに応じて機能の出し分けが可能です。




スライドメニューに切り替え

スライドメニューに切り替え



ページ切り替え機能の変更



続いてメニューをタップした時の動作も縦向き、横向きに応じて変更します。



  1. var module = ons.bootstrap('myApp', ['onsen']);
  2.   module.controller('MenuController', function($scope) {
  3.     ons.ready(function() {
  4.     });
  5.     $scope.changePage = function(name) {
  6.       if (ons.orientation.isLandscape()) {
  7.         app.splitView.setMainPage(name);
  8.       }else{
  9.       // メニューは自動で閉じる
  10.         app.slideView.setMainPage(name, {closeMenu: true});
  11.       }
  12.     }
  13.   });

殆ど同じなのですが、縦向きの場合はスライドメニューを自動で閉じるように指定しています。メニューからは、



  1. <ons-list-item
  2.   modifier="tappable"
  3.   class="list__item__line-height"
  4.   ng-click="changePage('page2.html')">
  5.   <i class="fa fa-gear fa-lg" style="color: #666"></i>
  6.   &nbsp; Page 2
  7. </ons-list-item>

のようにchagePageという関数を呼び出すようにします。これでiPadに最適化されたUIを構築できます。



HTMLの全体像は次のようになります。



  1. <!DOCTYPE html>
  2. <html class='' ng-app="myApp">
  3.   <head>
  4.     <meta charset='UTF-8'>
  5.     <meta name="robots" content="noindex">
  6.     <link rel='stylesheet prefetch' href='stylesheets/onsenui.css'>
  7.     <link rel='stylesheet prefetch' href='stylesheets/onsen-css-components.css'>
  8.   </head>
  9.   <body>
  10.     <ons-sliding-menu
  11.        main-page="page1.html"
  12.        menu-page="secondary.html"
  13.        side="left"
  14.        var="app.slideView"
  15.        ons-if-orientation="portrait"
  16.        close-on-tap
  17.        swipeable>
  18.     </ons-sliding-menu>
  19.   <div ons-if-orientation="landscape">
  20.     <ons-split-view
  21.     var="app.splitView"
  22.     secondary-page="secondary.html"
  23.     main-page="page1.html"
  24.     main-page-width="70%"
  25.     collapse="width 500px">
  26.   </ons-split-view>
  27.   </div>
  28.   <ons-template id="secondary.html">
  29.     <ons-page style="background-color: white; border-right: 1px solid #ddd;">
  30.       <ons-list ng-controller="MenuController">
  31.         <ons-list-item
  32.           modifier="tappable"
  33.           class="list__item__line-height"
  34.           ng-click="changePage('page1.html')">
  35.           <i class="fa fa-home fa-lg" style="color: #666"></i>
  36.           &nbsp; Page 1
  37.         </ons-list-item>
  38.  
  39.         <ons-list-item
  40.           modifier="tappable"
  41.           class="list__item__line-height"
  42.           ng-click="changePage('page2.html')">
  43.           <i class="fa fa-gear fa-lg" style="color: #666"></i>
  44.           &nbsp; Page 2
  45.         </ons-list-item>
  46.  
  47.       </ons-list>
  48.     </ons-page>
  49.   </ons-template>
  50.  
  51.   <ons-template id="page1.html">
  52.     <ons-navigator>
  53.       <ons-page>
  54.         <ons-toolbar>
  55.           <div class="center">Page1</div>
  56.         </ons-toolbar>
  57.         <div style="text-align: center; color: #999; padding: 60px 10px 10px 10px;">
  58.           <p>This spitview collapses when the width is less than 500px. </p>
  59.           
  60.           <p>
  61.             <a href="#" target="_blank" class="button button--light">Open Another Window</a>
  62.           </p>
  63.         </div>
  64.       </ons-page>
  65.     </ons-navigator>
  66.   </ons-template>
  67.  
  68.   <ons-template id="page2.html">
  69.     <ons-navigator>
  70.       <ons-page>
  71.         <ons-toolbar>
  72.           <div class="center">Page2</div>
  73.         </ons-toolbar>
  74.         <p style="text-align: center; color: #999; padding-top: 100px;">
  75.           Page2 Contents
  76.         </p>
  77.       </ons-page>
  78.     </ons-navigator>
  79.   </ons-template>
  80.  
  81.   <script src='javascripts/all.js'></script>
  82.   <script>
  83.     var module = ons.bootstrap('myApp', ['onsen']);
  84.     module.controller('MenuController', function($scope) {
  85.       ons.ready(function() {
  86.       });
  87.       $scope.changePage = function(name) {
  88.         if (ons.orientation.isLandscape()) {
  89.           app.splitView.setMainPage(name);
  90.         }else{
  91.           app.slideView.setMainPage(name, {closeMenu: true});
  92.         }
  93.       }
  94.     });
  95.   </script>
  96.   </body>
  97. </html>

デモはGitHub Pageにて確認できますのでタブレットデバイスでご覧ください。ソースコードはmoongift/OnsenUI_for_Tabletにて公開しています。






タブレットやスマートフォンへの対応を考えた場合、レスポンシブにするという方法も考えられますが、スライドメニューのように画面幅に応じて表示を変える方が最適化できる場合もあります。Onsen UIを使うことでデバイスの状態に応じた最適なUX提供が行えるようになるはずです。ぜひお試しください。



Onsen UI - A Custom Elements-Based HTML5 UI Framework | Onsen UI