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

この記事は2014年9月3日に書かれたものです。内容が古い可能性がありますのでご注意ください。


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の特徴や
メリット・デメリットが箇条書きでまとまっています。
自分でサイトを作る際にInfinite Scrollを使用するか
ページングにするかを検討する際のよい指針になると思います。

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

環境

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

サンプル作成

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

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

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

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

<ul id="list">
<li><a href="http://tech.pjin.jp/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集~その1~</a></li>
<li><a href="http://tech.pjin.jp/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集~その2~</a></li>
</ul>
<div id="more">More...</div>

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

infinite scroll のサンプル1

手順2.固定内容をリストに追加する処理を追加
手順1で作成した「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="http://tech.pjin.jp/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集~その1~</a></li>
<li><a href="http://tech.pjin.jp/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集~その2~</a></li>
</ul>
<div id="more">More...</div>

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

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

<li>AddedList!</li>

それでは、このページをブラウザで見てみましょう。
※ここで注意しなければならないのは、Webサーバ上にファイルをアップロードして確認する必要があるということです。そうしないとAjaxが動いてくれません。

表示できたら、ためしに「More…」をクリックしてみましょう。
下記のように「AddedList!」がクリックの度に追加表示されていくことがわかります。

Infinite Scroll サンプル2

ページ:

1

2
  • このエントリーをはてなブックマークに追加

PAGE TOP