楽天 商品を出力するHTML部分を、カスタマイズする方法について。

楽天ウェブサービス から商品データを取得できたら、あとは HTML を組み立てる部分を工夫するだけで、いろいろな表現ができます。

今回は以下のことを実現してみましょう。

・商品名をアフィリエイトリンクにする
・商品価格を太字にして、「円」の文字を付ける
・商品画像をアフィリエイトリンクにする
・商品説明文を200文字以内にする

このへんはプログラミングというより、HTMLタグの知識が必要な部分です。


【1】sample001 をフォルダごとコピーして、 sample002 を作成します。

*「\」はWindowsでは円記号のことです。
保存先 C:\phpdev\www\rakuten

rakuten-70.gif


【2】コピーなので sample001 とまったく同じですが、「item.js」だけを一部変更します。

*ファイルは UTF-8 形式で保存してください。
*index.html、index.js、index.css は変更無し。

rakuten-71.gif

保存先 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 を起動します。

rakuten-57.gif


【4】Webブラウザを起動して、動作を確認します。

http://localhost/rakuten/sample002/

・Internet Explorer の場合
rakuten-68.gif

・Firefox の場合
rakuten-69.gif


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

rakuten-72.gif


【6】検索キーワードなどの値を変えて、いろいろ商品データを取得してみてください。


これである程度カタチになってきましたね。


【ワンポイント】
検索キーワードを工夫すると、より適切な商品が絞り込まれます。

・「カニ」を「蟹」、「タラバガニ」、「ズワイガニ」など具体的なキーワードにする
・「旬 カニ」のように、2語以上の複合キーワードにする
・除外キーワード(NGKeyword)をパラメータとして含める

*除外キーワードを使う場合は、中継プログラムの ItemSearch.php 側で受け取れるようにする必要があります。


スポンサードリンク

スポンサードリンク






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