Amazon リンクを取得するブックマークレットをgeminiに作らせてみた

Amazonアフィリエイトのリンクをかっこよく。それでいて押し付けがましくない感じでの載せたいのはブロガーの永遠のテーマ（ぇ？

WordPressだとRinkerとかポチップとかありましたし、はてなでも昔ならカエレバとかでいい感じに出来ましたけれども。

現在のカエレバは楽天メインになってしまったので、私の様にAmazonに全乗っかりしてるブロガーだと使いづらいことこの上なし。

って事でなんか新しいツールないかなぁ？なんて思ってたんですが。

ないなら作れば良くない？という短絡的な考えからGeminiさんに作ってもらいました

ブックマークレットとCSS

とりあえずはブックマークレットってモノがわかってる人向けですが、まずは下記ボタンをブックマークバーとかにドラッグアンドドロップして登録します。

Amazon用ブックマークレット

Amazonリンク作成

↑このボタンをブラウザのブックマークバーにドラッグ＆ドロップしてください

実際の中身はこんな感じになっているので、ブックマークを編集して「あなたのアフィリエイトID」を自分のIDに書き換えてください。

javascript:(function(){try{const tag="あなたのアフィリエイトID";const asin=document.getElementById('ASIN')?.value||document.getElementsByName(%27asin%27)?.[0]?.value||location.href.match(/\/(?:dp|gp\/product)\/([A-Z0-9]{10})/)?.[1];if(!asin){alert("ASIN取得失敗");return;}const title=document.getElementById("productTitle")?.innerText.trim()||document.title;let img=document.querySelector("#landingImage,#imgTagWrapperId img,#main-image")?.src||"";img=img.replace(/\._AC_.*_\./,".");const price=document.querySelector(".a-price .a-offscreen")?.innerText||document.querySelector("#priceblock_ourprice,#priceblock_dealprice")?.innerText||"";const d=new Date();const date=(d.getMonth()+1)+"月"+d.getDate()+"日現在";const url=%60https://www.amazon.co.jp/dp/${asin}/?tag=${tag}%60;const html=%60<div class="tmj-card"><div class="tmj-info"><p class="tmj-title"><a href="${url}" target="_blank" rel="noopener nofollow">${title}</a></p><p class="tmj-domain">amzn.to</p>${price?%60<p class="tmj-price">${price} <span class="tmj-date">(${date})</span></p>%60:""}<a href="${url}" target="_blank" rel="noopener nofollow" class="tmj-btn-black">Amazon.co.jpで購入する</a></div><div class="tmj-image"><a href="${url}" target="_blank" rel="noopener nofollow"><img src="${img}" alt="${title}"></a></div></div>%60.replace(/\n/g,"");if(navigator.clipboard){navigator.clipboard.writeText(html).then(()=>{alert("コピー完了！");});}else{prompt("コピー完了:",html);}}catch(e){alert("Error:"+e.message);}})();

あとはAmazonの商品ページでそのブックマークレットを発動させればクリップボードにHTMLソースがコピーされます。

実際にコピーされるHTMLはこんな感じ

<div class="tmj-card"><div class="tmj-info"><p class="tmj-title"><a href="https://www.amazon.co.jp/dp/B0DY15GFNG/?tag=tomag-22" target="_blank" rel="noopener nofollow">UGREEN Revodok Pro 9-in-1 USB-Cハブ 10Gbpsデータ転送対応 4K HDMI・ギガビットLAN・PD100W・SD/TFカードリーダー搭載 MacBook/iPad/Surfaceなど対応</a></p><p class="tmj-domain">amzn.to</p><p class="tmj-price">￥3,429 <span class="tmj-date">(1月10日現在)</span></p><a href="https://www.amazon.co.jp/dp/B0DY15GFNG/?tag=tomag-22" target="_blank" rel="noopener nofollow" class="tmj-btn-black">Amazon.co.jpで購入する</a></div><div class="tmj-image"><a href="https://www.amazon.co.jp/dp/B0DY15GFNG/?tag=tomag-22" target="_blank" rel="noopener nofollow"><img src="https://m.media-amazon.com/images/I/71scB9Eu7RL.jpg" alt="UGREEN Revodok Pro 9-in-1 USB-Cハブ 10Gbpsデータ転送対応 4K HDMI・ギガビットLAN・PD100W・SD/TFカードリーダー搭載 MacBook/iPad/Surfaceなど対応"></a></div></div>

⇧アフィリエイトIDは私のになってるんでそのままコピペしたらうちの収益になっちゃうからパクってもダメだよw

そしてCSSは以下のとおり

/* 左テキスト・右画像のAmazonカード（画像1を完全再現） */
.tmj-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 24px 0;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    box-sizing: border-box; /* 幅計算を正確に */
}

.tmj-info {
    flex: 1;
    min-width: 0; /* テキスト溢れ防止 */
    padding-right: 32px;
    display: flex;
    flex-direction: column;
}

.tmj-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 10px 0;
    color: #111827;
}

.tmj-title a {
    color: inherit;
    text-decoration: none;
}

.tmj-domain {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.tmj-price {
    font-size: 21px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 22px 0;
}

.tmj-date {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 400;
    margin-left: 6px;
}

.tmj-btn-black {
    display: block;
    background: #111827;
    color: #ffffff !important;
    text-align: center;
    padding: 13px 28px;
    border-radius: 8px;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    width: fit-content;
    line-height: 1.2;
    transition: background 0.2s;
}

.tmj-image {
    flex: 0 0 180px; /* 画像エリアの固定幅 */
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tmj-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* スマホ表示の切り替え設定 */
@media screen and (max-width: 640px) {
    .tmj-card {
        flex-direction: column-reverse; /* 画像を上に、テキストを下にする */
        padding: 20px;
    }
    
    .tmj-info {
        padding-right: 0;
        margin-top: 20px;
        width: 100%;
        align-items: flex-start; /* 左寄せ */
    }

    .tmj-image {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        padding-bottom: 10px;
    }

    .tmj-image img {
        max-height: 200px;
    }

    .tmj-btn-black {
        width: 100%; /* スマホではボタンを横いっぱいに */
        box-sizing: border-box;
    }
}