スクロールしないUI
無限スクロールは，
無限スクロールは
今回は高速ページ切り替えを主体としたAmazon検索のサンプルコードをJavaScriptで作りました。スクロールしないUIを作るときには参考にしてみてください
リスト1にサンプルの抜粋を掲載しますが，
- 表示する件数を画面にフィットさせてスクロール不要にする
- 画面サイズに合わせて表示件数や倍率を動的に変更する
- 前後のページはあらかじめデータをキャッシュしておき，
切り替えを高速に行えるようにする
リスト1 キーボードで操作できるようにする工夫
var current_query; //現在のクエリページ
var current_page = 1;
var current = -1;
//検索ボックスにフォーカスを残したしたまま，矢印キーで読み進められるようにする
function keydown(e){
var kc = e.keyCode;
if (kc == 40) { //下方向キー
//下アイテムへカーソルが移動 or 次ページへ進む
if (current == 9 && get_cache(current_query, current_page+1)) {
current_page++;
current = 0;
refresh();
} else {
current = Math.min(9, current+1);
}
} else if (kc == 38) { //上方向キー
//上アイテムへカーソルが移動 or 前ページへ進む
if (current == 0 && current_page != 1) {
current_page--;
current = 9;
refresh();
} else {
current = Math.max(0, current-1);
}
}
if (kc == 40 || kc == 38) {
var el = jQuery(".item").removeClass("active")
.eq(current)
.addClass("active")
.get(0);
show_info(el);
}
if (current_query != this.value && e.keyCode == 13) {
current = -1;
current_page = 1;
search(this.value, current_page);
current_query = this.value;
}
}
var CACHE = { };
function get_cache(keyword, page) { return CACHE["_" + keyword + "_" + page] }
function set_cache(keyword, page, items) { return CACHE["_" + keyword + "_" + page] = items }
function prefetch(keyword, page) {
var param = "keyword=" + encodeURIComponent(keyword) +
"&page=" + page;
if ( get_cache(keyword, page) ) return;
jsonp(api + "?" + param , function(items){
set_cache(keyword, page, items) });
}
function refresh() {
search(current_query, current_page, function() {
jQuery(".item").removeClass("active")
.eq(current)
.addClass("active");
});
}
function search(keyword, page, cb) {
var show_result = function(items){
var start = (current_page - 1) * 10 + 1;
$("result").innerHTML =
"<h3>検索結果 " + start + "-" + (start + 9) + "</h3>"
+ items.map(function(item){
return tmpl.replace(/\$(\w+)/g, function($0,$1){
return item[$1] || ""
})
}).join("");
if (cb) cb();
};
if (get_cache(keyword, page)) { //キャッシュされていれば使う
show_result(get_cache(keyword, page));
prefetch(keyword, page + 1); //次ページを先読みする
} else {
var param = "keyword=" + encodeURIComponent(keyword) +
"&page=" + page;
jsonp(api + "?" + param , function(items){
set_cache(keyword, page, items);
show_result(items);
//まだ結果があれば次ページをあらかじめキャッシュする
if (items.length) { prefetch(keyword, page + 1) }
});
}
}
さらに，
- 注6）
- 閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に，
閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのことです。 - 注7）
- New York TimesのChrome版は，
ブラウザの幅に合わせて記事のページングが変化します。一見の価値ありです。
http://www. nytimes. com/ chrome/ - 注8）
- サンプルコードはサポートページからダウンロードできます。HTMLで保存すると実行できますので，
実際に触ってみてください。