APIの使い方をちょこちょこ勉強しているみはら（@masashi_385）です。今回は、jQueryで楽天の商品検索APIを使う方法です。
まずは、<head>内でjQueryを読み込みます。ここでは、Googleが提供してくれているやつを使います。
[cc lang=”html”]
[/cc]
で、APIを使うのに、こんなコードを書きます。ここでは、「ラ王」を検索します。
[cc lang=”JavaScript”]
$.getJSON(
“https://app.rakuten.co.jp/services/api/IchibaItem/Search/20120723?callback=?”,
{keyword:”ラ王”,applicationId:”9a167443a822927c423a09c0cfc6d59d”,imageFlag:”1″,affiliateId:”0d189a8a.c3cc327a.0d189a8b.bd8f27aa”},
function(data){
$.each(data.Items, function(i,item){
$(““).attr(“href”, item.Item.itemUrl).appendTo(“#items”)
.append($(““).attr(“src”, item.Item.mediumImageUrls[0].imageUrl));
});
}
);
[/cc]
keyword:･･････のところに、他にもいろんなパラメータを追加することができます。
そして、検索結果を表示したいところには、こんなコードです。
[cc lang=”html”]
これで、「ラ王」を検索したときの結果がざざーっと並びます。あとは、CSSで見た目をキレイにしてやればOKです。
jQueryを勉強しましょう
htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねｗ でも、jQueryって、実はカンタンなんです。
でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。
なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします！
実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ！という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。
