//AdSenseにリンク

楽天APIで指定の商品を表示させるJavaScriptコード

Contents
  1. 楽天APIを始めるには
  2. 仕上がり
  3. ログインする
  4. 指定ページに行く
  5. パラメーターの記入
  6. 個人アプリIDはこちらを記入します
  7. ブログに記載するコード

楽天APIを始めるには

こちらのページを確認ください。

楽天APIの登録、はじめる方法

仕上がり

このように表示させる方法をご紹介します

ログインする

https://webservice.rakuten.co.jp

指定ページに行く

＞API一覧

＞テストフォーム（今回は、楽天市場商品検索APIを使用します）

パラメーターの記入

パラメーターなどを選択して取得したい項目を設定します。

パラメーターの説明はこちらのページに記載あります。
https://webservice.rakuten.co.jp/documentation/ichiba-item-search

生成したURLは、コードに使用します。

今回は、無印良品で検索、カテゴリーは「genreID」の番号はWEBで検索して書いている人のものを記入。５件表示させる指示にしました。

個人アプリIDはこちらを記入します

ログインしている状態でパラメーターを作成します。

ブログに記載するコード

<div class="display-information-wrapper">
    <ul></ul>
  </div>
  <script>
    $(function () {
      let getInformationButton = $("button.get-information"); // 楽天API実行ボタン
      let appId = "個人のアプリID"; // さっき作成したアプリID
      let reqUrl =
        "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20220601?format=json&keyword=それぞれのカスタマイズされたURLが入ります（上記でパラメーターを指定して作成したURLが入ります）"; // 楽天市場系APIのリクエストURL
      let displayInformationWrapper = $(".display-information-wrapper"); // 商品情報表示エリア
  
      // APIから情報を取得

        $.ajax({
          url: reqUrl,
          type: "GET",
          data: {
            formatVersion: 2, // データのフォーマットバージョン（2の方が合理化されてる状態）
          },
        })
          .done((data) => {
            let items = data.Items; // 取得した商品情報群
            let itemListHtml = ""; // 取得した情報からHTMLを構成するための変数
  
            console.log(data);
  
            // 取得した商品情報群をループ
            for (let i in items) {
              let item = items[i]; // 商品情報
  
              itemListHtml += `<li class="item">
                                          <figure class="item-image">
                                              <img src="${item["mediumImageUrls"][0]}" />
                                          </figure>
                                          <div class="item-name">${item["itemName"]}</div>
                                          <div class="item-price">￥${item["itemPrice"]}</div>
                                           <div class="item-url"><a href="${item["itemUrl"]}">${item["itemUrl"]}</a></div>
                                      </li>`;
            }
  
            // itemListHtmlをブラウザ上に表示する
            displayInformationWrapper.find("ul").append(itemListHtml);
          })
          .fail(() => {
            console.log("err");
          });
      });
  </script>

JavaScript