スポンサードリンク

楽天ウェブサービス sample001の解説について。

楽天ウェブサービス から商品データを取得できたので、 sample001 のプログラムについて、要点を解説します。

sample001 で使ったプログラムは Ajax初心者入門講座 を先に学習していれば、ほとんど説明なしでもわかると思います。

Ajaxプログラムの詳細については、説明が重複するので Ajax初心者入門講座 をご覧ください。今回は、重要な部分だけに絞って説明します。


■index.html側

(1)JavaScript や CSS を外部ファイルとして読み込んでいる部分です。

<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">

*libフォルダにあるファイルは相対パスで指定しています。
*他は同一フォルダ内なので、ファイル名だけでかまいません。


(2)商品データやメッセージを表示する場所に id 名を付けている部分です。

<div id="state"></div>
<div id="result"></div>


■index.js側

(1)ページが読込まれた時に呼び出す関数を指定している部分です。

onload = init;
*関数名の後ろに()カッコは付けません。


(2)ページが読込まれた時には、関数 init() が実行されます。この関数の中でさらに itemDisp() という関数を呼び出しています。

function init() {
  省略
  itemDisp();
}

*関数内から関数を呼び出す場合は、関数名の後ろに()カッコを付けます。


■item.js側

(1)中継プログラムを指定している部分です。
var url = "../lib/ItemSearch.php";

*libフォルダにあるファイルは相対パスで指定しています。


(2)中継プログラムに送るパラメーターを組み立てている部分です。

var paramList = "keyword=" + encodeURIComponent("カニ");
paramList += "&hits=10";
paramList += "&page=1";
paramList += "&sort=" + encodeURIComponent("+itemPrice");
paramList += "&imageFlag=1";

*検索キーワードとソートはエンコードしています。


(3)受信した XML 全体を、変数で参照できるようにしている部分です。

var response = data.responseXML.getElementsByTagName('Response');


(4)楽天ウェブサービスは、リクエストが成功すると、レスポンスの XML 内の Status タグに「Success」と表示されます。

rakuten-67.gif

その Status タグの文字列を取得している部分です。
var status = response[0].getElementsByTagName('Status')[0].firstChild.nodeValue;

↑これは2行に分けて書くこともできますが、こういう書き方もできます。


(5)if文で、もし成功していない場合は、メッセージを表示して、処理を終了します。

if(!(status == "Success")){
  state.innerHTML = "データが見つかりませんでした。";
  return;
}

* return で処理を終了すると、関数を呼び出した場所に戻ります。


(6)XML中に複数ある Item タグを変数に代入している部分です。itemは配列になります。

var item = response[0].getElementsByTagName('Item');


(7)HTMLを組み立てるための変数を初期化している部分です。

var tmpHtml = "";


(8)for文で item の要素数分だけ処理を繰り返します。

for(i = 0; i < item.length; i++){
  省略
}


(9)フィールドごとに値を取り出している部分です。

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;

*長くなりますが (4) のように1行で書くこともできます。
*もっと必要なフィールドがある場合は、この部分を増やせばよいだけです。


(10)取り出した値を使って、HTMLを組み立てている部分です。

tmpHtml += "<p>";
tmpHtml += itemNameValue + "<br />";
tmpHtml += itemPriceValue + "<br />";
tmpHtml += affiliateUrlValue + "<br />";
tmpHtml += mediumImageUrlValue + "<br />";
tmpHtml += itemCaptionValue + "<br />";
tmpHtml += "</p>";
tmpHtml += "<hr />";


(11)組み立てた HTML を実際に画面に表示して、メッセージを表示している部分です。

result.innerHTML = tmpHtml;
state.innerHTML = "データを取得しました。<br />\n";


■index.css側

(1)商品データを表示する result の横幅を指定している部分です。

width:800px;


【ワンポイント】

どんなフィールドが取り出せるかは、楽天ウェブサービスのオンラインドキュメントに詳しく書かれています。出力パラメーターのフィールド名を参考にしてください。

http://webservice.rakuten.co.jp/api/itemsearch/


スポンサードリンク






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