GhostのAmazon Embed Linkを作成する治具を作る

GhostのAmazonリンクが壊れている問題

Ghostでは様々なサイトのリンクのEmbedを生成できるが、Amazonのリンクはほとんど壊れていて使い物にならない。これに関する議論はすでにあるが根本的な原因がAmazon側にあるのでGhost本体に修正が組み込まれるのはあまり望めない。

Images not visible in amazon link cards

naturanovit.net I use ghost pro, so assuming it’s the latest version Using the casper theme 4.1.1 I’m trying to include third party links in my post, including some amazon affiliate links. Here it is: Site unavailable (amazon link on the bottom) I just copied and pasted the links in the editor. For most non-amazon sites, you can see that the links auto-formatted to look quite nice, including an image. Their height is capped, etc. However, the amazon links look terrible. No image, and som…

Ghost Forumsonarforte

作ったもの

このような事情があるので、自前でEmbed用のHTMLを作成してHTMLコンポーネントで挿入するというworkaroundを作成することにした。

Iframelyのような外部サービスを利用する方法もあるが、無料の枠内で行うのがかなり厳しかったので今回は採用しない。

フォーラムでも議論されているとおり、Amazonのメタ情報は混沌を極めているのでAmazonサイト上空直接情報を取得して埋込HTMLを生成するTampermonkeyスクリプトの形で作成した。LLM時代はこのような治具をサクっと作るのがかなり便利になった。以下のGistのScriptを追加したら動くはず。

AmazonのHTML埋め込みリンクを作成するTamperMonkey Script

AmazonのHTML埋め込みリンクを作成するTamperMonkey Script. GitHub Gist: instantly share code, notes, and snippets.

Gist262588213843476

既存のアソシエイトツールバー(なければ右下)にHTML生成用のボタンを配置し、プレビューも表示するようにした。アソシエイトIDにも対応させた。

所感

• 今回はGPT5.2に書かせたがUIもかなりこなれてきて、手戻りもかなり少なかった。
• 最初はURLからHTMLを生成するWebアプリケーションを作っていたのだが、不安定なスクレイピングを行うよりも、作業工程上必ず開くAmazonサイト上で実行した方がシンプルで確実なので現在の実装になった。
• Amazonは従来のPA-APIからCreators APIというのを最近出してきているので、この辺の混沌がもしかしたら解決されるかもしれないし、されないかもしれない。
• 非エンジニアのLLM活用でChrome拡張機能を作成する話がよくあるが、Tampermonkeyの方が便利で簡単だと思うのでその話もそのうち書きたい

Xでも情報発信しています。良かったらフォローしてください！

Follow on X