GatsbyJSで作っているブログでリッチなリンクを貼れるようにした

2020-04-10

モチベーション

  • アプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかった
  • noteとかでよく見るやつ

できあがったもの

こんな感じのやつ。アプリとかサービスの紹介とかで使っていきたい。

検討したサービス

まさしく、今回の用途ならIframelyが良さそうなのだが、外部サービスに依存したくなかったのと、カスタマイズ機能があるものの、もっと細かいカスタマイズがしたかったので、作ってみたかった想いもあり、自作することにした。

デザインで検討したこと

  • 画像を左に置くか、右に置くか迷った
  • アイキャッチ的な意味だと画像が左な気もしたが、このコンポーネントの目的はあくまでもリンクなので、タイトルなどの情報がまず目に入る左に来て、画像はあくまで副次的なものという考えで右にした
  • 他サービスも右のものが多かったので、慣れという面でも右が良さそう

    • noteとかMediumとかはてなブログは右だった

自作の流れ

  • /content/data/links.yaml 内でリッチなリンクとして出したいURLの一覧を管理するようにした
  • URLの一覧を読み出しながら、 isFetched != true なURLがあれば、リクエストを投げて結果を取得し、isFetched: true な状態でファイルに書き込みに行き、OGPデータが揃った一覧を返す関数を作成した

    • 簡易的なキャッシュ機構として、すでに過去に取得済みであれば、叩きに行かない仕組みを作った
    • この機構がないとbuild時にすべてのURLを叩くことになるので、量が増えると辛そうなのが目に見えたので、この機構を作った
    • 情報が古い、画像が表示されなくなった、となった場合は isFetched: false にしておけば良い
  • gatsby-node.js 内で上記関数を呼び出して、コンポーネントからGraphQL経由でデータを参照できるようにした

    • 画像は gatsby-image を通すために、 createRemoteFileNode をするようにした
    • URLやタイトルなどの情報は上記で作成したNodeに紐付ける形で createNodeField をして、GraphQLから取得できるようにした
  • URLをプロパティとするRichLinkコンポーネントを作成した

    • GraphQL経由の data.allFile.edges で取得した一覧にプロパティで渡ってきたURLが存在した場合、その情報を使ってリッチな見た目にしたコンポーネントを返す
    • Material UIのCardコンポーネントを使用した
    • 存在しない場合は単純なaタグのリンクを返すようにした
  • gatsby-remark-componentrehype-react を使ってMarkdown内からRichLinkコンポーネントを呼び出せるようにした

現状の課題

キクナントカ

ソフトウェアエンジニアをしています。趣味でボードゲームを制作したり、個人開発でNakamyというサービスを開発しています。詳しくはこちら