ASIN と Hugo の Shortcode を用いた Amazon アソシエイト用のウェジェット開発

1. はじめに

 Amazon アソシエイト・プログラムでは,様々なウェジェットを使用することができます。しかし,一部のウィジェットは Adobe Flash が必要であったり,デザインが変更できないなど,使い勝手がよくありません。そこで,ASIN1 を入力すると自動的にアソシエイトリンクが付与された画像を出力するウェジェットを開発しました。

2. 要件定義

 本記事では,以下のような要件を満たす Shortcode を実装します。

 (1) 複数個の ASIN を引数として受け取る
 (2) 受け取った ASIN に対応する画像を出力する
 (3) 出力された画像にはアソシエイトリンクを付与する

3. 実装

  iPentec Web 記事 によると,(A) によって画像を取得することができるそうです。しかし,HTTP プロトコルによる通信のため非推奨です。そこで, Hinemosu Web 記事 を参考に HTTPS に対応させます (B) 。また,アソシエイト・セントラルの ヘルプページ によると,(C) を付与することでアソシエイトリンクとして認識されるそうです。しかし,こちらも HTTP プロトコルによる通信なので非推奨です。そこで,プロトコルを HTTP から HTTPS に変更します (D) 。

(A) ・・・ http://images-jp.amazon.com/images/P/[ASIN].[CC].[TYPE].jpg
(B) ・・・ https://images-na.ssl-images-amazon.com/images/P/[ASIN].[CC].[TYPE].jpg
(C) ・・・ http://www.amazon.co.jp/dp/[ASIN]/ref=nosim?tag=[ID]
(D) ・・・ https://www.amazon.co.jp/dp/[ASIN]/ref=nosim?tag=[ID]

 上記の情報を基に,Shortcode を実装します。Hugo の ドキュメント を参考にして,/layouts/shortcodes/ の直下に amazon.html を作成します。[ID] の部分は自分のアソシエイト ID に置換してください。また,[CC][TYPE] は任意のオプションに置換してください。

{{ range $.Params }}
<a href="https://www.amazon.co.jp/dp/{{ . }}?tag=[ID]" target=”_blank”>
  <img src="https://images-na.ssl-images-amazon.com/images/P/{{ . }}.[CC].[TYEP]" alt="">
</a>
{{ end }}

4. 実行結果

 上記で実装した Shortcode の実行方法と,その実行結果を以下に示します。それぞれの ASIN と対応した画像が出力され,アソシエイトリンクが付与されていれば正常に実行されています。

{{< amazon "B01L8CANVO" "B071D4D6XX" "B07BMNGXFC" >}}

5. おわりに

 ここまで,ASIN を入力すると自動的にアソシエイトリンクが付与された画像を出力するウェジェットの開発手順について記述していました。本記事で実装したウィジェットは装飾していませんが,装飾することでスライドショーウェジェットなどへの応用も可能です。

Annotation

  1. Amazon Standard Identification Number の略称 ↩︎

Written by

Dutch
コンピュータサイエンスを専攻している大学院生です。趣味は,アニメ鑑賞・プログラミング・ライフハックなどです。

TOC

Actions

Related