前回の続き。
書籍”公開API活用ガイド”の第5章：アフィリエイト・リンクを読んで実践。
“楽天商品検索API”の結果をJSONP形式で取得するJavaScriptプログラムを解説していた。
メモ
- リクエストURLの形式：http://api.rakuten.co.jp/rws/[version]/[schema]?[parameter]=[value]…
- schemaは、今回”json”を指定
- parameterに”callBack=コールバック関数”を入れるとJSONP形式。定義したコールバック関数が呼ばれる。
- コールバック関数で指定した引数(items)にJSONP形式のデータが入る
- items.Body.ItemSearch.Items.Item配列から要素を一つずつ抽出
JavaScriptのDOM操作がよくわかってなく見よう見まね状態。商品画像を表示するだけでリンク張れなかった(aタグの追加に失敗する)。。必要になったときにまた調べようと思う。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>楽天ウェブサービス(RWS) API practice</title>
</head>
<body>
<h1>楽天ウェブサービス(RWS) API sample</h1>
<input type="text" id="keyword" size="35" maxlength="255" value="" />
<input type="button" onclick="search_rakuten();" value="search" />
<br />
<script type="text/javascript">
<!--
function search_rakuten() {
var text = document.getElementById('keyword').value;
if (text) {
var url = "http://api.rakuten.co.jp/rws/3.0/json?developerId=RWSDeveloperID&affiliateId=RWSAffiliateID&operation=ItemSearch&version=2010-09-15&keyword=" + encodeURI(text) + "&sort=standard&hits=10&callBack=callbackFunc";
callJSONP(url);
}
}
function callJSONP(url) {
var target = document.createElement('script');
target.src = url;
document.body.appendChild(target);
}
function callbackFunc(items) {
num = items.Body.ItemSearch.Items.Item;
for (var i in num) {
var elemImg = document.createElement('img');
elemImg.setAttribute('src', num[i].mediumImageUrl);
document.getElementById('searchcontrol').appendChild(elemImg);
}
}
//-->
</script>
<div id="searchcontrol"></div>
<!-- Rakuten Web Services Attribution Snippet FROM HERE -->
<a href="http://webservice.rakuten.co.jp/" target="_blank">Supported by 楽天ウェブサービス</a>
<!-- Rakuten Web Services Attribution Snippet TO HERE -->
</body>
</html>
参考サイト
公開API活用ガイド (I・O BOOKS)
posted with amazlet at 12.01.24
ZAPA
工学社
売り上げランキング: 149253
工学社
売り上げランキング: 149253
関連エントリー
