Infinite Scroll：Ajaxと組み合わせて無限スクロール風にコンテンツ追加するJSサンプル

今回は、jQuery,Ajaxを使用して無限スクロール風にコンテンツ追加していくサンプルプログラムを作成していきます。
無限スクロールといっても、jQueryであるイベントが発生したときに、あるコンテンツを表示する、という指定をしているにすぎません。
今回はリンクをクリックするとイベントが発生した時に、リストを1行追加する、という処理をAjaxを使用して作成していきます。

※jQueryのプラグインとして「Infinite Scroll」が存在しますが、今回は使用しません。

Infinite Scrollとは

「Infinite Scroll」、日本語では「無限スクロール」は、近年多くのサイトで利用されている手法です。

従来、例えば1000件のコンテンツを一覧表示する際、
全てのコンテンツを1ページに収めるということはあまりしませんでした。
代わりに100件ずつ10ページに分割するような表示が通例でした。

しかし、ページ遷移（「次ページへ」をクリックして、次ページを表示する操作）は、
ユーザにとっては結構ストレスを感じる作業だったりするんですね。
そこで考えられた手法が、「無限スクロール」です。

先ほどの例で行くと100件表示されたコンテンツの下に「もっと見る」というようなリンクを設置します。
このリンクをクリックすると、ページは遷移せずに、次の100件のコンテンツがページ下部に追加されます。

つまり合計200件のコンテンツが表示されたことになります。
そしてその最下部の「もっと見る」をクリックすると次の100件が追加され・・・。
こうしてコンテンツが1ページ内に追加され続けることになるわけです。

この「もっと見る」リンクをクリックするというイベントを、
「ページ最下部に到達したら」というイベントに置き換えることも可能です。
そうすると、ページ最下部に到達したら、コンテンツが自動追加されるので、
ページを無限にスクロールできることになります(コンテンツが無限であれば)。
これが「Infinite Scroll」です。

「Infinite Scroll」は、そのままの名称でjQueryのプラグインとして配布されています。
「Infinite Scroll」の本家サイトで、Infinite Scrollが実装されているので、動きを見てみましょう。

※画像クリックでInfinite Scroll 本家サイトが別窓で開きます。

画面最下部に到達すると、自動でページが読みこまれているのがわかります。
また、このサイトは英語ですが、Infinite Scrollの特徴や
メリット・デメリットが箇条書きでまとまっています。
自分でサイトを作る際にInfinite Scrollを使用するか
ページングにするかを検討する際のよい指針になると思います。

プラグインを用いた場合ではAjaxとの連携など、分かりづらい部分が出てきたため、
今回は冒頭に述べたとおりプラグインを用いずに、jQueryを使用して、簡単なInfinite Scrollを実現していきます。
それでは、早速サンプルを作成していきましょう。

環境

今回は、手順４でAjax部分でDBからデータを取得するために、データベースサーバMySQL、
MySQLにアクセスする際のプログラムとしてPHPをインストールしています(手順３までは不要です)。
またAjax動作させるため、Webサーバに作成HTMLは配置していきます。

サンプル作成

分かりやすいようにできるだけ少ないコードでまとめていきます。
作成するのは次の2ファイルです。

１．test.html：表示ページ(Infinite Scrollを実装。２を呼び出す側。)
２．loadmore.html(loadmore.php)：追加データ用ファイル(追加データを表示。１から呼び出される側。)

それでは、少しずつサンプルを作成していきましょう。

手順１．HTMLでリストを作成
【test.html】

<ul id="list">
<li><a href="https://techpjin.sakura.ne.jp/techpjin_new/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集～その１～</a></li>
<li><a href="https://techpjin.sakura.ne.jp/techpjin_new/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集～その２～</a></li>
</ul>
<div id="more">More...</div>

これをローカルに保存してブラウザで見てみると、以下のように表示されます。

手順２．固定内容をリストに追加する処理を追加
手順１で作成した「More…」をクリックした際にコンテンツをAjaxで読みこむ処理を追加してみましょう。
【test.html】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$('#more').click(function(){
		$.ajax({
			url: "./loadmore.html",
			type: 'GET',
			success: function(data){
				$("#list").append(data);
			}
		});
	});
});
</script>
<ul id="list">
<li><a href="https://techpjin.sakura.ne.jp/techpjin_new/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集～その１～</a></li>
<li><a href="https://techpjin.sakura.ne.jp/techpjin_new/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集～その２～</a></li>
</ul>
<div id="more">More...</div>

1行目でjQueryを読み込み、
2行目以降のjQueryの処理で、loadmore.htmlファイルへajaxで処理を投げています。

手順３．固定内容を表示するファイルを作成
これは非常にシンプルにしておきます。「More…」をクリックでリストが追加させたいので、「loadmore.html」を次のように作成しておきます。
【loadmore.html】