jQuery 楽天APIを必要最低限で動かす

注意

この記事は、2年ほど前にQiitaに投稿した記事の再投稿になります。
若干内容が古くなっている可能性があります。

楽天APIを使用して、inputに打ち込んだ単語に関連する商品をドバっと垂れ流す仕組みを作ります。

1. 楽天API アプリの新規作成

https://webservice.rakuten.co.jp/document/
このページの右上、「アプリID発行」からなんやかんやで発行。
（この辺りは他の方の記事を参照のこと）
ちなみに「アプリURL」ですが、あくまで勉強としてローカル環境でのみ動かしたい場合は、適当に自分のGitHubページのURLなどを使用します。（人のページは勝手に使わないこと！）

2. HTML

<input type="text" id="search_area">
<button type="button" id="search_button">検索&lt;/button>
<ul></ul>

3. JavaScript

$(function(){
  $('#search_button').on('click', function(){
    var keyword = $('#search_area').val();
    $.get('https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?', {
      applicationId: "1046798079875156979",
      keyword: keyword
    }, function(data){
      if (data.count > 0){
        $.each(data.Items, function(i, item){
          var temp = $(`<li><a href="${item.Item.itemUrl}"><img src="${item.Item.mediumImageUrls[0].imageUrl}"></a></li>`);
          $('ul').append(temp);
        })
      }
    });
  });
});

出力結果

補足

$.get('https://~~~~ の部分
ここは、色々書き方があって、

$.ajax({
  type: 'get',
  url: 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?',
  data: {
    applicationId: "1920314253647586970", // 自身のapplicationIdを入力してください。この数字は適当です。
    keyword: keyword,
    hits: 20
  }

と書いても一緒です

返ってきたデータは、上記のコードだと item.Item.itemUrl や item.Item.mediumImageUrls[0].imageUrl として抜き出しています。 この辺りは各APIにより微妙に違ってくるので、dataをコンソールでよく確認しながら目当てのデータを抜き出してください。