無料でビットコインをもらえるのは、ビットフライヤー

[み]jQueryで楽天商品検索APIを使う方法

jquery

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”]

[/cc]

これで、「ラ王」を検索したときの結果がざざーっと並びます。あとは、CSSで見た目をキレイにしてやればOKです。

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です