このサイトは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 メンズ

[オン] ランニングシューズ 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 = `![${title}](${modifiedUrl})\n\n[${title}](${productUrl})`;
        copyToClipboard(markdownContent);
 
    } catch (error) {
        console.error(error);
    }
})();