啓文社 - 2010.05.15　jQuery.autopager スクロールでどんどん表示

トップ > 2010年 > 2010.05.15　jQuery.autopager スクロールでどんどん表示

jQuery.autopager スクロールでどんどん表示

2010.05.15記

Bingの画像検索などで、検索結果をスクロールすると、次々と検索結果があらわれてくるものがあるのですが、今回は、jQuery.autopager を使って似たようなことが実現できるのを試してみました。
サンプルでは、Amazon の「本」のトップセラーを取得し表示させています。

当サイトの設置サンプル

ヘッダ部

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="jquery.autopager.js"></script>
<script type="text/javascript">
	$(function() {
		$.autopager({content: '#apContent'});
	});
</script>

サンプルでは、jQuery は Google AJAX Libraries API を利用してロードしています。
jQuery.autopager のデフォルトでは class="content" 内に書き足すのですが、当サイトは既に class="content" が存在しているので、以下のようにターゲットコンテンツ部を指定しました。

$.autopager({content: '#apContent'});

<div id="#apContent">ここにコンテンツが表示され、スクロールで書き足されます。</div>

本文

require_once 'amazon.php';

$page = isset($_GET['p']) ? intval($_GET['p']): 1;
$next_page = $page + 1;

$amazon = new amazon();
$r = $amazon->get($page);

$contents = '';
$no = ($page - 1) * 10 + 1;
for ($i=0; $i < count($r); $i++) {
  $contents .= '<div class="book">';
  $contents .= '<span class="ranking">' . $no . '</span>: ';
  $contents .= '<a href="'. htmlspecialchars($r[$i]['DetailPageURL'], ENT_QUOTES) .'" target="_blank">';
  $contents .= htmlspecialchars($r[$i]['ItemAttributes']['Title'], ENT_QUOTES);
  $contents .= '<br />';
  if (isset($r[$i]['ItemAttributes']['Author'])) {
    if (is_array($r[$i]['ItemAttributes']['Author'])) {
      foreach ($r[$i]['ItemAttributes']['Author'] as $author) {
        $contents .= htmlspecialchars($author, ENT_QUOTES) . ', ';        
      }
      $contents = rtrim($contents, ', ');
    } else {
      $contents .= htmlspecialchars($r[$i]['ItemAttributes']['Author'], ENT_QUOTES);
    }
    $contents .= '<br />';
  }
  if (isset($r[$i]['MediumImage']['URL'])) {
    $contents .= '<img src="'. htmlspecialchars($r[$i]['MediumImage']['URL'], ENT_QUOTES) .'" />';
  }
  $contents .= '</a>';
  if (isset($r[$i]['ItemAttributes']['ListPrice']['FormattedPrice'])) {
    $contents .= '<div class="price">';
    $contents .= htmlspecialchars($r[$i]['ItemAttributes']['ListPrice']['FormattedPrice'], ENT_QUOTES);
    $contents .= '</div>';
  }
  $contents .= '</div>';
  $no++;
}

echo <<<END
<h2>jQuery.autopager サンプル<br />
Amazonトップセラー（本：BrowseNode=465392）</h2>
<div id="apContent">
  {$contents}
</div>
<a href="http://www.keibunsya.co.jp/modules/features/index.php?content_id=84&p={$next_page}" rel="next">Next</a>
END;

jQuery.autopager のデフォルトでは rel="next" 属性がついた <a> タグの URL 先のデータを読み込み、その中のコンテンツ部（<div id="apContent">ここ</div>）を取得し、現在のコンテンツ部に追加します。

Amazon の取得、HTML成形にはPHPを利用していますが、Amazonのデータを取得する「amazon.php」にはシークレット・キーなどが含まれているので、ここでは説明は省略します。

Service        : 'AWSECommerceService'
AWSAccessKeyId : '△△△△'
AssociateTag   : '○○○-22'
Version        : '2009-03-31'
ResponseGroup  : 'Large'
Operation      : 'ItemSearch'
BrowseNode     : '465392'
SearchIndex    : 'Books'
Sort           : 'salesrank'
ContentType    : 'text/xml'
ItemPage       : $page

サンプルでは、このようなデータでAmazon の Product Advertising API にデータを要求しています。

当サイトのサンプルではスクロールがページの下に来てから表示するまでに若干の時間がかかります（4～5秒ぐらい）。どんどんスクロールしてみてください。なかなか最後まではいきつけません

この記事の1行目に飛ぶ

2010.06.15　ブルーレイレコーダー

2010年

2010.04.15　PHPExcel で Excelファイルをつくる