プログラミングの知識はMS-DOS時代のBASICで止まっている私。そんな私が、最新AI（Gemini）をパートナーに、自分にとっての「本質的な最適解」を求めて、Chrome拡張機能を開発しました。
その名も「Tomazon（トマゾン）」。
Amazonの商品ページで右クリックするだけで、Amazon・楽天・Yahoo!ショッピングのボタンが付いた美しい商品リンクを作成できるツールです。ブックマークレット版の「Tomazlet」をさらに進化させ、より速く、より高画質に、そして「はてなブログ」や「WordPress」での表示不具合を根性で解決した自信作です。
Tomazonでできること
- 右クリック一発: Amazonのページ上でメニューを選ぶだけ。
- 高画質・安定: Amazonの複雑な画像仕様を解析し、最高画質のURLを抽出。
- 各社ID自動連携: 一度設定すれば、自分専用のアフィリエイトリンクを自動生成。
- ブログ表示不具合対策: 画像が消えてしまう「自動変換問題」を特殊なコード記述で回避済み。
インストール方法（デベロッパーモードでの導入）
ストアの審査を通していない「自作の道具」ですので、以下の手順であなたのChromeに登録してください。3分で終わります。
1. ファイルのダウンロード
まずはこちらからTomazonの本体ファイルをダウンロードし、デスクトップなどに解凍してください。
2. Chromeの拡張機能画面を開く
ChromeのURLバーに chrome://extensions/ と入力して開くか、右上の「パズル画面アイコン」から「拡張機能を管理」を選択します。
3. デベロッパーモードをONにする
画面右上にある「デベロッパーモード」のスイッチをONにします。これをONにすることで、自作の拡張機能が読み込めるようになります。
4. フォルダを読み込む
画面左上の「パッケージ化されていない拡張機能を読み込む」をクリックし、先ほど解凍した「Tomazon」フォルダを選択してください。
これでインストールは完了です！
使いかた
１．拡張機能の「オプション」から、Amazon/楽天/Yahooの各IDを設定します。
２．Amazonの商品ページで、何もないところを右クリック。
３．「Tomazonで商品リンク生成」を選択。
４．自動で生成ページが開くので、商品名を確認して「HTMLをコピー」！
（ボタンの文言や検索ワード、各ボタンの表示・表示などは編集可能。変更はリアリタイムでHTMLタグに反映されます）
５．ブログに貼ればこんな感じのリンクが作成できます
なお。スタイルシートがないと見栄えが悪いので、各ブログサービスのCSSやWordPressのCSSに以下をコピペして貼り付けてください。
Tomazon用CSS
/* --- LinkMaker：商品リンク基本デザイン --- */
.tmj-card {
border: 1px solid #e2e8f0; /* 枠線 */
border-radius: 12px; /* 角の丸み */
padding: 24px;
margin: 24px 0;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
box-sizing: border-box;
}
/* 横並びレイアウト（PC用） */
.tmj-main {
display: flex;
justify-content: space-between;
align-items: center;
}
/* テキストエリア（タイトル・価格） */
.tmj-info {
flex: 1;
padding-right: 20px;
min-width: 0;
}
/* 商品タイトル */
.tmj-title {
font-size: 17px !important;
font-weight: bold !important;
margin: 0 0 10px 0 !important;
line-height: 1.5 !important;
color: #333 !important;
}
/* 価格表示 */
.tmj-price {
font-size: 18px;
font-weight: bold;
color: #111827;
margin-bottom: 15px;
}
/* 価格の横の日付 */
.tmj-date {
font-size: 11px;
color: #9ca3af;
font-weight: normal;
margin-left: 5px;
}
/* ボタンの並び */
.tmj-btns {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 15px;
}
/* ボタン共通設定 */
.btn-link {
padding: 10px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
color: #fff !important;
transition: opacity 0.2s;
text-align: center;
line-height: 1;
display: inline-block;
}
.btn-link:hover { opacity: 0.8; }
.btn-amz { background: #ff9900; } /* Amazon オレンジ */
.btn-rak { background: #bf0000; } /* 楽天 レッド */
.btn-yah { background: #ff0033; } /* Yahoo レッド */
/* 画像エリア */
.tmj-image {
flex: 0 0 160px;
text-align: right;
}
/* 商品画像本体 */
.tmj-image img {
max-width: 100% !important;
height: auto !important;
max-height: 160px !important; /* PC時の最大高さ */
object-fit: contain;
border: none !important;
box-shadow: none !important;
}
/* クレジット表記（powered by...） */
.tmj-footer {
text-align: right;
margin-top: 10px;
line-height: 1;
}
.tmj-credit {
font-size: 10px;
color: #9ca3af;
text-decoration: none !important;
opacity: 0.7;
}
/* --- スマートフォン向け表示設定 (640px以下) --- */
@media (max-width: 640px) {
/* 画像を上、テキストを下に入れ替え */
.tmj-main {
flex-direction: column-reverse;
align-items: stretch;
}
/* スマホ時の画像エリア設定 */
.tmj-image {
width: 100%;
text-align: center;
margin-bottom: 20px;
flex: 0 0 auto;
}
/* ★重要★ スマホ時に画像が巨大化しないよう制限 */
.tmj-image img {
max-height: 200px !important; /* 縦長画像でも200pxまでに制限 */
width: auto !important;
margin: 0 auto;
}
.tmj-info { padding-right: 0; }
/* ボタンを縦並びにしてタップしやすくする */
.tmj-btns {
flex-direction: column;
gap: 10px;
}
.btn-link {
width: 100%;
padding: 14px;
font-size: 15px;
box-sizing: border-box;
}
}「道具」を自作するということ
「需要は少なそうだけれど、確実に誰かが欲しい物」をAIと作り上げました。
SNSやブログも進化して商品リンク作成も楽にはなりましたし、WordPressなどではプラグインで実現できます。
しかし…我が古巣であるはてなブログやFC2ブログあたりで頑固に頑張ってらっしゃる方々は未だにHTMLで商品リンクを貼ってらっしゃるのです（笑）
ということで、あなたのブログ運営の相棒として可愛がってやってください。
編集後記
作成の裏側や、AIとのやり取りの詳細は、こちらの記事でも語っています。もし興味があれば、覗いてみてください。
コメント