【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。

無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。
スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。

ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。
最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。

さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。

基本の導入方法
初期設定を行う
- 最低限必須の設定
- 追加できるオプション
［Infinite Scroll］の極限カスタマイズ
初心者の方はWordPressのプラグインを
最後に。

以下より本編をどうぞ。

基本の導入方法

［Infinite Scroll］は［jQuery］無しでは動きません。
まずは jQuery の公式サイトから jQuery の本体ファイル「jquery.js」を、Infinite Scroll 配布ページからは「jquery.infinitescroll.js」をダウンロードします。

［Infinite Scroll］は最新版がgithubでも公開されているので、ページ右下の「Download ZIP」というボタンからダウンロードしましょう。

ダウンロードしてきた「jquery.js」と「jquery.infinitescroll.js」または「jquery.infinitescroll.min.js」は、HTMLの <head>～</head> 内で読み込みます。

<head>
<script src="jquery.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
</head>

ちなみに「jquery.infinitescroll.js」と「jquery.infinitescroll.min.js」の違いは、単にファイルを圧縮してあるか否かなので、記述してある内容は同じです。
最新版の「version 2.1.0」のケースだと圧縮前のファイルが41KB、圧縮済みファイルが25KBとなっています。約15KBというのは微々たるものですが、ほんの僅かでもサイトの高速化を図るために、圧縮してある「jquery.infinitescroll.min.js」を利用することをお勧めします。

<head>～</head>内で各スクリプトを読み込んだら、次は無限スクロールで表示させるコンテンツ部分を作り込んでいきます。

ここでは仮に、トップページで「index.php」というファイルを使っていて、その後に続く各ページのファイル名が「index-2.php」「index-3.php」「index-4.php」であると想定して説明していきます。

以下は「index.php」内、<body>～</body> の中の主要コンテンツ部分の記述例です。

<body>
<div id="content">
	<div class="article">
	<p>
	ここに「index.php」のコンテンツが入ります。
	</p>
	</div>
	<div class="navigation">
	<p><a href="index-2.php">次のページ</a></p>
	</div>
</div>
</body>

コンテンツは「article」というクラス名の要素の中に記述され、ナヴィゲーション部分には「navigation」というクラス名が付いています。
リンク先はもちろん「index-2.php」になっていますね。

この「index-2.php」の中身も、主要コンテンツ部分の構造は「index.php」と同じです

<body>
<div id="content">
	<div class="article">
	<p>
	ここに「index-2.php」のコンテンツが入ります。
	</p>
	</div>
	<div class="navigation">
	<p><a href="index-3.php">次のページ</a></p>
	</div>
</div>
</body>

同様に「index-3.php」「index-4.php」……と続くファイルも準備しておきます。

初期設定を行う

以上で準備が整いましたが、これだけでは無限スクロールが起動しません。
別途スクリプトの初期設定を記述する必要があります。
記述する場所は「jquery.infinitescroll.min.js」を読み込んだ後が適当でしょう。
先ほどの <head>～</head> 内に戻り、以下のように追記します。

<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
$(function(){
	$('#content').infinitescroll({
		navSelector  : ".navigation",
		nextSelector : ".navigation a",
		itemSelector : ".article"
	});
});
</script>
</head>

以上。とりあえずはこれで［Infinite Scroll］が動きます。
通常［Infinite Scroll］を起動させるには「navSelector」「nextSelector」「itemSelector」の3つの値を指定します。
追加で指定できるオプションも合わせると、以下のような機能があります。

最低限必須の設定

navSelector: リンクを囲む要素を指定
nextSelector: リンク要素自体を指定
itemSelector: 無限スクロールで表示させたい要素を指定

追加できるオプション

dataType: 'html'、'php'、'json' など、読み込み先ファイルの形式を指定できる
loading - img: ローディング中に表示する画像のパスを指定
loading - msgText: ローディング中に表示するテキストを指定
loading - finishedMsg: 全てのコンテンツを表示し終えたときのメッセージ
maxPage: 読み込みを行う上限回数
animate: コンテンツのロード時にアニメーション処理を行うか否か
extraScrollPx: アニメーションでスクロールする量をピクセルで指定。デフォルトの値は150。「animate」を true にした場合のみに有効
bufferPx: 次のコンテンツをロードするタイミングを指定。ピクセル単位で指定する。値を大きくするとより早いタイミングでローディングが開始される
errorCallback: 404エラーが発生したときの処理を記述。所謂コールバック関数を指定できる。

その他の細かい設定は以下のリンクより、公式サイトを参照してください。

Infinite Scroll Options

［Infinite Scroll］の極限カスタマイズ

……というワケで、ここから先は中級者～上級者仕様のカスタマイズ方法です。一部コアファイルのコードも書き換えているので初心者の方にはお勧めできません。
まずは以下のリンク先よりサンプルをご覧ください。

［Infinite Scroll］：オンズのサンプル

上記サンプルをご覧いただいてお気づきかと思いますが、このサンプルでは「Read More」のボタンをクリックすると次のページのコンテンツが読み込まれるように改造してあります。また、フェードインしながらコンテンツが表示されており、ローディング中のアニメーションの処理にも手が加えられ、表示・非表示が大変スムーズになっています。その他、気づきにくい点ですが、最大ページ数をあらかじめ指定しておくことで、最後のページ以降の読み込みを停止し、サーバー側で404エラーが発生しないように仕込んでいます。

それぞれのカスタマイズの解説をしていきます。

追加コンテンツをフェードインしながら表示させる。

デフォルトの状態だと単にコンテンツがいきなり表示されるだけですが、コールバック関数を指定してフェードインしながらゆっくりと表示させます。

通常のオプション設定の後に続けて以下のコードを挿入すればOKです。

function(newElements) {
	$(newElements).hide().delay(100).fadeIn(600);
});

これなら簡単ですね。

ボタンのクリックで次のコンテンツを表示させる

スクロールによって自動でローディングを行うのではなく、手動でクリックなどの動作によって無限スクロールを起動させたいときは、処理を一時「unbind」して、クリックによって再起動「retrieve」するようにコードを記述します。
具体的には以下のようになるでしょう。

$('#content').infinitescroll('unbind');
$(".navigation a").click(function(){
	$('#content').infinitescroll('retrieve');
	return false;
});

このとき、環境によってはナヴィゲーションのボタンがうまく再表示されないケースがあります。
解決策としてコールバック関数を定義します。
先ほどの「フェードイン表示」と併記すると、以下のようなコードになります。

function(newElements) {
	$(newElements).hide().delay(100).fadeIn(600);
	$(".navigation").appendTo("#content").delay(300).fadeIn(600);
});

これでナヴィゲーションが常に最下部に再表示されるようになります。

ローディング中の画像のセンタリングについて

ローディング中の画像やメッセージは「#infscr-loading」というボックス要素の中に表示されます。
これをウィンドウの中央に配置したいとき、通常はCSS側でtext-align:center;とmargin:0 auto;を指定しておけば充分なはずです。

#infscr-loading {
text-align:center;
margin:0 auto;
}

しかし実際の挙動を注意深く観察してみると、画像やメッセージが左端から中央までスライドして表示されてしまいます。

原因はjQueryメソッドの「show()」を使っているためです。
この挙動を直すにはコアファイルの「jquery.infinitescroll.min.js」を直接編集する必要があります。

ローディング画像に関する記述で.show(s.loading.speed,e.proxy)というコードがあるはずなので、この「show」の箇所を「fadeIn」等のjQueryメソッドに書き換えましょう。

初心者の方はWordPressのプラグインを

［Infinite Scroll］の機能を網羅して説明してきましたが、初心者の方にはつまずく箇所が所々あるかと思います。そんなとき、もしサイトをWordPressベースで構築しているのであれば、プラグインを利用してしまうのが手っ取り早いでしょう。

Jetpackを使っているのであればボタン1つで無限スクロールを有効化できるのでさらに便利です。
この記事で説明したようなカスタマイズは難しいですが、基本的な機能は充分に使えます。

Infinite-Scroll

Jetpack by WordPress.com

各種設定も管理画面から行えるので初心者の方にはWordPressプラグイン版の利用をお勧めします。

最後に。

だいぶ長くなったのでこの辺りで説明を終えますが、無限スクロールは［jQuery Masonry］との相性が良く、さらに優れたUIを実装できるようになります。
次回はこの［Masonry］×［Infinite Scroll］の使い方を説明していきますのでご期待ください。

［Masonry］×［Infinite Scroll］

オンズではこのような各スクリプトの実装のお手伝いも承っております。
比較的安価で最新・高機能なシステムを導入できますので、ご希望の方はお気軽にお問い合わせください。
お問い合わせはオンズのお問い合わせフォームからどうぞ。