Onsen UI version 1.2.2リリースのお知らせ
HTML5モバイルアプリを開発するのに最適なUIフレームワーク、Onsen UIの最新バージョン1.2.2がリリースしました。今回は大きな機能追加が二つあります。
- ・Pull to Refresh
- ・Infinite List
こちらの機能について解説します。
Pull to Refresh
Pull to Refreshは表示領域を下に引っ張ってイベントを起こす機能です。ネイティブアプリではよく知られた機能で、通常は情報更新する際に利用されます。こちらはまずデモで動作をご覧ください。実際に動かせるようになっていますので、その操作感を確かめてください。
See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.
実際に利用する際には次のようにHTMLコードを書きます。
<ons-page ng-controller="MyController">
<ons-pull-hook var="loaded" ng-action="load($done)">
<span ng-switch="loader.getCurrentState()">
<span ng-switch-when="initial">Pull down to refresh</span>
<span ng-switch-when="preaction">Release to refresh</span>
<span ng-switch-when="action">Loading data. Please wait...</span>
</span>
</ons-pull-hook>
<ons-list>
<ons-list-item ng-repeat="item in items">
Item #{{ item }}
</ons-list-item>
</ons-list>
</ons-page>
JavaScriptは次のようになります。
ons.bootstrap()
.controller('MyController', function($scope, $timeout) {
$scope.items = [3, 2 ,1];
$scope.load = function($done) {
$timeout(function() {
$scope.items.unshift($scope.items.length + 1);
$done();
}, 1000);
};
});
<ons-pull-hook var="loaded" ng-action="load($done)"> と書かれている通り、引っ張って離したタイミングで $scope.load が呼ばれます。ここでリストをリフレッシュしたり、追記したりすることができます。
詳しくはons-pull-hook | Onsen UIをご覧ください。
Infinite List
無限リストの機能になります。こちらもまずはデモでご覧ください。
See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.
情報を一覧するリストでは時に大量になることがあります。スマートフォンのブラウザも高機能になっているとは言え、大量のDOMを描画するとどんどん動作が重たくなっていきます。そこで表示領域から消えたデータについてDOM Elementを削除し、メモリが逼迫したり動作が重たくなるのを防ぐ必要があります。そういった工夫は実装しようと思うと面倒なものです。そこで使って欲しいのがInfinite Listです。DOMの削除や復元を行うコントロールになります。
HTMLは次のようになります。
<ons-list ng-controller="MyController">
<ons-list-item ons-lazy-repeat="MyDelegate"`>
{{ item }}
</ons-list-item>
</ons-list>
ons-lazy-repeat要素を追加し、MyDelegateを指定しておきます。続いてJavaScriptは次のように書きます。
ons.bootstrap()
.controller('MyController', function($scope) {
$scope.MyDelegate = {
countItems: function() {
// Return number of items.
return 1000000;
},
calculateItemHeight: function(index) {
// Return the height of an item in pixels.
return 45;
},
configureItemScope: function(index, itemScope) {
// Initialize scope
itemScope.item = 'Item #' + (index + 1);
},
destroyItemScope: function(index, itemScope) {
// Optional method that is called when an item is unloaded.
console.log('Destroyed item with index: ' + index);
}
};
});
リストのアイテム数、アイテムの高さ、スコープ設定、そしてDOMから削除した時の処理を呼び出せます。
これで大量のリスト項目を次々に読み込んでいったとしても安定した描画と動作を保てるようになります。その他、細かな点はons-lazy-repeat | Onsen UIをご覧ください。
その他のアップデート
1.2.2ではこの他、細かなアップデートが行われています。
- ・<ons-carousel> が auto-refresh 指定可能に。
- ・ユーザがメインページをタップしたらスライドメニューが閉じるようになりました。これはネイティブアプリによくあるUIに似せています。
- ・<ons-tab>にpersistent要素を追加。この要素が指定されているタブはコンテンツの再ロードをしません。
- ・ons.navigatorやons.slidingMenuといった自動的に生成されていた変数は削除されました。これにより既存のコードが影響を受ける場合があります。
- ・Android 5（Lollipop）でテストされるようになりました。
- ・カルーセルはドラッグイベントをスライドメニューに伝えなくなりました。また、スクロールコンテンツとカルーセルを一緒に使った場合もうまく動くようになりました。
- ・その他小さなバグフィックス。
Onsen UIをお使いの方はぜひ最新版の1.2.2をお使いください。大量のリスト表示はよくある描画なので、速度や安定性の向上に役立つはずです。
