キクナントカドットコム
💻

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

2020-04-10

#GatsbyJSで最強のブログを作る
#GatsbyJS

モチベーション

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

できあがったもの

‎Bear - プライベートメモ

‎Bearは、ライター／弁護士／シェフ／教師／エンジニア／学生や保護者などのさまざまなユーザーによって利用されている自由なメモアプリです。 Bearは、素早い整理機能・編集ツール・エクスポート機能を備えているため、素早く書いてどこでも共有することができます。また、暗号化によってプライバシーを保護します。 2017 Apple デザインアワード 2016 年 App Store アプリオブ・ザ・イヤー 「Bear は、私が一番気に入っている執筆アプリ」- Kit Eaton, New York Times 柔軟かつシンプルなツールで*自由に書きましょう* Bear は多数のブロガー、作家、弁護…

apps.apple.com

Nakamy

Nakamyは友達のiPhoneの中身を覗けるサービスです。

nakamy.com

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

検討したサービス

Iframely - Embeds codes for today's Internet

Iframely gives you simple APIs to have all the Web's best media on your site and on all your users' devices.

iframely.com

まさしく、今回の用途なら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-component と rehype-react を使ってMarkdown内からRichLinkコンポーネントを呼び出せるようにした

現状の課題

(2021年01月02日追記)

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

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

キクナントカ

キクナントカ

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

おすすめのコンテンツ

💻
GatsbyJSで最強のブログを作る
🛒
買ってよかったもの