モチベーション
- GatsbyJSで作っているブログでリッチなリンクを貼れるようにした の記事でリッチなリンクを貼れるような仕組みを作ったのだが、AmazonはOGPデータが設定されておらず、上手く表示ができなかった
- 買ってよかったものとかを紹介する際にリッチないい感じのリンクを置きたい
- ブログを収益化したい
できあがったもの
ファイナルファンタジーVII リメイク - PS4
￥8,080(2020年05月24日時点)
amazon.co.jp
基礎から学ぶ Flutter
￥3,643(2020年11月05日時点)
amazon.co.jp
こんな感じのやつ。
工夫した点
- ASINのコードで管理するようにした
- おおまかな流れはリッチなリンクを作成した時と変わらない、Amazonの商品用のデータ構造とデータ取得用のロジックを用意した
- モバイルでもいい感じに表示されるようにした
- アフィリエイトのリンクになるようにした
- データ取得時の価格を出すようにした
(2021年01月02日追記)
gatsby-remark-component と rehype-react を使う方法でバグを踏んだので、MDXを使うアプローチに切り替えた。
GatsbyJSで作っているブログで gatsby-remark-component を使うのを止めて、 gatsby-plugin-mdx を導入した
