Onsen UI ユーザの皆さん、こんにちは。
この記事では Onsen UI 2.4.0 および 2.5.0 で追加された
- エッジスワイプ (2.5.0)
<template>
要素をサポート (2.4.0)<ons-page>
内への<script>
要素の記述に対応 (2.4.0)- 外部ファイルのキャッシュとプリロード (2.4.0)
の4つの新機能についてご説明します。
エッジスワイプ (2.5.0)
Onsen UI 2.5.0 以上では、<ons-navigator>
に swipeable
属性をつけることで、エッジスワイプ機能が有効になります。
この機能を有効にすると、バックボタンを押す代わりに、ページ左端をスワイプすることで前のページに戻ることができるようになります。
See the Pen Onsen UI 2.5.0 - Swipe to pop by Naoki Matagawa (@asial-matagawa) on CodePen.
また、オプションとして、swipe-target-width
属性と swipe-threshold
属性が用意されています。
swipe-target-width
属性を利用すると、画面左端からのスワイプの有効範囲を指定できます。指定可能な値は、正のピクセル値です(デフォルト値は 20px
)。
swipe-threshold
属性を利用すると、ページの pop に必要なスワイプ量を指定できます。指定可能な値は、0
から 1.0
の小数値です(デフォルト値は 0.2
)。
以下に swipe-target-width
属性と swipe-threshold
属性の使用例を示します。
See the Pen Onsen UI 2.5.0 - Swipe to pop - swipe-target-width & swipe-threshold by Naoki Matagawa (@asial-matagawa) on CodePen.
なお、Material Design 版の <ons-navigator>
では、
swipeable
属性をつけてもエッジスワイプは有効になりません。
Material Design にはエッジスワイプの概念がないためです。
強制的にエッジスワイプを有効にするには、swipeable="force"
と記述してください。
その際、slide-md
以外の遷移アニメーション(デフォルト値の lift-md
など)を指定すると不自然な UI になってしまいますのでご注意ください。
See the Pen Onsen UI 2.5.0 - Swipe to pop - swipeable="force" in Material Design by Naoki Matagawa (@asial-matagawa) on CodePen.
AngularJS 1.x バインディング, Angular 2+ バインディングをお使いの方は
上記の例と同じようにそのまま swipeable
, swipe-target-width
, swipe-threshold
属性を記述してください。
React バインディングをお使いの方は、<Navigator>
をご利用の場合は swipeable
, swipe-target-width
, swipe-threshold
prop を記述してください。
<RouterNavigator>
をご利用の場合は、 swipeable
, swipe-target-width
, swipe-threshold
prop の記述に加えて、このコードを参考に swipePop
prop を記述してください。
Vue バインディングをお使いの方は v-ons-navigator
に swipeable
, swipe-target-width
, swipe-threshold
属性を記述してください。
<template>要素をサポート (2.4.0)
エッジスワイプの例でもお見せしたように、Onsen UI 2.4.0 以上では <template>
でページを定義できるようになりました。
1 2 3 4 5 6 7 8 9 10 11 12 |
<template id="page1.html"> <ons-page> <ons-toolbar> <div class="center">Page</div> </ons-toolbar> <div class="background"></div> <div class="content"> <p>Content here</p> </div> </ons-page> </template> |
<template>
要素は Android 4.4 以上, iOS 9.0 以上でご利用可能です。
Onsen UI 2.3.x までで提供していた <ons-template>
要素は後方互換性を考慮して残してありますが、ons-template
要素を利用するメリットは特にないため、新しいプロジェクトを始める際は <template>
要素を利用することをお勧めします。
<ons-page>内への<script>要素の記述に対応 (2.4.0)
Onsen UI 2.4.0 以上では、<ons-page>
が DOM ツリーに追加された際の処理を、<script>
要素の形で <ons-page>
内部に直接書けるようになりました。
また、onInit
, onShow
, onHide
, onDestroy
の4つのプロパティが追加されました。
これらを組み合わせることで、以下のようにページの HTML 構造と振る舞いを同時に定義することができます。
See the Pen Onsen UI 2.4.0 - <script> in <ons-page> by Naoki Matagawa (@asial-matagawa) on CodePen.
ただし、注意点として、<script>
要素は <ons-page>
要素の 直下の階層 に 1つだけ 記述してください。
また、<ons-page>
をテンプレートの中に記述する場合は、<ons-template>
要素ではなく <template>
要素を使用してください。<ons-template>
要素を使用すると、<ons-page>
が navigator や splitter によって読み込まれる前に <script>
要素内のコードが動作してしまいます。
外部ファイルのキャッシュとプリロード (2.4.0)
ご存知の通り、ons-navigator#pushPage
や ons-splitter-content#load
には、外部ファイルを読み込む機能が付いています。しかし、同じ外部ファイルに何度もリクエストが送られるのはパフォーマンス上問題があります。そのため、Onsen UI 2.4.0 以上では、一度読み込んだ外部ファイルは自動的にキャッシュされます 。
しかし、まだ問題は残っています。外部ファイルへの最初の HTTP リクエストを pushPage や load のタイミングで行うと、通信速度の遅い端末やサーバにおいてパフォーマンスの問題が発生します。そこで Onsen UI 2.4.0 以上では、外部ファイルへの HTTP リクエストを事前に行うことのできる ons.preload 関数が提供されています 。
ons.preload
関数は以下のように使用します。
ons.preload
関数は非同期関数であり、外部ファイルを読み込み終えたタイミングで Promise が resolve されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<head> ... <script src="onsenui.js"></script> <script> ons.preload([ 'page2.html', // You can preload multiple files at a time 'page3.html', 'page4.html' ]) .then(function(){ console.log('All external files have been preloaded'); }) .catch(function(){ console.error('Failed to preload external templates'); }); </script> </head> <body> <ons-navigator id="nav" page="page1.html"> </ons-navigator> <template id="page1.html"> <ons-page> <ons-toolbar> <div class="center">Page 1</div> </ons-toolbar> <!-- `pushPage` causes no HTTP request since page2.html is preloaded --> <ons-button onclick="document.getElementById('nav').pushPage('page2.html')"> Next Page </ons-button> </ons-page> </template> </body> |
ons.preload
関数は必ずしも <head>
要素内で実行する必要はありません。
状況に合わせて、お好きな場所でご利用ください。
Onsen UIはハイブリッドアプリ向けUIを作成するためのオープンソースのライブラリです。詳細はGitHubページをご確認ください。
また、Onsen UIを応援してくれる方はぜひスター(★)をポチッとお願いいたします。