1. SIS Lab
  2. >
  3. Blog
  4. >
  5. HugoのShortcodesを利用してAmazon紹介リンクタグを作成

HugoのShortcodesを利用してAmazon紹介リンクタグを作成

更新日:2020.07.16 作成日:2017.02.18

技術書の紹介をする際も、カエレバのようなリンクビルダーを利用してきましたが、重い腰を上げてHugoのshortcodesData-driven Contentで対応しました。

使用方法

{{% amazon 477418392X %}}と記述することで、以下の結果を得ることができます。

みんなのGo言語【現場で使える実践テクニック】
出版社:技術評論社
著者:松木雅幸mattn藤原俊一郎中島大一牧 大輔鈴木健太稲葉貴洋
発売日: 2016-09-09T00:00:01Z

Shortcodesを利用するメリット

  1. 紹介リンクを生成して貼り付ける必要がなくなった
  2. Markdownの文書中にHTMLリンクを埋め込まなくてよくなったので可視性が上がった
  3. Amazon紹介のリンクのデザインを変更する場合、Shortcodesとcssを変更することで一括変更できるようになった

Amazon紹介リンクをhtmlで埋め込むと、変更したくなった場合は1つ1つ手で直していかなければいけません。Shortcodesにしておけば、テンプレートとCSSを変えることで簡単にデザインを変更することができます。

Shortcodes amazon.html

{{ $associateId := "YOUR_ASSOCIATE_ID" }}
{{ $itemId := index .Params 0 }}
{{ $json := getJSON "https://yourapi.com/?itemid=" $itemId }}

<div class="amazon-shortcode-box">
  <div class="amazon-shortcode-image">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/{{ $itemId }}/{{ $associateId }}/" name="amazon-shortcode" target="\_blank">
      <img src="{{ $json.image_url }}" alt="{{ $json.title }}" />
    </a>
  </div>
  <div class="amazon-shortcode-info">
    <p class="amazon-shortcode-title">
      <a href="http://www.amazon.co.jp/exec/obidos/ASIN/{{ $itemId }}/{{ $associateId }}/" name="amazon-shortcode" target="\_blank">
        {{ $json.title }}
      </a>
    </p>
    {{ with $json.author }}
      <p class="amazon-shortcode-author">{{ . }}</p>
    {{ end }}
    <div class="amazon-shortcode-detail">
      {{ if or ( eq $json.productgroup "Book") (eq $json.productgroup "eBooks") }}
        <p>出版社:{{ $json.publisher }}</p>
      {{ else }}
        <p>{{ $json.label }}</p>
      {{ end }}
      {{ with $json.publicationdate }}
        <p>発売日:{{ . }}</p>
      {{ end }}
    </div>
    <p>
      <a href="http://www.amazon.co.jp/exec/obidos/ASIN/{{ $itemId }}/{{ $associateId }}/" name="backport" target="\_blank">
        <i class="fa fa-amazon" aria-hidden="true"></i>&nbsp;Amazonで詳細を見る
      </a>
    </p>
  </div>
  <br style="clear: both;"/>
</div>

Data-driven Content

getJSONの取得先は自前のAPIサーバです。AmazonのItem Idを渡し、Amazon Product Advertising APIを利用して情報を取ってきます。

amazon.html

{{ $itemId := index .Params 0 }}
{{ $json := getJSON "https://yourapi.com/?itemid=" $itemId }}

getJSONで指定したURIにGETリクエストを送って、jsonを取得します。取得したデータは、デフォルトだと$TMP/hugoに格納されます。私は、config.ymlでcacheDir: cacheと指定しているため、cacheディレクトリにどんどん溜まっていきます。

HugoのShortcodesを利用してAmazon紹介リンクタグを作成 https://i.gyazo.com/5c4906467fd2cca1af9c78d101604e5c.png

APIサーバのレスポンスを待つため、一気にAmazonリンクを生成しようとするとどうしてもタイムアウトを起こしてhugo生成がエラーになります。これは、Amazon Product Advertising APIの仕様で連続アクセスが禁止されているため、APIサーバ側でエラーになってしまうからです。

今の運用は、

  1. VSCodeでMarkdown編集
  2. hugo serverでプレビュー実施
  3. {{ amazon ITEMID }}を1件ずつ処理

と1つずつ確認しながら実施することで回避しています。一度でも正常に生成できれば、cacheディレクトリにキャッシュが作成されるため、以降はエラーが発生しなくなります。

参考

スポンサーリンク

Related contents

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.10.14

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

TECH

2017.08.31

Hugo Shortcodesの作り方

TECH

2017.04.09

gulpで画像の最適化

TECH

2017.03.19

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

TECH

2017.02.25

HugoのMarkdownでtarget='_blank'を実現する方法

TECH

2017.01.14

CircleCIでMeCabを利用してHugoビルドする