無限スクロールをさせる

開発環境：CakePHP2.5.1

TwitterやFacebookのタイムラインを見ていて、ページの下にいくと次から次に過去の記事が表示されていきます。
Googleなどの検索結果のような津城のページ送りとは違う、あのような自動のページ送りの実装方法を紹介します。

インフィニティスクロールを使う

今回はWordpressのプラグインにも使われるインフィニティスクロールを使います。
まず最初はGithub上に公開されているソースをダウンロードします。
https://github.com/paulirish/infinite-scroll

ファイルを設置

ダウンロードしたファイルを解凍して、中にある jquery.infinitescroll.min.js を webroot/js/ 配下に、ajax-loader.gif を /webroot/img/ 配下に設置します。

コントローラーでページネーション

まずはコントローラー側で通常のページネーションの仕組みを作ります。

<?php
public function scroll() {
    $this->Paginator->settings = $this->paginate;
    $samples = $this->Paginator->paginate('Sample');
    $this->set(compact('samples'));
}

無限スクロールのJS

続いて、無限スクロールの動きをさせるJSを別ファイルで用意しておきます。
webroot/js/scroll.js というファイル名で下記の内容を書きます。

$(function() {
    $("#contents").infinitescroll({
        navSelector : '.navigation',
        nextSelector : '.navigation a',
        itemSelector : '.content',
        loading : {
            finishedMsg : '以上です',
            img : '/img/ajax-loader.gif'
        }
    });
});

無限スクロールのビュー

最後にビューを設定します。

<?php echo $this->Html->script('jquery.infinitescroll.min', array('inline' => false)); ?>
<?php echo $this->Html->script('scroll', array('inline' => false)); ?>
<div id="contents">
    <?php foreach($samples as $value): ?>
    <div class="content">
        <?php echo $value['Sample']['name']; ?>
    </div>
    <?php endforeach; ?>

    <div class="navigation">
        <?php echo $this->Paginator->next('次のページ'); ?>
    </div>
</div>

これで、ページをスクロールしていくと、次から次にデータを読み込んでくれます。

この記事を書いた人
最新の記事

柴田篤志

愛知県一宮市在住のWEBシステム屋（SE・プログラマ）。PHP、 CakePHPを利用して日々開発中。CakePHPをこれから始める方、ある程度CakePHPで開発をしている初級〜中級者の方を対象に、CakePHPでの開発をスピードアップするための情報をまとめています。CakePHPの案件のご依頼、御見積はこちらへご連絡ください。