UIを使うとHTML5を使ったハイブリッドアプリやWebサイトを素早く、かつ高品質に作成することができます。デモが登録されていますが、その多くがスマートフォン向けになっています。UIを使えばタブレットアプリやサイトでも作ることができます。今回はその方法を紹介します。ons-split-viewを使おうタブレットは画面幅が広いのでスマートフォンで言うところの2画面相当の情報を表示できます。そこでons-split-viewを使って情報を表示してみましょう。スプリットビューによる実装ons-split-viewの基本形は次のようになります。collapse="portrait"></ons-split-view>secondary-pageで指定されるHTMLは左側に表示されます。使ってパーセントで指定します。500px">メニューはsecondary.html、メインコンテンツはpage1.htmlになります。これは実際のファイルを置くことも、次のようにテンプレートでの指定もできます。厄介なのがデバイスの向きを変更した時の処理です。縦向きにした時にはスライドメニューの方が使い勝手が良いと感じられるでしょう。使って表示を切り替えます。</ons-split-view></div>このようにして縦向き、横向きに応じて機能の出し分けが可能です。続いてメニューをタップした時の動作も縦向き、横向きに応じて変更します。});殆ど同じなのですが、縦向きの場合はスライドメニューを自動で閉じるように指定しています。2</ons-list-item>のようにchagePageという関数を呼び出すようにします。これでiPadに最適化されたUIを構築できます。HTMLの全体像は次のようになります。Pageにて確認できますのでタブレットデバイスでご覧ください。ソースコードはmoongift/OnsenUI_for_Tabletにて公開しています。タブレットやスマートフォンへの対応を考えた場合、レスポンシブにするという方法も考えられますが、スライドメニューのように画面幅に応じて表示を変える方が最適化できる場合もあります。UIを使うことでデバイスの状態に応じた最適なUX提供が行えるようになるはずです。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。