フロントエンドWeb戦略室

第2回 スクロールとページングのUIを考える(3)

この記事を読むのに必要な時間:およそ 5 分

スクロールしないUI

無限スクロールは,本来「巨大なリスト」であったものをWeb上にそのまま再現したもの,あるいは分割されてしまったページを連結することで,使い勝手を向上させるアプローチでした。次に,ページが分割されたままで使い勝手を向上させるための工夫を考えていきましょう。

無限スクロールは「下までスクロールして,次のページに移動」という2種類の組み合わせを,スクロールという1種類の動作だけで可能になるように変換したものと言えます。今度は逆に,スクロールを排除して,次ページへの移動だけで快適にコンテンツを閲覧できるようにしてみたいと思います。無限スクロールに対して,今回のもう一つのテーマであるページング注6を考えることが非常に重要です注7)⁠

今回は高速ページ切り替えを主体としたAmazon検索のサンプルコードをJavaScriptで作りました。スクロールしないUIを作るときには参考にしてみてください注8)⁠

リスト1にサンプルの抜粋を掲載しますが,スクロールしないUIのコンセプトは次のとおりです。

  • 表示する件数を画面にフィットさせてスクロール不要にする
  • 画面サイズに合わせて表示件数や倍率を動的に変更する
  • 前後のページはあらかじめデータをキャッシュしておき,切り替えを高速に行えるようにする

リスト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) }
        });
    }
}

さらに,サンプルコード中には検索ボックスにフォーカスしたまま,方向キーで商品を選択,さらに次ページへ飛べる工夫を施しました。一般的な検索エンジンでは検索ボックスをフォーカスしたまま,方向キーでページを選択できません。検索ボックスからフォーカスが外れてしまうと,キーボードをマウスに持ち替えて画面をスクロールしなければならず,検索とページ閲覧の間に操作モードの切り替えが発生してしまいます。リスト1のような工夫により,検索ボックスにフォーカスを合わせたままキーボード操作で閲覧できるようにすることで,このモード切り替えのコストをなくしています。

注6)
閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に,閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのことです。
注7)
New York TimesのChrome版は,ブラウザの幅に合わせて記事のページングが変化します。一見の価値ありです。
http://www.nytimes.com/chrome/
注8)
サンプルコードはサポートページからダウンロードできます。HTMLで保存すると実行できますので,実際に触ってみてください。

著者プロフィール

mala(マラ)

NHN Japan所属。livedoor Readerの開発で知られる。JavaScriptを使ったUI,非同期処理,Webアプリケーションセキュリティなどに携わる。

Twitter:@bulkneets

コメント

  • サンプルコード

    サンプルコードの掲載場所、分かりにくくて大変申し訳ありません。
    本誌掲載号のサポートページよりダウンロードできますので、お試しください。

    http://gihyo.jp/magazine/wdpress/archive/2012/vol69/support

    Commented : #2  編集部 (2012/09/05, 13:53)

  • Re:

    サンプルはどこからダウンロードできるのでしょうか?
    リンク先を探してみたのですが見つけることができませんでした・・・

    Commented : #1  n (2012/09/05, 12:52)

コメントの記入