Amazon アソシエイト・楽天アフィリエイトの商品を検索して独自の広告コードを生成する Web アプリ「Affi Code Generator」を作った

コレまで、

• Amazon アソシエイト向けの Amazon Product Advertising API v5.0
• 楽天アフィリエイト向けの Rakuten Web Service API

を調査してきた。これらを使って、

• 「はてなブログ」に組み込まれているような商品検索の仕組みと、
• 独自の広告 HTML コードを生成する仕組み

をウェブアプリとして実装してみた。その名も Affi Code Generator。

• Affi Code Generator

ソースコードは以下。

• Neos21/affi-code-generator

使い方

このウェブアプリを使うには、自身で発行した API キーが必要になる。ウェブアプリの URL に、クエリパラメータとして情報を付与すると、最初からこれらの情報をフォームに設定した状態で画面を開ける。

https://affi-code-generator.vercel.app/
  ?keyword=【Keyword】
  &amazonAccessKey=【Amazon Access Key】
  &amazonSecretKey=【Amazon Secret Key】
  &amazonPartnerTag=【Amazon Partner Tag (Associate ID or Tracking ID)】
  &rakutenApplicationId=【Rakuten Application ID】
  &rakutenAffiliateId=【Rakuten Affiliate ID】

Amazon のアクセスキーには + 記号が入っていることがある。コレをそのまま URL に書いてしまうとスペース扱いになってしまうので、+ 記号だけは %2B と置換してやること。

Amazon アソシエイトだけ使う場合や、逆に楽天アフィリエイトだけ使う場合は、もう一方の API キー情報は不要。keyword パラメータは検索キーワードなので、基本はデフォルト指定しないかな。

クエリパラメータとしてクレデンシャルに近い情報を書いてもらうことになるが、これらの情報はどこにも保存していないのでご安心を。そのために GitHub でソースコードを全量公開してある。

で、使い方だが、画面上部のフォームに API キー情報を設定し、任意のキーワードを入力して「一括検索」ボタンを押すと、画面両側に Amazon と楽天の商品検索結果が表示される。

これらの商品を選択すると、画面中央のテキストエリアに、HTML コードに変換された内容が出力される。テキストエリアをクリックすると、その HTML コードをクリップボードにコピーする。

HTML コードのテンプレートはコチラで用意したモノ。任意に変更できると良いのだろうが、今はそこまで対応できていない。生成される HTML コードが気に入らない場合は、リポジトリをフォークして、ソースを直してもらうのが手っ取り早いだろう。

実装解説

それぞれの ASP から情報を取得する API は、Amazon や楽天が公式で用意しているモノ。Amazon PA API は amazon-paapi という薄いラッパーを使用し、楽天 API は素の JS。

Amazon PA API はブラウザ上の JS ではコールできなかったので、ココをサーバレス API として動かすために、Vercel にデプロイしている。

それ以外は全てフロントエンドで完結しており、Create-React-App で作った簡単な SPA だ。React がまだよく分かっていないので、コンポーネントの分け方とか、コンポーネント間のデータのやり取りが怪しい。

デザインがイマイチで、スマホ向けではない。前述のとおり、現状は生成する HTML コードも自由に変更できないのでもう少し改善の余地はあるか。

とりあえず今回はこんな感じで〜