💻

GatsbyJSで作っているブログでAmazonのリンクをいい感じに貼れるようにした

2020-05-24

モチベーション

できあがったもの

こんな感じのやつ。

工夫した点

  • ASINのコードで管理するようにした
  • おおまかな流れはリッチなリンクを作成した時と変わらない、Amazonの商品用のデータ構造とデータ取得用のロジックを用意した
  • モバイルでもいい感じに表示されるようにした
  • アフィリエイトのリンクになるようにした
  • データ取得時の価格を出すようにした

(2021年01月02日追記)

gatsby-remark-componentrehype-react を使う方法でバグを踏んだので、MDXを使うアプローチに切り替えた。

GatsbyJSで作っているブログで gatsby-remark-component を使うのを止めて、 gatsby-plugin-mdx を導入した

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら