このサイトはObsidianで管理しているノートをQuartzで公開しており、全てのテキストはMarkdownで書いている。
このため、Amazonの商品紹介をするのがなかなか面倒であり、これを改善するためのブックマークレットを書いた。
使い方
Amazonの商品ページに行ってこのブックマークレットを起動すると、以下のようなMarkdownが生成され、クリップボードへコピーされる。
![[オン] ランニングシューズ Cloudmonster メンズ](https://a.media-amazon.com/images/I/51lG1xvL7nL._AC_SY200_.jpg)
[[オン] ランニングシューズ Cloudmonster メンズ](https://www.amazon.co.jp/gp/product/B0CN337TNH/?tag=namaraiicom-22)
出力はこんな感じ。殺風景だけどMarkdownだけで書いていて、専用のCSSを当てていないのでやむをえない。
[オン] ランニングシューズ Cloudmonster メンズ
実装
実装はこんな感じ。Amazon(JP)で複数ジャンルの商品ページのHTMLを確認し、チェックした範囲では動作しているが、うまく動かないページもあると思う。
もし、動かないページをみつけたらこちらまでご連絡いただければ幸い。ブックマークレットへの変換は以下のページが便利です。
(function() {
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
alert('クリップボードにコピーされました');
}).catch(function(error) {
console.error('クリップボードへのコピーに失敗しました', error);
});
}
function getElement(selector) {
return document.querySelector(selector);
}
try {
var size = 200;
var asinElement = getElement('input#ASIN');
if (!asinElement) throw new Error('ASINが見つかりませんでした');
var asin = asinElement.value;
var titleElement = getElement('span#productTitle');
if (!titleElement) throw new Error('製品名が見つかりませんでした');
var title = titleElement.textContent.trim();
var thumbnailUrl = getElement('img#landingImage')?.src ||
getElement('img[src*="_SY"]')?.src ||
getElement('input#productImageUrl')?.value ||
getElement('img[src*="_SX"]')?.src;
if (!thumbnailUrl) {
throw new Error('サムネイル画像が見つかりませんでした');
}
var productUrl = 'https://www.amazon.co.jp/gp/product/' + asin + '/?tag=namaraiicom-22';
var modifiedUrl;
var sizeMatch = thumbnailUrl.match(/_(_SY|_SX)(\d+)_/);
if (sizeMatch && sizeMatch[2]) {
modifiedUrl = thumbnailUrl.replace(/_(_SY|_SX)\d+_/, `_${sizeMatch[1]}${size}_`);
} else if (thumbnailUrl.match(/_(SY|SX)(\d+)_/)) {
modifiedUrl = thumbnailUrl.replace(/_(SY|SX)\d+_/, `_SY${size}_`);
} else {
modifiedUrl = thumbnailUrl;
}
var markdownContent = `\n\n[${title}](${productUrl})`;
copyToClipboard(markdownContent);
} catch (error) {
console.error(error);
}
})();