今回はユーザーが、 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
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 を起動します。
【4】Webブラウザを起動して、 sample005 の動作を確認します。
http://localhost/rakuten/sample005/
・Internet Explorer の場合
【5】好きな検索キーワードを入力し、他の条件も変えてみてください。
＊取得件数、取得ページは必ず半角数字で入力します。
【6】「検索する」ボタンをクリックします。
【7】検索結果が表示されました。
取得件数など、設定した条件通りの商品データが表示されているでしょうか？
【8】いろいろ条件を変えて、検索してみてください。
【9】「リセット」ボタンをクリックします。
【10】画面が初期の状態に、リセットされました。
【11】Firefox でも同じように動作を確認してください。
これでより詳細な設定で、商品データを取得できるようになりました。
【ワンポイント】
実は楽天ウェブサービスには、もっと多くの項目が用意されています。必要に応じて加えていけばよいでしょう。詳細は楽天ウェブサービスのオンラインドキュメントをご覧ください。
http://webservice.rakuten.co.jp/api/itemsearch/
入力パラメーターのフィールド名を参考にしてください。中継スクリプトへ追加することも忘れずに。 ]]>
