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を応援してくれる方はぜひスター（★）をポチッとお願いいたします。