無限スクロールをさせる
開発環境: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/ 配下に設置します。
コントローラーでページネーション
まずはコントローラー側で通常のページネーションの仕組みを作ります。
1 2 3 4 5 6 |
<?php public function scroll() { $this->Paginator->settings = $this->paginate; $samples = $this->Paginator->paginate('Sample'); $this->set(compact('samples')); } |
無限スクロールのJS
続いて、無限スクロールの動きをさせるJSを別ファイルで用意しておきます。
webroot/js/scroll.js というファイル名で下記の内容を書きます。
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { $("#contents").infinitescroll({ navSelector : '.navigation', nextSelector : '.navigation a', itemSelector : '.content', loading : { finishedMsg : '以上です', img : '/img/ajax-loader.gif' } }); }); |
無限スクロールのビュー
最後にビューを設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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> |
これで、ページをスクロールしていくと、次から次にデータを読み込んでくれます。
柴田 篤志
最新記事 by 柴田 篤志 (全て見る)
- WordPressとCakePHPの共存 - 2014年10月22日
- サイトマップの作成方法 - 2014年10月12日
- INSERTしたIDを取得する - 2014年10月4日