圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部）
infinite scroll
「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。
インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。
WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。
step1 jQueryプラグインの読み込み
jQuery本体をjQueryの公式サイトから、infinite scrollをinfinite scroll配布ページからダウンロードします。
infinite scrollはgithubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。
infinite scrollプラグイン配布ページの画像
インフィニティスクロールを利用したいWebページのbodyの閉じタグ直前でjQuery本体とinfinite scrollのJavaScriptファイルを読み込み、その後にプラグインの設定を記述します。
//(中略)
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
//プラグインの設定
</script>
</body>
</html>
step2 利用方法
プラグインの設定部分を記述します。まずはプラグインを適用したい要素をセレクターに指定します。
//(中略)
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<script>
$(function(){
$('#content').infinitescroll();
});
</script>
</body>
</html>
jQueryプラグインは、適用したい要素に、.(ドット)繋ぎでプラグイン名を書き、丸括弧"()"とセミコロン";"を書くことで実行されます。以降の連載でも同じように書きますので、覚えておきましょう。
最後にオプションを指定します。基本的な機能は以下の3つを指定すれば利用できます。
- navSelector：次に読み込む要素を囲む要素を指定します
- nextSelector：次に読むこむ要素自体を囲む要素を指定します
- itemSelector：表示させたい要素を指定します
<script>
$(function(){
$('#content').infinitescroll({
navSelector : "div.navigation",
// ナビゲーション要素を指定します。
nextSelector : "div.navigation a",
// ナビゲーションの「次へ」の要素を指定します。
itemSelector : "#content div.post"
// コンテンツ要素を指定します。
});
});
</script>
ほかにも以下のようなオプションが用意されています。
- debug：console.logに出力するデバッグメッセージを有効／無効にします
- loadingImg：ローディング時に表示する画像のパスを指定します
- loadingText：ローディング画像に添えるテキストの指定をします
- animate：コンテンツのロード時にアニメーションさせるか指定します
- extraScrollPx：次のコンテンツを読み込むまでのスクロール量をピクセル指定します
- donetext：全てのコンテンツを表示し終わったら表示させるテキストを指定します
- errorCallback：404ページがコールされたときや、これ以上のコンテンツがない場合の処理を指定します
<script>
$(function(){
$('#content').infinitescroll({
debug: true,
// console.logに出力するデバッグメッセージを有効にする
loadingImg : "/img/loading.gif",
// ローディング時のローディング画像のパスの指定
// デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif"
loadingText : "Loading new posts...",
// ローディング画像に添えるテキストの指定
// デフォルトのテキストは: "<em>Loading the next set of posts...</em>"
animate : true,
// コンテンツのロード時にアニメーションさせるかの指定
// デフォルトは: false
extraScrollPx: 50,
// 次のコンテンツを読み込むまでのスクロール量のピクセルを指定
// animateを有効にさせるにはこの値を必ず指定しましょう。
// デフォルトの値は: 150
donetext : "I think we've hit the end, Jim" ,
// 全てのコンテンツを表示し終わったら表示させるテキスト
// デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>"
errorCallback: function(){},
// 404ページがコールされたり、これ以上のコンテンツがない場合の処理
// このオプションはバージョン1.2から追加されました。
},function(arrayOfNewElems){
// コールバック
});
</script>
上記以外にも、githubで公開されているwikiを見てみると、多くのオプションや、多彩な使い方が記述されていますので、興味のある方は一度目を通しておきましょう。
step3 記述サンプル
実際の実装例を紹介します。1ページ目のHTMLから用意します。この例では続きとして表示したいコンテンツもHTMLファイルですので、dataTypeは「HTML」とします。
ファイル名（例）：infinitescrolltest.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>infinite scrollのテスト</title>
</head>
<body>
//itemSelector
<div id="content">
<div class="post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi error quas accusantium sunt aliquam tempora asperiores. Vel quia voluptatum nihil animi ratione autem cum illum culpa libero alias accusamus corporis consequuntur doloremque aliquid placeat esse rerum deserunt eaque est natus voluptate necessitatibus perferendis dignissimos iure veniam error aut deleniti obcaecati ea optio aliquam laudantium dolore aspernatur expedita odit nulla assumenda modi quod laboriosam sequi labore fugiat.</p>
<p>Quia sequi tempore ad saepe voluptas quaerat facilis consectetur ullam quam esse ipsa ipsum. Expedita nulla facilis mollitia blanditiis vitae ad dolorum quasi incidunt dignissimos labore animi laudantium similique beatae eveniet fuga in laboriosam aliquam quo autem velit molestias sunt quam nemo enim tempore saepe ullam optio nihil iste architecto accusamus repellendus dolores eaque iusto culpa nobis asperiores temporibus rem explicabo possimus! Nisi consectetur soluta vero facere aut nemo minus vel laudantium cupiditate dolore quaerat itaque neque saepe ab libero fugit ex voluptatibus dolor quas veniam est ipsa eveniet provident aperiam nesciunt consequatur eius iusto inventore qui nihil animi ea debitis deleniti modi nobis cumque ut placeat quasi ad accusamus laborum illo.</p>
<p> Amet nihil in cupiditate quis adipisci natus aut veritatis maxime ad corporis beatae maiores saepe illo nesciunt voluptate excepturi possimus tempore! Laborum?</p>
<!-- /.post --></div>
//navSelector
<div class="navigation">
//nextSelector
<a href="infinitescrolltest2.html">next page?</a>
<!-- /.navigation --></div>
<!-- /#content --></div>
<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 : "#content .post",
// 表示させる要素を指定します。
dataType : "html"
// 読み込むデータの形式を指定します。
});
});
</script>
</body>
</html>
オプションのnavSelectorには「.navigation」が指定されています。nextSelectorを包む親の要素が指定されています。HTMLでは以下の箇所ですね。
//（中略）
<div class="navigation">
//nextSelector
<a href="infinitescrolltest2.html">next page?</a>
<!-- /.navigation --></div>
//（中略）
itemSelectorには表示したい要素として「#content .post」が指定されています。 HTMLでは以下の箇所です。
//（中略）
<div class="post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi error quas accusantium sunt aliquam tempora asperiores. Vel quia voluptatum nihil animi ratione autem cum illum culpa libero alias accusamus corporis consequuntur
//（中略）
corporis beatae maiores saepe illo nesciunt voluptate excepturi possimus tempore! Laborum?</p>
<!-- /.post --></div>
//（中略）
次に、インフィニティスクロールで読み込んで表示する2ページ目のHTMLは以下のように書きます。
ファイル名（例）：infinitescrolltest2.html
//itemSelector
<div id="content">
<div class="post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi error quas accusantium sunt aliquam tempora asperiores. Vel quia voluptatum nihil animi ratione autem cum illum culpa libero alias accusamus corporis consequuntur doloremque aliquid placeat esse rerum deserunt eaque est natus voluptate necessitatibus perferendis dignissimos iure veniam error aut deleniti obcaecati ea optio aliquam laudantium dolore aspernatur expedita odit nulla assumenda modi quod laboriosam sequi labore fugiat.</p>
<p>Quia sequi tempore ad saepe voluptas quaerat facilis consectetur ullam quam esse ipsa ipsum. Expedita nulla facilis mollitia blanditiis vitae ad dolorum quasi incidunt dignissimos labore animi laudantium similique beatae eveniet fuga in laboriosam aliquam quo autem velit molestias sunt quam nemo enim tempore saepe ullam optio nihil iste architecto accusamus repellendus dolores eaque iusto culpa nobis asperiores temporibus rem explicabo possimus! Nisi consectetur soluta vero facere aut nemo minus vel laudantium cupiditate dolore quaerat itaque neque saepe ab libero fugit ex voluptatibus dolor quas veniam est ipsa eveniet provident aperiam nesciunt consequatur eius iusto inventore qui nihil animi ea debitis deleniti modi nobis cumque ut placeat quasi ad accusamus laborum illo.</p>
<p> Amet nihil in cupiditate quis adipisci natus aut veritatis maxime ad corporis beatae maiores saepe illo nesciunt voluptate excepturi possimus tempore! Laborum?</p>
<!-- /.post --></div>
//navSelector
<div class="navigation">
//nextSelector
<a href="infinitescrolltest3.html">next page?</a>
<!-- /.navigation --></div>
<!-- /#content --></div>
head要素やbody要素を記述しなくても、追加したい要素だけ記述すれば大丈夫です。（もちろんhead要素など記述しても問題ありませんが、itemSelectorで指定した箇所のみが抜き出されて表示されます。）
このように、指定した形式のファイルを表示したい数だけ用意し、nextSelectorに指定したセレクター（この例では「.navigation a」）のhref属性に、ファイル名を順に指定していきます。
上記のHTMLですと
<div class="navigation">
//このhrefに次に読み込むファイルを指定する
<a href="infinitescrolltest2.html">next page?</a>
<!-- /.navigation --></div>
この部分ですね。これでFacebookのようなインフィニティスクロールが実現できます。
このプラグインにはWordPressプラグインも用意されています。
WordPressプラグインは以下のページからダウンロードできます。
http://www.infinite-scroll.com/installation/
インフィニティスクロールはブログ記事の一覧表示やギャラリーに向いています。 そういったタイプのWebサイトは、WordPressで構築することが多いでしょうから、覚えておくといいかもしれません。
