楽天ウェブサービスから、商品データを取得する方法について。

楽天ウェブサービス から Ajax の非同期通信を使って、商品データを取得してみましょう。

プログラムは Ajax初心者入門講座 で学んだものが、ほとんどそのままで動作します。

今回は最も基本的なプログラムなので、パラメーターは直接プログラムの中に書くことにしました。取得した商品データも特に加工することなく、そのまま表示しています。


【1】sample001 フォルダを作成します。

＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\rakuten

rakuten-62.gif


【2】今回は以下のように、4つのファイルを配置します。

rakuten-63.gif

＊ファイルは UTF-8 形式で保存してください。

保存先　C:\phpdev\www\rakuten\sample001
ファイル名　index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="item.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>rakuten</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


保存先　C:\phpdev\www\rakuten\sample001
ファイル名　index.js

onload = init;
var state;
var result;

function init() {
  state = $('state');
  result = $('result');
  itemDisp();
}


保存先　C:\phpdev\www\rakuten\sample001
ファイル名　item.js

function itemDisp() {
  state.innerHTML = "処理中です・・・<br />\n";

  var url = "../lib/ItemSearch.php";

  var paramList = "keyword=" + encodeURIComponent("カニ");
  paramList += "&hits=10";
  paramList += "&page=1";
  paramList += "&sort=" + encodeURIComponent("+itemPrice");
  paramList += "&imageFlag=1";


  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var status = response[0].getElementsByTagName('Status')[0].firstChild.nodeValue;

    if(!(status == "Success")){
      state.innerHTML = "データが見つかりませんでした。";
      return;
    }

    var item = response[0].getElementsByTagName('Item');
    var tmpHtml = "";

    for(i = 0; i < item.length; i++){
      //値を取得
      var itemName = item[i].getElementsByTagName('itemName');
      var itemNameValue = itemName[0].firstChild.nodeValue;

      var itemPrice = item[i].getElementsByTagName('itemPrice');
      var itemPriceValue = itemPrice[0].firstChild.nodeValue;

      var affiliateUrl = item[i].getElementsByTagName('affiliateUrl');
      var affiliateUrlValue = affiliateUrl[0].firstChild.nodeValue;

      var mediumImageUrl = item[i].getElementsByTagName('mediumImageUrl');
      var mediumImageUrlValue = mediumImageUrl[0].firstChild.nodeValue;

      var itemCaption = item[i].getElementsByTagName('itemCaption');
      var itemCaptionValue = itemCaption[0].firstChild.nodeValue;

      //HTML作成
      tmpHtml += "<p>";
      tmpHtml += itemNameValue + "<br />";
      tmpHtml += itemPriceValue + "<br />";
      tmpHtml += affiliateUrlValue + "<br />";
      tmpHtml += mediumImageUrlValue + "<br />";
      tmpHtml += itemCaptionValue + "<br />";
      tmpHtml += "</p>";
      tmpHtml += "<hr />";
    }

    //結果を表示
    result.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先　C:\phpdev\www\rakuten\sample001
ファイル名　index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  width:800px;
  font-size:14px;
  color:#000000;
}



プログラムの準備ができたら実行してみましょう。

【3】C:\phpdev フォルダ内にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

rakuten-57.gif


【4】Webブラウザを起動して、動作を確認します。

http://localhost/rakuten/sample001/

・Internet Explorer の場合
rakuten-66.gif

・Firefox の場合
rakuten-65.gif

商品データごとに水平線で区切るようにしました。

商品データには、たくさんの項目が含まれていますが、その中から商品名、商品価格、アフィリエイトURL、商品画像URL(128x128)、商品説明文を表示しています。


【5】プログラム中の値をいろいろ変えて、商品データを取得してみてください。

・検索キーワード
var paramList = "keyword=" + encodeURIComponent("カニ");

・1ページあたりの取得件数
paramList += "&hits=10";

・取得ページ
paramList += "&page=1";

・ソート
paramList += "&sort=" + encodeURIComponent("+itemPrice");

・商品画像有無フラグ
paramList += "&imageFlag=1";

検索キーワードとソートは、関数で自動的にエンコードするので、そのまま指定できます。

またソートにどんな値が指定できるかは、楽天ウェブサービスのオンラインドキュメントに詳しく書かれています。

http://webservice.rakuten.co.jp/api/itemsearch/


【ワンポイント】
もし商品データが変わらないときは、Webブラウザのキャッシュが表示されている可能性があります。その場合は「ツール → インターネット オプション」でキャッシュを消去してください。


プログラムの詳しい解説は次回に行ないます。


スポンサードリンク

スポンサードリンク






楽天ウェブサービス初心者入門講座TOPへ