2024/01/01 から Amazon アソシエイトの商品画像が表示されなくなった問題を Hugo で解決した

前回 [2024-03-10-1] は Product Advertising API (PA-API) を使って、過去記事で参照している Amazon の商品画像情報を全部 json ファイルとして保存しました。

今回は json ファイルを使った Hugo の amazon ショートコードを紹介します。

Hugo の記事にこのように書くと、

{{< amazon asin="4003115015" title="新美南吉童話集 (岩波文庫 緑 150-1)" >}}

このように表示されます。

実装の概要

前回取得した json ファイルは data/amazon_items/ 以下にあります。実装したのは assets/css/extended/custom.css と layouts/shortcodes/amazon.html です。

.
├── assets
│   └── css
│       └── extended
│           └── custom.css
├── data
│   └── amazon_items
│       ├── 4003115015.json
│       ├── 4022645237.json
│       ├── (snip)
│       └── B0CDZWZXLF.json
└── layouts
    └── shortcodes
        └── amazon.html

ここで「実装した」と書きましたが、「改造した」が正しいです。

実は今までゆーすけべーさんのコードを使わせてもらっていましたが、画像が表示できなくなり対応したのが今回の経緯になります。

🔗 Hugoでわりと楽してわりとかっこよくAmazon商品紹介をする - ゆーすけべー日記

実装の詳細

layouts/shortcodes/amazon.html がこちらです。3 行目の YOUR_PARTNER_TAG はご自身のパートナータグに置き換えてください。

{{- $asin := .Get "asin" | default (.Get 0) -}}
{{- $title := .Get "title" -}}
{{- $myaid := "YOUR_PARTNER_TAG" -}}

{{ $item_url := "" }}
{{ $image_url := "" }}

{{ with index .Site.Data.amazon_items $asin }}
  {{ if ne $asin .ASIN }}
    {{ errorf "Inputted ASIN %q is not match with %q in data/amazon_items/%s.json." $asin .ASIN $asin }}
  {{ end }}
  {{ $item_url = .DetailPageURL }}
  {{ $image_url = .Images.Primary.Large.URL }}
{{ else }}
  {{ $item_url = printf "https://www.amazon.co.jp/dp/%s?tag=%s&linkCode=ogi&th=1&psc=1" $asin $myaid }}
  {{ $image_url = "/images/Amazon-logo-RGB.png" }}
{{ end }}

<div class="amazon-widget">
  <a href="{{ $item_url }}" target="_blank" rel="noopener"></a>
  <div class="amazon-widget-img">
    <img src="{{ $image_url }}" />
  </div>
  <div class="amazon-widget-info">
    <span class="amazon-widget-title">
      {{ $title }}
    </span>
    <span class="amazon-widget-via">
      <img src="https://www.amazon.co.jp/favicon.ico" />
      amazon.co.jp
    </span>
  </div>
</div>

index .Site.Data.amazon_items $asin で data/amazon_items/4003115015.json 等の json ファイルを読み込みます。

json ファイルが見つからなければ、デフォルトの画像 /images/Amazon-logo-RGB.png が使われます。

前回の記事で取得した json ファイルはこのような中身です。

{
  "ASIN": "4003115015",
  "DetailPageURL": "https://www.amazon.co.jp/dp/4003115015?tag=masutaka04-22&linkCode=ogi&th=1&psc=1",
  "Images": {
    "Primary": {
      "Large": {
        "Height": 500,
        "URL": "https://m.media-amazon.com/images/I/51bQQhcQqXL._SL500_.jpg",
        "Width": 357
      }
    }
  }
}

最後に assets/css/extended/custom.css です。ゆーすけべーさんとほぼ同じです。

.amazon-widget {
  margin: 2rem 0;
  max-width: 480px;
  position: relative;
}
.amazon-widget a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-shadow: none;
}
.amazon-widget-img {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.amazon-widget-img img {
  border: none;
  margin: 0 auto;
  max-height: 200px;
  padding: 16px;
}
.amazon-widget-info {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px 10px 10px;
}
.amazon-widget:hover .amazon-widget-info {
  background-color: var(--code-bg);
}
.amazon-widget-title {
  display: block;
}
.amazon-widget-via {
  color: var(--secondary);
  font-size: 14px;
}
.amazon-widget-via img {
  border: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  display: inline;
  vertical-align: text-bottom;
}

まとめ

商品画像 URL を含む json ファイルをローカルに保存し、Hugo の amazon ショートコードで参照することで、Amazon アソシエイトの商品画像が表示されなくなった問題を解決しました。

結構大変でしたが、商品画像が表示されて良かったです。

今後、このブログで Amazon の商品を紹介する時は json ファイルを手動で作ってから、amazon ショートコードを使っていきます。

$ make data/amazon_items/<ASIN>.json

実装の概要#

実装の詳細#

まとめ#

実装の概要

実装の詳細

まとめ