楽天ウェブサービスを使ってみよう
JSONP＋jQueryで楽天アフィリエイトを攻略！
2009年05月07日 12時00分更新
jQueryで楽天ウェブサービスにアクセスする
JSONPで楽天ウェブサービスにアクセスして情報を検索し、その結果を整形して出力するには、いろいろな方法が考えられます。ここではjQueryを使った手軽な方法を紹介しましょう。基本的な処理の流れは、次のようになります。
$(document).ready(function() {
var developerId = '自分のデベロッパーID';
var affiliateId = '自分のアフィリエイトID';
var keyword = '検索のキーワード';
var url = 'http://api.rakuten.co.jp/rws/2.0/json?';
url += '&developerId=' + developerId;
url += '&affiliateId=' + affiliateId;
url += '&keyword=' + encodeURIComponent(keyword);
url += '&operation=ItemSearch&version=2009-04-15&callBack=?';
url += '&その他のパラメータ';
$.getJSON(url, function(data) {
if (data.Header.Status == 'Success') {
var items = data.Body.ItemSearch.Items.Item;
for (var i = 0, j = items.length; i < j; i++) {
var item = items[i];
商品が見つかった時、表示するHTMLを組み立てる処理
}
HTMLを表示する処理
}
else if (data.Header.Status == 'NotFound') {
商品が見つからなかった時の処理
}
else {
検索エラー時の処理
}
});
});
まず、リスト中の「自分のデベロッパーID」「自分のアフィリエイトID」を、それぞれ書き換えます。
「検索のキーワード」の箇所に、商品名等の検索のキーワードを指定します。複数のキーワードで検索したい場合は、キーワードの間を半角スペースで区切ります。また、検索の際に詳細なパラメータ（前ページの表）を指定したい場合は、「その他のパラメータ」の部分にそれらを記述します。
次に、「表示するHTMLを組み立てる処理」のところで、個々の商品のデータを元にして、ページに表示するHTMLを組み立てます。
商品の情報はitem オブジェクトに格納されており、プロパティを使って、たとえば商品名は item.itemName のように、情報を取得できます（前ページの図）
筆者のサイトに、実際に動作するサンプルページをアップロードしてあります。このサンプルでは、「ラーメン」というキーワードで検索してヒットした商品を5件、表示しています。HTMLやJavaScriptの具体的な書き方は、以下のアドレスにアクセスして、ページのソースを参照してみてください。
 |
|---|
| 筆者のサイトに設置したサンプルページ。実際の動作や具体的なサンプルコードはここでチェック |
http://www.h-fj.com/ascii/rakuten/sample.html
楽天ウェブサービスをもっと使ってみよう
今回は楽天ウェブサービスによる簡単なアフィリエイトリンクの例を紹介しましたが、この例では「商品検索API」のごく一部の機能しか使っていません。
楽天ウェブサービスでは、ほかにもカタログ情報やランキング情報などを得る楽天市場系のAPIや、ブックス、オークション、トラベルなどの他のサービスのAPIも公開されています。これらのAPIを単体で使うのはもちろん、他のサービスのAPIを組み合わせることで、さまざまなカスタマイズが可能です。詳しいドキュメントや活用事例の紹介なども整っていますので、以下のページを参照のうえ、ぜひマッシュアップにチャレンジしてみましょう。
http://webservice.rakuten.co.jp/
