第13回　コンテンツを次々に読み込んで無限にスクロールするページを作成する

今回は、次のページを見る際にクリックなどでなく、スクロールした際に自動的に続きのコンテンツを読み込む形をInfinite Scrollプラグインを使用して作成してみたいと思います。

フォトギャラリーなどでページをスクロールして、次の写真を見る際などに、クリックで「続きを見る」といった手法もありますが、ここでは特定の枚数を読み込んでスクロールした際に、次の読み込みたい内容を自動的に読み込む形を作成します。こうすることによって、クリックすることなくサイト全体の写真を見ることなども可能となります。

Webページを下にスクロールし続けていくと、ページが遷移せずに次に来るべきコンテンツを自動で読み込んで同じページに表示し続け、あたかも無限にスクロールし続けるような仕組みは一般的に「無限スクロール」と呼ばれています。これはTwitterをはじめ、SNSのFacebookやGoogle+、画像共有サービスのPinterestなど大手Webサービスで導入されています。今回はこの「無限スクロール」の仕組みを、その手軽さから多くのサイトで導入されているInfinite Scrollプラグインで実装していきます。

■今回作成したサンプル

●無限スクロールを容易に実装できるInfinite Scrollプラグイン

無限スクロールの実装に使用する「Infinite Scroll」プラグインは多くのサイトで導入され、またブログ構築で人気のあるWebアプリケーションWord Pressでも専用プラグインがあるなど、信頼性が高く、実績のあるjQueryプラグインだ。

今回のサンプルは「第10回　クリックでサイドから展開するスライドメニューを作成する」のサンプルをベースに無限スクロール機能を追加していくので、10で導入したスライドメニュー機能と、画像遅延読み込み機能の「Lazyload」プラグインについては詳しく触れないため、こちらを参照ください。

●自動的に読み込むページの準備

無限スクロールの仕組みといっても特別難しいコーディングが必要な訳ではなく、そのページのコンテンツの最後に、次に見せたいページへのリンクを設定しておけば良いです。今回のサンプルではまず、1ページごとに5枚の写真を配置した複数のHTMLを用意し、最初に表示されるページを「index.html」とし、以後次々と見せたいページ（コンテンツ）を「page-2.html」「page-3.html」…と「page-」を接頭辞（プリフィックス）として連番でファイル名をつけておきました。

そして、最初に表示するページ「index.html」のみ、ページ（コンテンツ）の終わり付近に特定のCSSセレクタをつけた要素とともに、次の表示させたいページのリンクを設置します。今回のサンプルではCSSセレクタ「navigation」のdiv要素内に、次のページにあたる「page-2.html」へのリンクを設定したa要素を配置しました。

ただし、ここで注意したいのは、この最初のページに設置したリンクのhref属性に設定したパス（ファイル名）が以後自動で読み込まれるファイル名の基準となることです。具体的には、今回のサンプルのように次のページへのリンクを「page-2.html」とした場合は、2ページの最後で自動的に「page-3.html」が読み込まれ、それ以後も同様にファイル名の文字列の中の数字以前の文字を接頭辞とし、数字以後を拡張子などに設定して割り出されたファイル名を読み込もうと試みます。

このようなリンクは最初のページだけに設定すれば良く、他のページではリンクを設定する必要はありません。2ページ目の「page-2.html」で仮に次へのリンクを「slide-1.html」としてもその設定は無視され、「page-3.html」を読み込もうとする。

<div id="galleryContainer" class="inner">

<div class="column">
<p class="photo shadow">
<img class="deferred" src="img/loader.gif" data-original="img/21.jpg" alt="">
<noscript><img src="img/21.jpg" alt=""></noscript>
</p>
</div>
・・・省略・・・
<div class="column">
<p class="photo shadow">
<img class="deferred" src="img/loader.gif" data-original="img/25.jpg" alt="">
<noscript><img src="img/25.jpg" alt=""></noscript>
</p>
</div>

<div class="navigation">
<p><a href="page-2.html">Next</a></p>
</div>

</div>

最後の画像を読み込むと次のHTMLを読み込む

●Infinite Scrollプラグインの設定

HTMLの準備ができたら、次にJavascriptでInfinite Scrollプラグインを実行する設定を行います。無限にコンテンツを読み込む対象とした要素（今回のサンプルでは#galleryContainer）かinfinitescrollメソッドを実行するとともに、その引数にオプションを設定する事で、読み込みタイミングや読み込み時の挙動などを細かく設定する事ができます。

今回はオプションに、Infinite Scrollプラグインの最低限の設定と、ページ読み込み後のコールバック関数を設定しました。今回のサンプルでは無限スクロールのほか、Lazyloadプラグインによる画像の遅延読み込み処理も行っているため、Infinite Scrollによって新しく読み込まれた画像要素に対して、画像遅延読み込み処理を実行しています。このように新しく読み込まれた要素は元のページで設定した処理が反映されていない場合があるので、読み込み実行後のコールバックで実行するようにしておきましょう。

;(function (d, $) {
  var jQdm_slideMenu;
  jQdm_slideMenu = function(){
    // 初期設定
    var prop = {
    	deferredImage: 'img.deferred',
    	subContainer: '#subContainer',
    	mainNavigation_trigger: '.mainNavigation_trigger',
    	mainNavigation_appear: '.appeared',
      pagerContainer: '.navigation',
      pagerTargetContainer: '#galleryContainer',
      pagerLoadingContents: '#galleryContainer .column'
    }
    function init(){
      // 画像の遅延読み込み関数を実行する
    	deferredImage_setting()
      // スライドメニューの開閉ボタンの設定
    	$(prop.mainNavigation_trigger).find('a').on('click', function(){
    		$(prop.subContainer).toggleClass(replaceString(prop.mainNavigation_appear));
    	});
      // 特定の要素までスクロールしたら、外部ページを読み込む
      $(prop.pagerTargetContainer).infinitescroll({
        itemSelector: prop.pagerLoadingContents,
         animate: false, // ページ読み込み後に特定の位置までアニメーション移動させるか
        extraScrollPx: 300,　// ページ読み込み後に移動する距離（px）
        pixelsFromNavToBottom: 50, // スクロール位置が、ページ下端からどれくらい距離で読み込みを開始するか（px）
        loading: {
          img: "img/loader.gif",  // ローディング中の画像
          msgText: "画像を読み込んでいます...",  // ページ読み込み時に表示されるメッセージ
          finishedMsg: "すべて読み込まれました"  //　すべてのページが読み込まれた後のメッセージ
        },
      }, function(_t, _opt){  // ページ読み込み後の処理
        var _len = _t.length;
        while(_len--){
          deferredImage_setting($(_t[_len]).find(prop.deferredImage));
        }
      });
	  }
…省略…

●Infinite Scrollプラグインの読み込み先ファイルを自分で制御する

前述のようにInfinite Scrollプラグインは最初のページに設定したリンクのファイル名によって、それ以後はそのファイル名に則った連番ファイルが自動で読み込まれていきます。ブログなどのWebページを動的に生成するシステムでは、URI設定をカスタマイズしない限り、大抵の場合、?page=1、?page=2…などの連番パラメータで紐付けられたURIで生成されるため、この仕組みで問題はありませんが、何かしらの理由で、読み込みの順序を自分で制御したいときは、Infinite Scrollのオプションを変更することで制御することが可能です。

Infinite Scrollプラグインのオプションの1つ「path」は、初期値は何も設定されていません（undefined）が、ここにパスの文字列を返す関数を設定しておけば、Infinite Scrollはその関数から返された文字列をファイル名として読み込みにいくようになります。2つめのサンプル（index_loop.html）は、Infinite Scrollプラグインのファイル読み込み先を自分で制御する記述を加えた「script_loop.js」を読み込んでいるため、4つ目のページ（page-4.html）の最後まで行った後、読み込み終了とはならずに再び最初のページ（index.html）を読みに行くようになり、延々とコンテンツが増えていくようになっています。

// 初期設定
    var prop = {
…省略…
      page: {
        amoumt: 4,
        first: 'index.html',
        prefix: 'page-',
        extension: '.html'
      }
    }
…省略…
      $(prop.pagerTargetContainer).infinitescroll({
…省略…
      path: (function(_num){  // 次に読み込むデータのパスを制御する関数
          var _p = prop.page,
          _url = _num > _p.amoumt ? _p.first : _p.prefix + _num + _p.extension;
          return _url;
        })
      }
…省略…
  });

●ページ遷移しないことのメリットとデメリット

「無限スクロール」などの仕組みで、シングルページ（単一ページ）で全てのコンテンツを見せることについてはさまざまな意見があると思います。

一般的な意見として、メリットはページ遷移をきっかけとしたサイト離脱を防ぐことができることや、モバイル環境において片手で次々とコンテンツを閲覧することができるシングルページが、ユーザーフレンドリーであることなどが挙げられます。逆にデメリットは、対策をしておかない限りは、ブラウザにページ履歴が残らないのでブラウザの「戻る」「進む」ことができないことや、目的の情報をすぐに探し出すことができない、PV（ページビュー）が減るなどが挙げられています。

導入の際は、サイトの特性にその仕組みが適しているかどうかを検討したり、A/Bテストなどを行いながら、ユーザーにとって本当に使い勝手が良いかどうかを見極めていきましょう。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

2015/2/18

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！