Zenn
🔖

ブックマークレットを使ってAmazonのアフィリエイト用のHTMLを生成する

2024/07/03に公開
HTML
JavaScript
Markdown
bookmarklet
Amazon
tech

Scraps に雑に書いた 【2024−07-01】Amazon アフィ用に商品名・商品サムネイル・価格を含んだ HTML をブックマークレットを使って作成する を記事にしてみた。

背景

React と Tailwind CSS で Markdown を使った記事の投稿画面を作成中、記事の中に Amazon のアフィリンクを入れたくなった。
ということで、Amazon の商品リンク、サムネイル画像、価格を含んだ HTML を簡単に作成したい。

この記事で説明すること

Bookmarklet を用いて Amazon の商品リンク、サムネイル画像、価格を含んだ以下のような見た目の HTML をクリップボードにコピーする方法を説明する。

※ Bookmarklet とは、ブラウザのブックマークのボタンをに Web サイトの URL ではなく JavaScript を入れておくことで何かしらの処理を実行するもの

調査

Amazon が用意してくれているのでは？

Amazon の商品を HTML にするのなんて世界中の皆がやりたいだろうしあるのでは？と思った。
しかし、残念ながらない。

調べてみると、Amazon アソシエイトツールバーというものを表示し、そこからボタンクリックするだけで以下のようなよく見るリンクを生成できるっぽい。

ref: Amazon（アマゾン）の商品リンクの作り方｜リウムスマイル！

が、調べてみるとどうやら今はできなくなっているとのこと（なんでだ）。

以前までは Amazon アソシエイトツールバーを表示すると下記の画像のように「テキスト」「画像」「テキストと画像」という選択肢があり、「テキストと画像」を選択することで上記のような画像が作成できていた。
しかし、最近になって仕様の変更が入り「テキスト」しか選択肢として表示されなくなった。
つまり、「商品の通常 URL」or「商品の短縮 URL」しか取得できないということになる。


ref: Amazon（アマゾン）の商品リンクの作り方｜リウムスマイル！

ユーザー的に一番楽なのは Markdown エディターに「商品の URL を入れたら URL を元に、サムネイル画像や、商品名、価格を取得して HTML を返す」かな〜とも思いつつできれば実装コストは抑えたい。

他の方法を調べる

https://zenn.dev/zenncev549fhhx/articles/4593792c5d0024

探してみるとこんな記事があった。
なるほど、ブックマークレットを使う方法があるのか。
やってみよう。

ちなみに

色々調べてみると認証キーを使って、ItemIds なるものを入力して...というやり方が出てくる。
商品ごとに色々ポチポチ入力するのは面倒なのでやりたくない。

方針

  1. Amazon の商品ページにアクセス
  2. アソシエイトツールバーの「テキスト」をクリックしてポップオーバーを表示
  3. ブクマしてあるボタンを押す
  4. クリップボードに Amazon の商品 URL、商品画像、商品名、価格が入ってある HTML がコピーされている 🎉

手順 2 のポップオーバーというのは以下のこと

コード

先に完成した JavaScript コードを置いておく。
スタイルは Tailwind CSS で付与している。

/**
 * 変換先: https://chriszarate.github.io/bookmarkleter/
 */
javascript: (function () {
  // 商品名
  const name = document.getElementById("productTitle").textContent.trim();
  // 商品名を以下で取るとnameが「Amazon | <商品名>」になる
  // const name = document.title;

  // 商品リンク
  const shortlinkEl = document.getElementById(
    "amzn-ss-text-shortlink-textarea"
  );
  let link;
  if (shortlinkEl) {
    // 短縮URLを取得する
    // ブックマークレット実行時にアソシエイトツールバーの「テキスト」を押してポップオーバーを表示している必要がある
    link = shortlinkEl.value;
  }

  if (!link) {
    alert(
      "アソシエイトツールバーから「リンク生成 > テキスト」をクリックしてポップオーバーを表示してください"
    );
    return;
  }

  // 商品サムネイル
  const imgTagWrapper = document.getElementById("imgTagWrapperId");
  const imgTag = imgTagWrapper.getElementsByTagName("img")[0];
  const thumbnailSrc = imgTag.getAttribute("src");

  // 価格
  // 右の表示されている一番上の価格を取得する。「定期おトク便」があればそっちを取得する。
  const priceEl = document.getElementById("apex_offerDisplay_desktop");
  const priceHtmlCollection = priceEl.getElementsByClassName("a-price-whole");
  const price = priceHtmlCollection[0].textContent;

  // HTMLを生成してクリップボードにコピー
  // shadcn を使用しているのでそのコードを丸コピ https://ui.shadcn.com/docs/components/button
  const shadcnButtonClasses =
    "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 rounded-xl";
  const el = document.createElement("textarea");
  // 自分のMarkdownの変換がおかしいかもだが、pタグ・preタグなどではTailwindのスタイルが適用されなかったので全部divで書いてある
  el.textContent = `
<div class="max-w-48">\n
\t<a rel="noreferrer noopener nofollow" href="${link}" target="_blank">\n
\t\t<div class="grid justify-items-center items-center h-52 bg-white">\n
\t\t\t<img src="${thumbnailSrc}" alt="${name}" />\n
\t\t</div>\n
\t\t<div class="space-y-1">\n
\t\t\t<div class="text-sm text-right text-foreground">${price} 円</div>\n
\t\t\t<div class="text-sm line-clamp-3 text-foreground">${name}</div>\n
\t\t\t<div class="w-full bg-[#fdaf17] hover:bg-[#fdaf17]/90 text-slate-950 ${shadcnButtonClasses}">\n
\t\t\t\t<button>Amazon</button>\n
\t\t\t</div>\n
\t\t</div>\n
\t</a>\n
</div>`;
  document.querySelector("body").append(el);
  el.select();
  document.execCommand("copy");
  el.remove();
})();

注意点

最後に、書きながら発見した注意点を書いておく。

JavaScript の変換先によって癖がある

Bookmarklet 用に JavaScript を変換するサイトはぐぐるといくつか見つかるのだが、変換方法がそれぞれ違うのでサイトによっては書いたコードがうまく動かない場合があるので注意。

Bookmarkleter

今回はここを使っている。
コード内のコメントを消してくれるのが良い。

bookmarklet maker

ここで変換すると class 名の間の空白スペースが勝手に削除されることがある

<!-- hover の前の半角スペースが削除されているのでスタイルが反映されない -->
<div class="w-full bg-[#fdaf17]hover:bg-[#fdaf17]/90"></div>

また、コメントを消してくれないので // でコメントを書くとうまく動作しない（実行時に Console でエラーが出てしまう）。
ここを使いたい強い理由はないと思うがもしそうならば /* */ でコメントを書くことになる（面倒くさい）。

Bookmarklet スクリプト変換

コピーした HTML に </div> というように半角スペースが入る時がある

<div class="max-w-48">
  <a
    rel="noreferrer noopener nofollow"
    href="https://amzn.to/3W9XPx8"
    target="_blank"
  >
    ...
  </a>
  <!-- 自動整形されていまっているが以下の</div>の直前に先頭に半角スペースが入ってしまっていた -->
  <!-- 機能的には問題ないが見た目が気に食わなかった -->
</div>

アソシエイトツールバーのポップオーバーを表示していなくてもうまく動く場合がある

コードを見るとアソシエイトツールバーのポップオーバーを表示せずに実行した場合ブラウザの alert が実行されるようになっている。

しかし、一度アソシエイトツールバーのポップオーバーを表示して短縮リンクを取得できた場合、画面遷移したり、ブラウザをリロードしないとその後はポップオーバーを表示しなくてもうまく動く。

Discussion