JavaScript + Ajax 実践サンプル集 - Ajax: Amazonから書籍を取得して立ち読み機能付で表示する V4

Ajax: Amazonから書籍を取得して立ち読み機能付で表示する V4

説明補足説明コード関連書籍コメント投稿

このサンプルは、AmazonのWebサービスを利用して検索キーにマッチした書籍を検索して表示します。書籍のタイトルまたはイメージをクリックするとアマゾンのサイトに移動します。書籍の中身が公開されているときは「preview」の欄に「Google Preview」のアイコンが表示されます。Previewアイコンをクリックするとグーグルのサイトに移動して立ち読みができます。

このサンプルを編集して試してみる

このサンプルは、AmazonとGoogleのWebサービスを利用して実装しています。書籍のプレビューが存在するかどうかは、次のようなWebサービスをリクエストしてチェックしています。

function previewBooks(bibkeys) {
  $.getJSON('http://books.google.com/books'
    + '?jscmd=viewapi'
    + '&bibkeys=' + bibkeys
    + '&callback=?',
    function(booksInfo) {
      for (isbn in booksInfo) {
        var anchor = $('a#' + isbn).get(0);
        var bookInfo = booksInfo[isbn];
        if (bookInfo) {
          anchor.href = bookInfo.preview_url;
          if (bookInfo.preview == "full" || bookInfo.preview == "partial") {
            $(anchor).show();
          }
        }
      }
  });      
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Ajax: Amazon Pipes + Google Book Preview #4   </title>
  <style type="text/css">
  body { font-size: 76%; }
  #books { display: none; border: 1px solid #ccc; border-collapse: collapse; }
  #books td, #books th {border: 1px solid #ccc; border-collapse: collapse; vertical-align: top; }  
  #books th { background-color: #ccc;}    
  #books td img { border: 0px; }
  span.loading { display: none; }
  </style>
  <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="msAjax/ajaxAmazon/sha2.js" type="text/javascript"></script>
  <script src="msAjax/ajaxAmazon/helper.js" type="text/javascript"></script>
  <script type="text/javascript">
  
    var host = 'ecs.amazonaws.jp';
    var awsAccessKeyID = 'AKIAJSVJTISDSTFF6PSQ';
    var keywords;                       // update
    var operation = 'ItemSearch';
    var responseGroup = 'Medium';
    var searchIndex = 'Books';
    var service = 'AWSECommerceService';
    var timestamp;                      // update
    var version = '2009-03-31';
    var signature;                      // update

var loopCoun;
    var loopLimit = 10;
    var template;

$(function() {
      template = $('#booksBody').html();
      $('#btnSearch').click(function() {
        loopCount = 0;
        $('span.loading').show();
        $(this).attr('disabled', 'disabled');
        getBooks();
        return false;
      });
    });  // end of jQuery

function getBooks() {
      keywords = $('#txtKeyword').val();
      keywords = keywords.replace(/\+/g, "%20");
      keywords = encodeURIComponent(decodeURIComponent(keywords));

timestamp = getNowTimeStamp();
      timestamp = timestamp.replace(/\+/g, "%20");
      timestamp = encodeURIComponent(decodeURIComponent(timestamp));

var canonicalQuery = 'AWSAccessKeyId=' + awsAccessKeyID +
                        '&Keywords=' + keywords +
                        '&Operation=' + operation +
                        '&ResponseGroup=' + responseGroup +
                        '&SearchIndex=' + searchIndex +
                        '&Service=' + service +
                        '&Timestamp=' + timestamp +
                        '&Version=' + version;

var stringToSign = 'GET\n' + host + '\n/onca/xml\n' + canonicalQuery;
      signature = sign(awsSecretAccessKey, stringToSign);
      var signedUrl = 'http://' + host + '/onca/xml?' + canonicalQuery + '&Signature=' + signature;

$.getJSON('http://pipes.yahoo.com/pipes/pipe.run'
          + '?_id=...Your Yahoo! Pipes ID...' + '&_render=json'
          + '&Keywords=' + keywords
          + '&Timestamp=' + timestamp
          + '&Signature=' + signature
          + '&_callback=?',
          function(data) {
            if (data.count == 0) {
              loopCount += 1;
              if (loopCount >= loopLimit) {
                $('span.loading').hide();
                $('#btnSearch').attr('disabled', '');
                $('#booksBody').empty()
                  .html('<tr><td colspan="4">Sorry! No Books Returned. Please try again!</td></tr>')
                  .parent().show();
              }
              else {
                setTimeout('getBooks()', 800);
              }
            }
            else {
              $('span.loading').hide();
              $('#btnSearch').attr('disabled', '');
              displayBooks(data);
            }
          }
        );
    }

function displayBooks(data) {
      var books = data.value.items[0].Items.Item;
      var url = 'http://www.amazon.co.jp/exec/obidos/ASIN/@ASIN/accessknowh08-22/ref=nosim';
      var bibkeys = '';
      var html = '';
      for (var book in books) {
        var asin = books[book].ASIN;
        var title = books[book]['ItemAttributes'].Title;
        var author = books[book]['ItemAttributes'].Author;
        var publisher = books[book]['ItemAttributes'].Publisher;
        var publicationDate = books[book]['ItemAttributes'].PublicationDate;
        var amount = books[book]['ItemAttributes']['ListPrice'].Amount;
        var price = books[book]['ItemAttributes']['ListPrice'].FormattedPrice;
        var largeImage = books[book]['LargeImage'].URL;
        var mediumImage = books[book]['MediumImage'].URL;
        var smallImage = books[book]['SmallImage'].URL;
        var href = url.replace('@ASIN', asin);
        bibkeys += asin + ',';
        html += template.replace(/@isbn/g, asin).replace(/@href/g, href).replace('@title', title)
          .replace('@src', smallImage);
      }
      $('#booksBody').empty().append(html).parent().show();
      bibkeys = bibkeys.substring(0, bibkeys.length - 1);
      previewBooks(bibkeys);
    }

<body>

keyword:<input id="txtKeyword" type="text" value="Ajax" />
  <input id="btnSearch" type="button" value="Search Amazon Books!" />
  <span class="loading"><img src="msAjax/ajaxAmazon/loading.gif" alt="" /></span>
  <br /><br />

<table id="books">
    <thead>
      <tr>
        <th>isbn</th>
        <th style="width:200px;">title</th>
        <th>cover</th>
        <th>preview</th>
      </tr>
    </thead>
    <tbody id="booksBody">
      <tr>
        <td>@isbn</td>
        <td style="width:200px;">
          <a href="@href" target="_blank">@title</a>
        </td>
        <td>
          <a href="@href" target="_blank"><img src="@src" alt="" /></a>          
        </td>
        <td>
          <a id="@isbn" target="_blank" style="display: none;">
            <img src="http://code.google.com/apis/books/images/gbs_preview_button1.gif"  alt="" border="0" />
          </a>        
        </td>
      </tr>
    </tbody>
  </table>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Ajax: Amazonから書籍を取得して立ち読み機能付で表示する V4

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Ajax: Amazonから書籍を取得して立ち読み機能付で表示する V4

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!