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

楽天ウェブサービス に対して、動的にパラメータを渡すプログラムは簡単です。要領は検索キーワードの時とほとんど同じです。

実際に動作を確認しながら解説を読むと理解しやすいです。
http://ws.bzen.net/pgtop/rakuten/sample005/

html側で選択リストボックスを設定している部分が複雑に見えます。しかしよく見ると単純な繰り返しだということがわかります。


■index.html側

(1)検索キーワードに value で初期値を設定するようにしました。

<input type="text" id="txtWord" size="30" />
↓
<input type="text" id="txtWord" size="30" value="キーワードを入力してください。" />


(2)取得件数、取得ページのテキストボックスを設定している部分です。

取得件数<input type="text" id="txtHits" size="3" value="10" />　
取得ページ<input type="text" id="txtPage" size="3" value="1" />　

こちらでも初期値を設定しています。


(3)ソートの選択リストボックスを指定している部分です。

ソート<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>　

selectedで初期値を選択しています。リセットした時はこの値に戻ります。


(4)商品画像有無の選択リストボックスを指定している部分です。

商品画像<select id="slctImg">
        <option value="0">すべての商品</option>
        <option value="1" selected>商品画像ありのみ</option>
      </select>


■index.js側

(1)リセットをクリックした時の設定を簡潔にしました。

$('fm').onreset = function (){clearDisp();}
↓
$('fm').onreset = clearDisp;


■item.js側

(1)それぞれの項目の値を、入力フォームから取得するようにしました。

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


【解説】
(1)選択リストボックスは Ajax を使って動的に作成することもできますが、あまり変化のある項目ではないため、html側に直接埋め込みました。


(2)アフィリエイト料率順はユーザーが選択するものではないため、実際には不要です。今回は学習目的なので、わざと使っています。