Step18・様々な検索項目を設定する: 楽天ウェブサービス初心者入門講座

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

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

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

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

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

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

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

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

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

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

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

保存先　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

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

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

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

http://localhost/rakuten/sample005/

・Internet Explorer の場合

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサードリンク

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

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

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

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