Demo
１．楽天に登録
登録先（アフィリなしリンク。以下同じ）
２．新規アプリ登録
登録先
・アプリURLは、http://localhost/でもいけると思います。
・登録すると、アプリIDが発行され、画面にはアフィリIDもあわせて表示されます。
３．index.htmlを作成
今回のスクリプトでは、#containerの空タグ内に、JQueryで動的に結果を表示させます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楽天サーチ</title>
</head>
<body>
<!-- Navbar
================================================== -->
<div>
<h1><a href="./">楽天サーチ</a></h1>
</div>
<!-- Container
================================================== -->
<div id="container"></div>
<!-- Scripts
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
</body>
</html>
４．楽天検索用のコード
myscript.jsに次のコードを書きます。function ajaxSearch(keyword,page) {
if (!keyword) {
keyword = $('.submit.active').attr('value');
}
$.ajax({
type: 'GET',
url: 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20130424',
data: {
applicationId: '1067151787737895340', // 必須
affiliateId: '10b8a22d.1bbd0a33.10b8a22f.b6a6f226',
keyword: keyword,
page: page
}
}).done(function (data) {
_getItems(data)
})
}
・ajaxで商品を検索します。
・取得成功したら_getItemsメソッドを呼びます。
５．取得したデータを元に、htmlを書き換えるメソッドを書きます。
function _getItems(data) {
//console.log(data);
$('#container').empty();
var pageCount = data.pageCount;
var current = data.page;
var dataStat = data.count;
if (dataStat > 0) {
$.each(data.Items, function (i, items) {
var item = items.Item;
var affiliateUrl = item.affiliateUrl;
var imageUrl = item.mediumImageUrls[0].imageUrl;
var itemName = item.itemName;
if (itemName.length > 10) {
itemName = itemName.substring(0, 10) + '...';
}
var itemPrice = item.itemPrice;
var htmlTemplate = $('<div class="grid">' +
'<div class="imgholder swing">' +
'<a href="' + affiliateUrl + '">' +
'<img src="' + imageUrl + '" alt="' + item.itemName + '" width="128" ' +
'height="128"/>' +
'</a></div>' +
'<h2><a href="' + affiliateUrl + '">' + itemName + '</a></h2>' +
'<p>' + item.itemName + '</p>' +
'<div class="meta">' + comma(itemPrice) + '円</div>' +
'</div>');
//テンプレートを追加
$('#container').append(htmlTemplate);
});
});//each
}
}
どのようなデータを取得できるか確認するには、楽天API公式ページを御覧ください。
もちろん、console.log(data)で確認することもできます。
６．htmlとajax通信の連携
htmlに次のコードを追加してください。
<!-- Tag
================================================== -->
<div>
<button class="btn submit" value='りらっくま'>りらっくま</button>
<button class="btn submit" value='靴下にゃんこ'> 靴下にゃんこ</button>
<button class="btn submit" value='ネコ金魚'> ネコ金魚</button>
</div>
inputでなく、buttonなので、データは送信されません。
ですので、javascriptファイルに次のコードを追加します。
$(function () {
$('.submit').click(function () {
var keyword = $(this).attr('value');
if (!keyword) {
return;
}
ajaxSearch(keyword);
})
});
これで、submitクラスを押すと、そのvalueをkeywordとして検索できるようになります。
もちろん、inputなどのformを使用してデータをGETで渡しても構いません。
(ようするに検索フォームを作成する）
７．SSL通信エラーがでる場合
SSL通信のエラーがでる場合、サーバーにSSL証明書を設定する必要があります。８．終わりに
詳細はDemoのコードをご確認ください。なお、Demoには他サイトのコードやライブラリを使用、改変しています。
利用する際は、ライセンスにご注意ください。
0 件のコメント:
コメントを投稿