dropzone.js

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

Posted 9月 3 2014 by tths  , ,

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

今回は、jQuery,Ajaxを使用して無限スクロール風にコンテンツ追加していくサンプルプログラムを作成していきます。
無限スクロールといっても、jQueryであるイベントが発生したときに、あるコンテンツを表示する、という指定をしているにすぎません。
今回はリンクをクリックするとイベントが発生した時に、リストを1行追加する、という処理をAjaxを使用して作成していきます。

※jQueryのプラグインとして「Infinite Scroll」が存在しますが、今回は使用しません。

Infinite Scrollとは

「Infinite Scroll」、日本語では「無限スクロール」は、近年多くのサイトで利用されている手法です。

従来、例えば1000件のコンテンツを一覧表示する際、
全てのコンテンツを1ページに収めるということはあまりしませんでした。
代わりに100件ずつ10ページに分割するような表示が通例でした。

しかし、ページ遷移(「次ページへ」をクリックして、次ページを表示する操作)は、
ユーザにとっては結構ストレスを感じる作業だったりするんですね。
そこで考えられた手法が、「無限スクロール」です。

先ほどの例で行くと100件表示されたコンテンツの下に「もっと見る」というようなリンクを設置します。
このリンクをクリックすると、ページは遷移せずに、次の100件のコンテンツがページ下部に追加されます。

つまり合計200件のコンテンツが表示されたことになります。
そしてその最下部の「もっと見る」をクリックすると次の100件が追加され・・・。
こうしてコンテンツが1ページ内に追加され続けることになるわけです。

この「もっと見る」リンクをクリックするというイベントを、
「ページ最下部に到達したら」というイベントに置き換えることも可能です。
そうすると、ページ最下部に到達したら、コンテンツが自動追加されるので、
ページを無限にスクロールできることになります(コンテンツが無限であれば)。
これが「Infinite Scroll」です。

「Infinite Scroll」は、そのままの名称でjQueryのプラグインとして配布されています。
「Infinite Scroll」の本家サイトで、Infinite Scrollが実装されているので、動きを見てみましょう。

Infinite Scroll本家サイトのスクリーンショットです

※画像クリックでInfinite Scroll 本家サイトが別窓で開きます。

画面最下部に到達すると、自動でページが読みこまれているのがわかります。
また、このサイトは英語ですが、Infinite Scrollの特徴や
メリット・デメリットが箇条書きでまとまっています。
自分でサイトを作る際にInfinite Scrollを使用するか
ページングにするかを検討する際のよい指針になると思います。

プラグインを用いた場合ではAjaxとの連携など、分かりづらい部分が出てきたため、
今回は冒頭に述べたとおりプラグインを用いずに、jQueryを使用して、簡単なInfinite Scrollを実現していきます。
それでは、早速サンプルを作成していきましょう。

環境

今回は、手順4でAjax部分でDBからデータを取得するために、データベースサーバMySQL、
MySQLにアクセスする際のプログラムとしてPHPをインストールしています(手順3までは不要です)。
またAjax動作させるため、Webサーバに作成HTMLは配置していきます。

サンプル作成

分かりやすいようにできるだけ少ないコードでまとめていきます。
作成するのは次の2ファイルです。

  • 1.test.html:表示ページ(Infinite Scrollを実装。2を呼び出す側。)
  • 2.loadmore.html(loadmore.php):追加データ用ファイル(追加データを表示。1から呼び出される側。)

それでは、少しずつサンプルを作成していきましょう。

手順1.HTMLでリストを作成
【test.html】

<ul id="list">
<li><a href="http://www.sakc.jp/blog/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集~その1~</a></li>
<li><a href="http://www.sakc.jp/blog/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集~その2~</a></li>
</ul>
<div id="more">More...</div>

これをローカルに保存してブラウザで見てみると、以下のように表示されます。

infinite scroll のサンプル1

手順2.固定内容をリストに追加する処理を追加
手順1で作成した「More…」をクリックした際にコンテンツをAjaxで読みこむ処理を追加してみましょう。
【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.html",
			type: 'GET',
			success: function(data){
				$("#list").append(data);
			}
		});
	});
});
</script>
<ul id="list">
<li><a href="http://www.sakc.jp/blog/archives/30561">jQueryUIをはじめる方は必見、超簡単サンプル集~その1~</a></li>
<li><a href="http://www.sakc.jp/blog/archives/30592">jQueryUIをはじめる方は必見、超簡単サンプル集~その2~</a></li>
</ul>
<div id="more">More...</div>

1行目でjQueryを読み込み、
2行目以降のjQueryの処理で、loadmore.htmlファイルへajaxで処理を投げています。

手順3.固定内容を表示するファイルを作成
これは非常にシンプルにしておきます。「More…」をクリックでリストが追加させたいので、「loadmore.html」を次のように作成しておきます。
【loadmore.html】

<li>AddedList!</li>

それでは、このページをブラウザで見てみましょう。
※ここで注意しなければならないのは、Webサーバ上にファイルをアップロードして確認する必要があるということです。そうしないとAjaxが動いてくれません。

表示できたら、ためしに「More…」をクリックしてみましょう。
下記のように「AddedList!」がクリックの度に追加表示されていくことがわかります。

Infinite Scroll サンプル2

手順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://www.sakc.jp/blog/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製品のプラグインに組み込まれたりもしています。
    このように使われている場も多いので、興味のある人は試してみるとよいでしょう。


  • Ajax JavaScript jquery jQueryプラグイン



      未経験OKの仕事 |  上場企業の仕事 |  高待遇の仕事 |  外資系の仕事 |  社内SEで検索 |  自社サービスで検索





    メールアドレス
    ご質問・問い合わせ等、ご自由にお書きください。