プログラムは Ajax初心者入門講座 で学んだものが、ほとんどそのままで動作します。
今回は最も基本的なプログラムなので、パラメーターは直接プログラムの中に書くことにしました。取得した商品データも特に加工することなく、そのまま表示しています。
【1】sample001 フォルダを作成します。
＊「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten
【2】今回は以下のように、4つのファイルを配置します。
＊ファイルは UTF-8 形式で保存してください。
保存先 C:\phpdev\www\rakuten\sample001
ファイル名 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>
<div id="state"></div>
<div id="result"></div>
</body>
</html>
保存先 C:\phpdev\www\rakuten\sample001
ファイル名 index.js
onload = init;
var state;
var result;
function init() {
state = $('state');
result = $('result');
itemDisp();
}
保存先 C:\phpdev\www\rakuten\sample001
ファイル名 item.js
function itemDisp() {
state.innerHTML = "処理中です・・・<br />\n";
var url = "../lib/ItemSearch.php";
var paramList = "keyword=" + encodeURIComponent("カニ");
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 = response[0].getElementsByTagName('Status')[0].firstChild.nodeValue;
if(!(status == "Success")){
state.innerHTML = "データが見つかりませんでした。";
return;
}
var item = response[0].getElementsByTagName('Item');
var tmpHtml = "";
for(i = 0; i < item.length; i++){
//値を取得
var itemName = item[i].getElementsByTagName('itemName');
var itemNameValue = itemName[0].firstChild.nodeValue;
var itemPrice = item[i].getElementsByTagName('itemPrice');
var itemPriceValue = itemPrice[0].firstChild.nodeValue;
var affiliateUrl = item[i].getElementsByTagName('affiliateUrl');
var affiliateUrlValue = affiliateUrl[0].firstChild.nodeValue;
var mediumImageUrl = item[i].getElementsByTagName('mediumImageUrl');
var mediumImageUrlValue = mediumImageUrl[0].firstChild.nodeValue;
var itemCaption = item[i].getElementsByTagName('itemCaption');
var itemCaptionValue = itemCaption[0].firstChild.nodeValue;
//HTML作成
tmpHtml += "<p>";
tmpHtml += itemNameValue + "<br />";
tmpHtml += itemPriceValue + "<br />";
tmpHtml += affiliateUrlValue + "<br />";
tmpHtml += mediumImageUrlValue + "<br />";
tmpHtml += itemCaptionValue + "<br />";
tmpHtml += "</p>";
tmpHtml += "<hr />";
}
//結果を表示
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
保存先 C:\phpdev\www\rakuten\sample001
ファイル名 index.css
#state {
font-size:16px;
color:#0000cc;
margin-top:10px;
margin-bottom:10px;
}
#result {
width:800px;
font-size:14px;
color:#000000;
}
プログラムの準備ができたら実行してみましょう。
【3】C:\phpdev フォルダ内にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。
【4】Webブラウザを起動して、動作を確認します。
http://localhost/rakuten/sample001/
・Internet Explorer の場合
・Firefox の場合
商品データごとに水平線で区切るようにしました。
商品データには、たくさんの項目が含まれていますが、その中から商品名、商品価格、アフィリエイトURL、商品画像URL(128x128)、商品説明文を表示しています。
【5】プログラム中の値をいろいろ変えて、商品データを取得してみてください。
・検索キーワード
var paramList = "keyword=" + encodeURIComponent("カニ");
・1ページあたりの取得件数
paramList += "&hits=10";
・取得ページ
paramList += "&page=1";
・ソート
paramList += "&sort=" + encodeURIComponent("+itemPrice");
・商品画像有無フラグ
paramList += "&imageFlag=1";
検索キーワードとソートは、関数で自動的にエンコードするので、そのまま指定できます。
またソートにどんな値が指定できるかは、楽天ウェブサービスのオンラインドキュメントに詳しく書かれています。
http://webservice.rakuten.co.jp/api/itemsearch/
【ワンポイント】
もし商品データが変わらないときは、Webブラウザのキャッシュが表示されている可能性があります。その場合は「ツール → インターネット オプション」でキャッシュを消去してください。
プログラムの詳しい解説は次回に行ないます。
