Hugoに画像付きAmazonアソシエイトリンクを導入（ショートコード機能）した話

[params]
  amazonTrackingID = "amazonトラッキングID-22"

{{ $asin := .Get 0 }}
{{ $title := .Get 1 | default "Amazonで詳細を見る" }}
{{ $img := .Get 2 }}
{{ $trackingID := .Site.Params.amazonTrackingID | default "MISSING_ID" }}
{{ $link := printf "https://www.amazon.co.jp/dp/%s?tag=%s" $asin $trackingID }}

{{ $finalImg := "" }}
{{ if $img }}{{ $finalImg = $img }}{{ else }}{{ $finalImg = printf
"https://m.media-amazon.com/images/P/%s.01.MZZZZZZZ.jpg" $asin }}{{ end }}

<div class="amazon-card-container" style="margin: 2rem 0; max-width: 700px;">
  <a href="{{ $link }}" target="_blank" rel="noopener" class="amazon-card-anchor"
    style="text-decoration: none; color: inherit; display: block; line-height: 1.5;">
    <div class="amazon-link-card"
      style="border: 1px solid #d1d5db; border-radius: 0.75rem; overflow: hidden; background-color: #ffffff; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); width: 100%;">

      {{/* メイン部分 */}}
      <div
        style="display: flex; flex-direction: row; padding: 1.25rem; align-items: flex-start; background-color: #ffffff;">
        <div
          style="flex-shrink: 0; width: 110px; height: 110px; margin-right: 1.25rem; display: flex; align-items: center; justify-content: center; background: #fff;">
          <img src="{{ $finalImg }}" alt="{{ $title }}"
            style="max-height: 100%; max-width: 100%; object-fit: contain; margin: 0; display: block; border: none; pointer-events: none;">
        </div>

        <div style="flex-grow: 1; min-width: 0;">
          <div
            style="font-weight: 700; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; color: #1f2937; word-break: break-all;">
            {{ $title }}
          </div>
          <div
            style="display: inline-block; background: linear-gradient(to bottom, #f7dfa1, #f0c14b); color: #111; padding: 0.4rem 1.2rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500; border: 1px solid #a88734;">
            Amazonで見る
          </div>
        </div>
      </div>

      <div
        style="font-size: 0.65rem; color: #6b7280; text-align: right; padding: 0.6rem 1rem; background-color: #f3f4f6; border-top: 1px solid #e5e7eb; margin: 0; display: block;">
        Amazon.co.jp で詳細を見る
      </div>
    </div>
  </a>
</div>

javascript:(function(){
  async function copy(text) {
    try {
      await navigator.clipboard.writeText(text);
      alert('コピー成功！\n' + text);
    } catch (err) {
      /* 古いブラウザ用のフォールバック */
      const el = document.createElement('textarea');
      el.value = text;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      alert('コピーしました（fallback）');
    }
  }

  try {
    /* 1. ASINを探す（複数の候補から） */
    const asin = document.querySelector('#ASIN, [data-asin], input[name="idx.asin"]')?.value
               || document.querySelector('[data-asin]')?.dataset.asin;

    /* 2. タイトルを探す */
    const title = document.querySelector('#productTitle, #ebooksProductTitle, #title')?.textContent.trim();

    /* 3. 画像URLを探す（メイン、本、またはサムネイルリストから） */
    const imgEl = document.querySelector('#landingImage, #imgBlkFront, #main-image, .a-dynamic-image');
    let thumb = imgEl?.src || imgEl?.dataset?.oldHires || imgEl?.dataset?.aDynamicImage;

    /* URLがJSON形式（複数画像）で入っている場合の処理 */
    if (thumb && thumb.startsWith('{')) {
      thumb = Object.keys(JSON.parse(thumb))[0];
    }

    if (!asin || !title || !thumb) {
      console.error({asin, title, thumb});
      throw new Error('必須情報の取得に失敗しました');
    }

    const mUrl = thumb.replace(/\._S[X|Y]\d+_/, '._SL200_');

    const shortcode = `{{< amazon-associate "${asin}" "${title}" "${mUrl}" >}}`;
    copy(shortcode);

  } catch (e) {
    alert('エラー: Amazonの商品ページで実行してください。');
    console.error(e);
  }
})();

{{< amazon-associate "B0DJ8LD62M" "PFU キーボード HHKB Studio 日本語配列／雪（ポインティングスティック メカニカルキーボード）" "https://m.media-amazon.com/images/I/61d+MPkNrfL._AC_SX679_.jpg" >}}