楽天 様々な検索項目を設定できるようにする方法。

楽天ウェブサービス には、検索キーワード以外にも様々なパラメータが用意されています。

今回はユーザーが、 1ページあたりの取得件数、取得ページ、ソート、商品画像有無などの項目を自由に設定して、検索できるように改良してみましょう。

これから作るシステムです。実際に動かしてみてください。
http://ws.bzen.net/pgtop/rakuten/sample005/

*数字は半角で入力してください。
取得件数(hits) 1~30の範囲で
取得ページ(page) 1~100の範囲で

前回までのプログラムより、詳細な条件で検索できることがわかります。

それでは実際に作ってみましょう。

【1】sample004 をコピーして、 sample005 フォルダを作成します。

*「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten

rakuten-92.gif


【2】「index.html」、「index.js」、「item.js」を一部変更します。

*ファイルは UTF-8 形式で保存してください。
*index.css は変更無し。

rakuten-93.gif

保存先 C:\phpdev\www\rakuten\sample005
ファイル名 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>
    <form id="fm">
      <input type="text" id="txtWord" size="30" value="キーワードを入力してください。" />
      <input type="submit" value="検索する" />
      <input type="reset" value="リセット" /><br /><br />
      取得件数<input type="text" id="txtHits" size="3" value="10" /> 
      取得ページ<input type="text" id="txtPage" size="3" value="1" /> 
      ソート<select id="slctSort">
              <option value="+affiliateRate">アフィリエイト料率順(昇順)</option>
              <option value="-affiliateRate">アフィリエイト料率順(降順)</option>
              <option value="+reviewCount">レビュー件数順(昇順)</option>
              <option value="-reviewCount">レビュー件数順(降順)</option>
              <option value="+itemPrice" selected>価格順(昇順)</option>
              <option value="-itemPrice">価格順(降順)</option>
              <option value="+updateTimestamp">商品更新日時順(昇順)</option>
              <option value="-updateTimestamp">商品更新日時順(降順)</option>
              <option value="random">ランダム順</option>
            </select> 
      商品画像<select id="slctImg">
              <option value="0">すべての商品</option>
              <option value="1" selected>商品画像ありのみ</option>
            </select>
    </form>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


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

onload = init;
var state;
var result;

function init() {
  $('fm').onsubmit = function (){return ( itemDisp() );}
  $('fm').onreset = clearDisp;
  state = $('state');
  result = $('result');
}


function getValue(xmlData, tagName) {
  var tmp = xmlData.getElementsByTagName(tagName);
  var tmpValue;

  //子要素を取得
  var cn = tmp[0].childNodes;

  //値がある場合は取得
  if(cn.length >= 1) {
    tmpValue = tmp[0].firstChild.nodeValue;
  }else{
    tmpValue = "";
  }

  return tmpValue;
}


function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
}


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

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

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

  var paramList = "keyword=" + encodeURIComponent($F('txtWord'));
  paramList += "&hits=" + $F('txtHits');
  paramList += "&page=" + $F('txtPage');
  paramList += "&sort=" + encodeURIComponent($F('slctSort'));
  paramList += "&imageFlag=" + $F('slctImg');

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

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

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

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

    for(i = 0; i < item.length; i++){
      //値を取得
      var itemNameValue = getValue(item[i], 'itemName');
      var itemPriceValue = getValue(item[i], 'itemPrice');
      var affiliateUrlValue = getValue(item[i], 'affiliateUrl');
      var mediumImageUrlValue = getValue(item[i], 'mediumImageUrl');
      var itemCaptionValue = getValue(item[i], 'itemCaption');

      //HTML作成
      tmpHtml += "<p>";

      tmpHtml += "<a href='" + affiliateUrlValue + "'>";
      tmpHtml += itemNameValue + "</a>";
      tmpHtml += "<br />";

      tmpHtml += "<b>" + itemPriceValue + "円</b>";
      tmpHtml += "<br />";

      if(mediumImageUrlValue != ""){
        tmpHtml += "<a href='" + affiliateUrlValue + "'>";
        tmpHtml += "<img src='"+ mediumImageUrlValue + "'>";
        tmpHtml += "</a>";
        tmpHtml += "<br />";
      }else{
        tmpHtml += "商品画像なし";
        tmpHtml += "<br />";
      }

      if(itemCaptionValue.length >= 200){
        tmpHtml += itemCaptionValue.substring(0, 200);
        tmpHtml += "<br />";
      }else{
        tmpHtml += itemCaptionValue;
        tmpHtml += "<br />";
      }

      tmpHtml += "</p>";
      tmpHtml += "<hr />";

    }

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

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

  return false;
}



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

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

rakuten-57.gif


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

http://localhost/rakuten/sample005/

・Internet Explorer の場合
rakuten-94.gif


【5】好きな検索キーワードを入力し、他の条件も変えてみてください。

rakuten-95.gif

*取得件数、取得ページは必ず半角数字で入力します。


【6】「検索する」ボタンをクリックします。

rakuten-96.gif


【7】検索結果が表示されました。

rakuten-97.gif

取得件数など、設定した条件通りの商品データが表示されているでしょうか?


【8】いろいろ条件を変えて、検索してみてください。


【9】「リセット」ボタンをクリックします。

rakuten-98.gif


【10】画面が初期の状態に、リセットされました。

rakuten-99.gif


【11】Firefox でも同じように動作を確認してください。


これでより詳細な設定で、商品データを取得できるようになりました。


【ワンポイント】
実は楽天ウェブサービスには、もっと多くの項目が用意されています。必要に応じて加えていけばよいでしょう。詳細は楽天ウェブサービスのオンラインドキュメントをご覧ください。

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

入力パラメーターのフィールド名を参考にしてください。中継スクリプトへ追加することも忘れずに。


スポンサードリンク

スポンサードリンク






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