kikki's tech note

技術ブログです。UnityやSpine、MS、Javaなど技術色々について解説しています。

画面スクロールでコンテンツを追加読込するjavascript -knockout編-

本章では、画面を最下段までスクロールした際に、リスト型のコンテンツを追加読込するjavascriptの書き方について、共有します。

リスト型コンテンツの表示方法

従来の手法

ページネーションを利用した、コンテンツの一覧表示方法が一般的でした。例として、wordpressなどのブログやyoutubeなどの動画コンテンツサイトがあります。これらの手法が採用されていた背景として、以下の理由があります。

  • 実装工数が少ない
  • クライアントPCのスペックが高くない
  • 回線速度が早くない

今日では、これらの問題点が解決され、次に紹介する新しい手法が用いられるケースが増えてきました。

最近の手法

コンテンツ自動ロードを利用した、コンテンツの一覧表示方法が散見されます。例として、facebookなどのSNSやChatworkなどのコミュニケーションツールがあります。これらの手法を利用することで、以下の利点があります。

  • ページ遷移がないため、コンテンツの読み込み速度の向上
  • 双方向通信によるリアルタイムウェブアプリケーションの実現

リスト型コンテンツ追加読み込みの実装方法

実装のポイント

読み込みする際に、以下のポイントに注意して実装しましょう。

  • ページ遷移が発生しないよう、非同期処理でコンテンツを読み込むこと
  • ターゲットとするブラウザの仕様に注意し、画面スクロールの計算式を組むこと
  • 別の非同期処理が走っていないこと
  • 全コンテンツがロードされた場合、ロードしないこと

サンプルスクリプト

以下に、サンプルのスクリプトを示します。

// knockout.jsのviewModel
var viewModel = {
    contentsList: ko.observableArray(),
};
// 読み込み中フラグ
var skipFlg = false;
// ロード済件数
var loadedCount = 0;
// コンテンツの総数
var maxContentsCount = 2000;
// コンテンツ読み込み変数

// 画面最下段までスクロールされた場合に、非同期で読み込まれていないコンテンツの一覧を取得する
$(window).scroll(function (ev) {
    if (skipFlg && loadedCount < maxContentsCount) {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            skipFlg = false;
            $.ajax({
                type: "POST",
                contentType: "application/json",
                // コンテンツ読み込み先URL
                url: "/Contents/Load",
                data: JSON.stringify({
                    loadedCount: loadedCount,
                })
            }).done(function (result) {
                $(result).each(function (index, element) {
                    // 読み込み先から得たコンテンツをviewModelに追加する。
                    viewModel.contentsList.push({
                        name: element.Name,
                        url: element.Url,
                    });
                });
                skipFlg = true;
            }).fail(function (ex) {
                skipFlg = true;
            });
        }
    }
});

総括

本章では、画面スクロールによって自動でコンテンツ型リストの一覧が読み込まれる手法について共有しました。
最近では、ウェブサービスを提供する個人・企業にとって、画面遷移による読み込みコストが大きくなりつつあります。またPCの性能が飛躍的に上がっており、クライアント側での処理の負担が減少しています。
そのため、サーバ側での処理の負担をいかに減らし、快適なウェブサービスを提供できるかが重要となっています。今回の手法は、その一部を解決できる手法となっています。
是非、非同期処理を積極的に活用して快適なサービスを提供できればと思います。


※無断転載禁止 Copyright (C) kikkisnrdec All Rights Reserved.