スポンサードリンク

楽天 検索キーワードを入力できるようにする方法。

楽天ウェブサービス では、楽天市場の2000万点を超える商品データを取得することができます。

前回までのサンプルプログラムでは、ソースコードに直接キーワードを埋め込んでいました。これでは自由自在に商品を表示するには不十分です。

そこで今回は、検索キーワードをユーザーがフォームから入力し、商品を検索できるように改良してみましょう。

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


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

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

rakuten-83.gif


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

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

rakuten-84.gif

保存先 C:\phpdev\www\rakuten\sample004
ファイル名 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" />
      <input type="submit" value="検索する" />
      <input type="reset" value="リセット" />
    </form>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


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

onload = init;
var state;
var result;

function init() {
  $('fm').onsubmit = function (){return ( itemDisp() );}
  $('fm').onreset = function (){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\sample004
ファイル名 item.js

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

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

  var paramList = "keyword=" + encodeURIComponent($F('txtWord'));
  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 = 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 />";

      tmpHtml += "<a href='" + affiliateUrlValue + "'>";
      tmpHtml += "<img src='"+ mediumImageUrlValue + "'>";
      tmpHtml += "</a>";
      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ブラウザを起動して、 sample004 の動作を確認します。

http://localhost/rakuten/sample004/

・Internet Explorer の場合
rakuten-85.gif


【5】好きな検索キーワードを入力し、「検索する」ボタンをクリックします。

rakuten-86.gif


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

rakuten-87.gif


【7】次は「リセット」ボタンをクリックしてみましょう。

rakuten-88.gif


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

rakuten-89.gif


【9】わざと無さそうな検索キーワードを入力してみると、「データが見つかりませんでした」というメッセージが表示されます。

rakuten-90.gif


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

rakuten-91.gif


以上で楽天ウェブサービスの膨大なデータに、検索キーワードを使ってアクセスできるようになりました。

あとは 1ページあたりの取得件数、取得ページ、ソート、商品画像有無なども変更できると便利ですね。


スポンサードリンク






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