前回までのサンプルプログラムでは、ソースコードに直接キーワードを埋め込んでいました。これでは自由自在に商品を表示するには不十分です。
そこで今回は、検索キーワードをユーザーがフォームから入力し、商品を検索できるように改良してみましょう。
これから作るシステムです。実際に動かしてみてください。
http://ws.bzen.net/pgtop/rakuten/sample004/
【1】sample003 をコピーして、 sample004 フォルダを作成します。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten
【2】「index.html」、「index.js」、「item.js」を一部変更します。
＊ファイルは UTF-8 形式で保存してください。
＊index.css は変更無し。
保存先 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 を起動します。
【4】Webブラウザを起動して、 sample004 の動作を確認します。
http://localhost/rakuten/sample004/
・Internet Explorer の場合
【5】好きな検索キーワードを入力し、「検索する」ボタンをクリックします。
【6】検索結果が表示されました。
【7】次は「リセット」ボタンをクリックしてみましょう。
【8】画面が初期の状態に、リセットされました。
【9】わざと無さそうな検索キーワードを入力してみると、「データが見つかりませんでした」というメッセージが表示されます。
【10】Firefox でも同じように動作を確認してください。
以上で楽天ウェブサービスの膨大なデータに、検索キーワードを使ってアクセスできるようになりました。
あとは 1ページあたりの取得件数、取得ページ、ソート、商品画像有無なども変更できると便利ですね。
