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

APIの使い方をちょこちょこ勉強しているみはら(@masashi_385)です。今回は、jQueryで楽天の商品検索APIを使う方法です。

まずは、<head>内でjQueryを読み込みます。ここでは、Googleが提供してくれているやつを使います。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

で、APIを使うのに、こんなコードを書きます。ここでは、「ラ王」を検索します。

$.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){
                $("<a>").attr("href", item.Item.itemUrl).appendTo("#items")
               .append($("<img/>").attr("src", item.Item.mediumImageUrls[0].imageUrl));
            });
        }
);

keyword:・・・・・・のところに、他にもいろんなパラメータを追加することができます。

そして、検索結果を表示したいところには、こんなコードです。

<div id="items"></div>

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

jQueryを勉強しましょう

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

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

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

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

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup