Infinite Scroll:Ajaxと組み合わせて無限スクロール風にコンテンツ追加するJSサンプル


手順4.固定内容ではなく、DBからデータを取得する
ここまでは、Webサーバさえ用意できていれば実装できる内容でした。
しかし、これでは「AddedList!」が表示されるだけで、あまり面白くありません。
そこで最後に、作成した「loadmore.html」を、DB(MySQL)から取得した値を表示するようなプログラムに加工してみましょう。

こんなデータベーステーブルを想定します。

id title
30561 jQueryUIをはじめる方は必見、超簡単サンプル集~その1~
30592 jQueryUIをはじめる方は必見、超簡単サンプル集~その2~
30826 jQueryUIをはじめる方は必見、超簡単サンプル集~その3~
30954 jQueryUIをはじめる方は必見、超簡単サンプル集~その4~
30958 jQueryUIをはじめる方は必見、超簡単サンプル集~その5~

SQLとしては下記のようになります。
>create database sample;
>use sample;
>create table contents_tbl(id int(11),title text);
>insert into contents_tbl(id,title) values
->(30561,’jQueryUIをはじめる方は必見、超簡単サンプル集~その1~’),
->(30592,’jQueryUIをはじめる方は必見、超簡単サンプル集~その2~’),
->(30826,’jQueryUIをはじめる方は必見、超簡単サンプル集~その3~’),
->(30954,’jQueryUIをはじめる方は必見、超簡単サンプル集~その4~’),
->(30958,’jQueryUIをはじめる方は必見、超簡単サンプル集~その5~’);

「More…」をクリックすると、このテーブルの情報を一つずつ追加するように、
上記で作成したtest.html、loadmore.htmlを改修しましょう。

【test.html】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	$('#more').click(function(){
		$.ajax({
			url: "./loadmore.php",
			type: 'POST',
			data: {
				index: i,
			},
			success: function(data){
				if(data){
					$("#list").append(data);
					i++;
				}else{
					$("#list").append('No more posts to show.');
				}
			}
		});
	});
});
</script>
<ul id="list">
</ul>
<div id="more">More...</div>

.ajaxの処理の部分に変更を加えていますので、そのあたりをチェックしてみてください。

【loadmore.php】
※まず、loadmore.htmlではなく、loadmore.phpに拡張子を変更しておきます。

<?php
//PDOでDB接続
$dsn = 'mysql:dbname=sample;host=localhost';
$user = 'xxxx';
$password = 'xxxx';
global $pdo;
$pdo = new PDO($dsn, $user, $password);

//SQLを作成し実行
$sql = "select * from contents_tbl limit " . $_POST['index'] . ", 1";
$st = $pdo->prepare($sql);
$st->execute();
$row = $st->fetch(PDO::FETCH_ASSOC);

//結果行が取得できたらliタグに埋め込んで表示
if($row){
?>
<li><a href="http://tech.pjin.jp/archives/<?=$row['id']?>"><?=$row['title']?></a></li>
<?php
}
?>

SQLを使用して、1行分のデータを取得します。
そのとき取得するデータは、呼び出し側で1つずつ指定した順番をずらしていくようにしています(indexの部分)。
呼び出し側でAjaxの呼び出しがsuccessする度にindex「i」の値を1ずつ増加させています。

実際にブラウザで見てみましょう。

①最初の表示。「More…」だけ表示されています。
Infinite Scroll サンプル3

②「More…」をクリックすると、DBから取得された情報がAjaxで取得され、表示されます。
Infinite Scroll サンプル4

③何度もクリックすると、どんどん出てきます。
Infinite Scroll サンプル5

④これ以上なくなると、メッセージが表示されます。
Infinite Scroll サンプル6

このように、クリックイベントをトリガーにして、Ajaxでデータを取ってきて追加表示、という流れがわかってしまえば、Infinite Scrollは簡単に実装できます。今回はリスト1行分という、少しの情報でしたので、スクロールしている感じがないですが、表示コンテンツが大きいものになれば、勝手にスクロールが必要な縦幅になります。
例えば

  • タグを
    <li style="height:300px;">
    

    のようにするだけでもイメージが掴めるかと思います。
    また、jQueryのslideDownやfadeInメソッドなどを使用すれば、
    表示アニメーションにも趣向をこらすことができますね。

    まとめ

    今回はjQueryを使用して、昨今のWebサイトでよく使われているInfinite Scrollの仕掛けを作ってみました。
    jQueryを作りこんでいけば様々な動的インターフェースが実装できますが、Infinite Scrollはそのメジャーなものの1つでしょう。
    簡単なAjaxの体験にもなる、面白い仕組みです。
    今回は取り挙げませんでしたが、jQueryのプラグインであるInfinite Scrollは、WordPressというCMS製品のプラグインに組み込まれたりもしています。
    このように使われている場も多いので、興味のある人は試してみるとよいでしょう。

    ページ:
    1

    2

    • このエントリーをはてなブックマークに追加
  • PAGE TOP