今回は以下のことを実現してみましょう。
・商品名をアフィリエイトリンクにする
・商品価格を太字にして、「円」の文字を付ける
・商品画像をアフィリエイトリンクにする
・商品説明文を200文字以内にする
このへんはプログラミングというより、HTMLタグの知識が必要な部分です。
【1】sample001 をフォルダごとコピーして、 sample002 を作成します。
*「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten

【2】コピーなので sample001 とまったく同じですが、「item.js」だけを一部変更します。
*ファイルは UTF-8 形式で保存してください。
*index.html、index.js、index.css は変更無し。

保存先 C:\phpdev\www\rakuten\sample002
ファイル名 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 += "<a href='" + affiliateUrlValue + "'>" + itemNameValue + "</a><br />";
tmpHtml += "<b>" + itemPriceValue + "円</b><br />";
tmpHtml += "<a href='" + affiliateUrlValue + "'><img src='"+ mediumImageUrlValue + "'></a><br />";
if(itemCaptionValue.length >= 200){
tmpHtml += itemCaptionValue.substring(0, 200) + "<br />";
}else{
tmpHtml += itemCaptionValue + "<br />";
}
tmpHtml += "</p>";
tmpHtml += "<hr />";
}
//結果を表示
result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";
}
function showErrMsg(){
clearDisp();
state.innerHTML = "データを取得できませんでした。<br />\n";
}
}
プログラムの準備ができたら実行してみましょう。
【3】C:\phpdev フォルダ内にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

【4】Webブラウザを起動して、動作を確認します。
http://localhost/rakuten/sample002/
・Internet Explorer の場合

・Firefox の場合

【5】商品名か商品画像をクリックすると、楽天の該当する商品ページが開きます。

【6】検索キーワードなどの値を変えて、いろいろ商品データを取得してみてください。
これである程度カタチになってきましたね。
【ワンポイント】
検索キーワードを工夫すると、より適切な商品が絞り込まれます。
・「カニ」を「蟹」、「タラバガニ」、「ズワイガニ」など具体的なキーワードにする
・「旬 カニ」のように、2語以上の複合キーワードにする
・除外キーワード(NGKeyword)をパラメータとして含める
*除外キーワードを使う場合は、中継プログラムの ItemSearch.php 側で受け取れるようにする必要があります。