backport

技術ネタと野球とときどき雑談

HugoでAmazonの商品紹介用のShortcodesを作ってみた

2016-12-10
development hugo

HugoにはShortcodesという独自のsnippetを作る機能があります。 Markdownに独自タグを追加できるような感じですね。

TwitterやYouTube、GitHub gistsあたりが組み込みで用意されているだけでなく、独自のShortcodesを作ることもできます。 今回はAmazonの商品紹介をするShortcodesを作ってみました。

layouts\shortcodesの中にamazon_shortcodes.htmlという名前でファイルを配置しておきます。ソースコードは長くなるので後述。

あとはmarkdownの中に

{{% amazon_shortcodes B00UAAK07S %}}

と書けば

人工知能は人間を超えるか (角川EPUB選書)

人工知能は人間を超えるか (角川EPUB選書)

松尾 豊

出版社:KADOKAWA / 中経出版

発売日:2015-03-10

 Amazonで詳細を見る


といった風に表示されます。

ShortcodesはHTMLにGo Template Primerを組み合わせて書きます。自分はGoに馴染みがないのでTemplateの書き方に面喰いましたが、見よう見まねでなんとかなるレベルです。

また、HugoにはDynamic Contentと呼ばれる動的コンテンツを扱う仕組みがあります。 今回はその中のgetJSONを使いました。ローカルのファイル or URLからJSONを取得する関数です。

残念ながらAmazonの商品情報をJSONで返してくれる都合のいいサービスは見つからなかったので、前に書いた記事のように自前で拵えます。自分はPHPで作りましたが、いまっぽくするならAmazon Lambda + API Gatewayとかなんですかね。

ちなみにこのgetJSONはURLから取得した結果をローカルにキャッシュします。キャッシュは標準だと$TMPDIR/hugo_cache/に格納されています。 サーバー側のJSONを返す側と同時並行で作っていたので、JSON定義を変えても反映されなくてハマってしまいました。なんか変だなーと思ったらキャッシュを消してみましょう。

ソースコードはこんな感じです。 2行目で引数に指定したASINを取得し、3行目でASINから商品情報のJSONを取得しています。 あとはJSONから必要な情報を引っ張り出してきてHTMLに当て込んでいくだけ。

とても手軽に作れるので、markdownの中にHTML直接書きたくないなあ、という人は積極的にShortcodes化しちゃいましょう。



コメント欄を表示する