JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

楽天市場商品検索APIで任意のキーワードの商品一覧を表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

楽天市場商品検索API

楽天市場商品検索APIで任意のキーワードの商品一覧を表示

楽天市場商品検索APIで任意のキーワードの商品一覧を表示

楽天市場もAPIを提供しています。そんな楽天市場のAPIを「KOKONIARUKOTO.」さんのブログを参考にして色々いじってみました。

サンプルもあるので参考にしてみてください。

楽天市場商品検索APIとは?

楽天市場商品検索APIは、楽天市場の商品の情報を取得することが可能なAPIです。

楽天ウェブサービス より

楽天ウェブサービスでは、これ以外にも「楽天トラベル」や「楽天ブックス」など、楽天で利用することができるサービスをAPIで取得することができます。

かかかず
かかかず

APIの利用には「アプリID」の取得が必要ですが、無料でできます。

外部リンク 楽天ウェブサービス

「ウルトラマン」で検索した時の商品検索APIサンプル

早速サンプルです。以下は楽天で「ウルトラマン」で検索した場合の検索結果一覧で、画像・ショップ名・商品名・価格の4つをカードに表示させています。

    取得する画像サイズが最大で「128px X 128px」の為、このレイアウトだとガビガビになってしまうのが気になりますが、このように好きなレイアウトで表示することができます。

    サンプルのコード

    コードはHTML・JavaScript・CSSの3種類です。順に解説していきます。

    HTML

    カードの画像やテキスト等々JavaScriptが配列に準じてレンダリングするので、以下を表示させたい場所に記述します。

    <ul id="rakutenItem"></ul>

    HTMLはこれだけでOKです。

    JavaScript

    JavaScriptは、JSONで取得する場合以下のようになり、2行目にはURLを記述します。

    (async () => {
      const url = "ここにAPIのアドレス";
      const res = await fetch(url);
      let json;
      try {
        if (res.ok) {
          json = await res.json();
          let allItem = "";
          for (let i = 0; i < json.Items.length; i++) {
            const product = json.Items[i].Item;
            const productLink = product.itemUrl;
            const productImage = product.mediumImageUrls[0].imageUrl;
            const productName = product.itemName;
            const shopName = product.shopName;
            const productPrice = product.itemPrice.toLocaleString();
            let allItemParts =
              `<li><a href="` +
              productLink +
              `" target="_blank" class="productLink link-` +
              (i + 1) +
              `">
              <img src="` +
              productImage +
              `" alt="` +
              productName +
              `" class="productImage">
              <div class="shopname">`
              + shopName + `</div>
              <p class="productName">` +
              productName +
              `</p>
              <p class="productPrice">` +
              productPrice +
              `<span>円</span></p>
              </a></li>`;
            allItem += allItemParts;
          }
          document.getElementById("rakutenItem").innerHTML = allItem;
        } else {
          throw new Error(res.status);
        }
      } catch (e) {
        console.error(e);
      }
    })();

    JSONで取得するデータの中には「楽天内のカテゴリ」や「商品コード」など、多数あります。

    これらのデータの中で出力させたいものは、let allItemParts = の前で定義をして、その後に配列を記述していけばOKです。

    CSS

    CSSは、カードレイアウトにFlexboxを使って並べ、後述しますが価格部分には英字のWebフォントを使っています。

    ul#rakutenItem {
        list-style: none;
        padding: 0;
        border: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        margin: 0;
    }
    ul#rakutenItem li {
        width: calc(33% - 20px);
    }
    ul#rakutenItem li a {
        border-radius: 2px;
        background: #fff;
        box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
        cursor: pointer;
        transition: 0.2s ease-in-out;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        height: 100%;
        padding-bottom: 12px;
        position: relative;
    }
    ul#rakutenItem li a:hover {
        box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
        transform: translateY(-4px);
    }
    
    ul#rakutenItem p {
        color: #313131;
        margin: 0;
    }
    
    /* 画像 */
    ul#rakutenItem li a img {
        height: 200px;
        object-fit: cover;
        margin-bottom: 15px;
        border-radius: 3px 3px 0 0;
    }
    /* ショップ名 */
    .shopname {
        padding-left: 15px;
        font-size: 0.7rem;
        color: #707070;
    }
    /* 商品名 */
    p.productName {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        flex-grow: 1;
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.5;
    }
    
    /* 価格 */
    p.productPrice {
        font-family: Speedee, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
        font-weight: 800;
        font-size: 1.6rem;
        letter-spacing: -0.02rem;
        padding-left: 15px;
        padding-right: 10px;
        text-align: right;
        color: #D80C18 !important;
    }
    p.productPrice span {
        font-size: 1rem;
        margin-left: 3px;
        font-weight: 300;
    }
    
    @media screen and (max-width: 767px) {
    /* (ここにモバイル用スタイルを記述) */
      ul#rakutenItem li {
          width: 100%;
      }
    }

    楽天の商品名はしこたま長い場合が多いので、商品名を3行程度に納めて、それ以降は「…」で収まるようにdisplay: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; を記述しています。

    価格のフォント

    価格部分のフォントには、フリーフォントの「Speedee」を使っています。

    かかかず
    かかかず

    有名なところだと、マクドナルドのホームページで使われています。

    Speedee
    OnlineWebFonts.COM より
    Speedee
    ABCDFGHIJKLMNOPQRSTUVWXYZ
    1234567890

    Speedeeは英数字用のフォントで、日本語のサポートはないですが全体的に肉厚なつくりで価格の表記に向いているフォントです。

    使う場合は以下のサイトからチェックしてみてください。

    外部リンク OnlineWebFonts.COM


    参考 fetchを使って楽天商品検索APIから商品情報を取得するKOKONIARUKOTO.