楽天ウェブサービス(RWS)を使ってアフィリエイトリンクをつくる(JavaScript/JSONP)

前回の続き。
書籍”公開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)
公開API活用ガイド (I・O BOOKS)

posted with amazlet at 12.01.24
ZAPA
工学社
売り上げランキング: 149253

関連エントリー

  1. 楽天ウェブサービス(RWS)を使ってアフィリエイトリンクをつくる(PHP/REST)
  2. JavaScriptでDOM操作
  3. JavaScript File APIを使ってアップロードフォームに画像プレビューを設置する
  4. twitter API (Search API Methods)
  5. twitter API (REST API Methods) でpublic_timelineを表示
This entry was posted in 未分類 and tagged , , , . Bookmark the permalink.