Amazon 商品用のブログカード - HTML 版
はじめに
ブログカード用 HTML を貼り付けるブックマークレット
- ここ
で紹介しているサイトから、Amazon の商品ページでクリックしたときに次の情報を取得する方法が分かった
- タイトル（
title） - ASIN コード（
asin） - 商品画像へのリンク
- 上記の商品情報を HTML コード内に埋め込んで、クリップボードにコピーする JavaScript は次のとおり
javascript: (function () {
var title = document.getElementById("productTitle").textContent.trim();
var asin = document.URL.match("(dp|product)/([0-9a-zA-Z]{10})")[2];
var widget =
`<a href="https://www.amazon.co.jp/gp/product/${asin}" target="_blank">` +
`<div class="amazon-widget-container">` +
`<div class="amazon-widget-via">amazon.co.jp</div>` +
`<div class="amazon-widget">` +
`<div class="amazon-widget-info">${title}</div>` +
`<div class="amazon-widget-img"><img src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=${asin}&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL350_" /></div>` +
`</div></div></a>`;
navigator.clipboard.writeText(widget).then(() => {
window.alert("Coppied\n");
});
})();
- 上記の Javascript は、HTML コードを出力するだけなので、見た目を整えるには
css も必要 amazon-widget-*というクラスの<div>要素を修飾して、ブログカードっぽく表示するための css は次のような感じ- これをサイトのデザインを設定するスタイルシート（
style.cssなど）に追記する
.amazon-widget-container {
margin: 0;
padding: 0;
position: relative;
}
.amazon-widget-via {
color: #b0bec5;
position: absolute;
font-size: 0.9rem;
top: 0;
left: 0;
padding: 0 0.5rem;
border-right: 1px dashed #cfd8dc;
border-bottom: 1px dashed #cfd8dc;
}
.amazon-widget {
display: flex;
flex-wrap: nowrap;
align-items: center;
border: 1px dashed #cfd8dc;
margin: 1rem auto;
}
.amazon-widget-info {
padding: 1rem;
font-size: 0.95rem;
font-weight: bold;
flex: auto;
color: #263238;
}
.amazon-widget-img {
text-align: center;
flex: initial;
}
.amazon-widget-img img {
border: none;
margin: 0 auto;
max-width: 100px;
padding: 1rem 2rem;
}
.amazon-widget-container:hover .amazon-widget {
border: 1px solid #263238;
}
.amazon-widget-container:hover .amazon-widget-via {
background-color: #263238;
color: #fff;
border: 0;
}
- このブックマークレットをブラウザーのツールバーに drag & drop して、Amazon の商品ページでクリック
- 生成された HTML を Markdown 形式 or HTML 形式のファイルに貼り付けると、商品へのリンクをブログカード風に貼り付けることができる
動作確認
