Zenn
🦋

Cocoon用Amazon短縮リンク生成Chrome拡張機能を作ってみた

2024/09/26に公開
JavaScript
Chrome 拡張機能
Amazon
cocoon
affiliate
tech

3行まとめ

  • Cocoonテーマ用のAmazonアフィリエイトリンクを簡単に生成するChrome拡張機能を開発
  • ワンクリックで商品ASINとキーワードを含むショートコードを生成
  • 除外キーワード機能で、不要な文字列を自動的に削除可能

https://github.com/matsubo/cocoon-amazon-shortcode

背景

WordPressのCocoonテーマを使用している方々にとって、Amazonの商品リンクを記事に挿入するのは日常的な作業です。しかし、この作業は意外と手間がかかり、特に多くの商品リンクを扱う場合は生産性の低下につながります。

問題

従来の方法では、以下のような手順を踏む必要がありました：

  1. Amazon商品ページを開く
  2. ASINを確認
  3. 商品タイトルをコピー
  4. WordPressの投稿画面に戻る
  5. ショートコードを手動で入力

この過程は時間がかかるだけでなく、人為的ミスも発生しやすいです。

目的

この問題を解決するため、以下の目標を掲げて開発に取り組みました

  1. ワンクリックでAmazonアフィリエイトリンクを生成する
  2. Cocoonテーマの仕様に合わせたショートコードを自動生成する
  3. 不要なキーワードを自動的に除外する機能を実装する

アプローチ

1. Chrome拡張機能の開発

Chrome拡張機能を開発することで、Amazonの商品ページ上で直接操作できるようにしました。これにより、ユーザーはタブの切り替えなしでリンクを生成できます。

2. ASINと商品タイトルの自動取得

JavaScriptを使用して、商品ページからASINと商品タイトルを自動的に抽出するロジックを実装しました。これにより、手動でのコピー&ペーストの必要がなくなりました。

3. ショートコード生成ロジック

Cocoonテーマで使用される以下のフォーマットに従ってショートコードを生成します：

[amazon asin="<ASIN>" kw="<商品名>"]

このショートコードをCocoonを利用しているWordPressにそのまま貼り付けると以下のように展開されます。

4. 除外キーワード機能

ユーザーが指定した除外キーワードを商品タイトルから自動的に削除する機能を実装しました。これにより、「Amazon限定」や「送料無料」などの不要な文字列を簡単に除去できます。

5. クリップボードへの自動コピー

生成されたショートコードは自動的にクリップボードにコピーされます。ユーザーはWordPressの投稿画面に戻って直接ペーストするだけで済みます。

まとめ

このChrome拡張機能を使用することで、Cocoonテーマを使用しているWordPressブロガーの作業効率が大幅に向上します。特に以下の点で有用です：

  1. 作業時間の短縮
  2. 人為的ミスの削減
  3. 一貫性のあるリンク生成

今後も、ユーザーフィードバックを基に機能の改善や拡張を行っていく予定です。皆さんもぜひ試してみてください！

Discussion