Tweet
Tweet

Slide 1

Slide 1 text

@sosomuse Next.jsで作ったブログ内に リンクカードを実装したときの知見

Slide 2

Slide 2 text

作ったもの 6 Next.js on Vercel（SG）の個人ブログにリンクカードを実装した

Slide 3

Slide 3 text

前提 ™ Next.js v13 以前で作ったブログなので、App Router 対応してません（どこか で移行したい。ただし App Router でも Pages Router でもこの資料の内容に は特に影響しません。書き方ちょっと変わるぐらいのはず ™ このUIの呼び方は色々あり統一されていない（？）ようですが、本資料中で はZennに合わせてリンクカードと呼称します。 ™ https://zenn.dev/zenn/articles/markdown-guide

Slide 4

Slide 4 text

作ってみた感想 https://www.sososo.me 自分のブログで作ったけど思ったより面倒だっY Qiita, Zenn, Twitterなどはクオリティ高いなと再認1 なので実装に手間取った時に得た知見を話します

Slide 5

Slide 5 text

アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介

Slide 6

Slide 6 text

自己紹介 OSSコントリビュート: Storybook, i18next, ...etc 最近はAWS CDKとAtCoderにハマってます。 西村 爽 So Nishimura フロントエンド: Next.js バックエンド: Go インフラ: AWS @sosomuse

Slide 7

Slide 7 text

アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介

Slide 8

Slide 8 text

リンクカードの基本構成 これらは で定義されている OGP サービスによって表示要素は異なるが、基本的に以下の要素で構成 URL Title Description Image

Slide 9

Slide 9 text

OGP(Open Graph protocol) あとはサイトのメタデータから抽出して表示するだけ！ Title: `og:title` Description: `og:description` Image: `og:image` パラメータ https://ogp.me/ Facebookが開発したメタデータのプロトコル 大抵のWebサイトはこれに沿って自身のサイト情報を提供してくれている

Slide 10

Slide 10 text

コンポーネント作成 いい感じにコンポーネントを作る

Slide 11

Slide 11 text

完成？ やった！完成だ！... ではない OGPの取得場所とキャッシュどうするの？

Slide 12

Slide 12 text

アジェンダ 2. リンクカードの基本構成 3. OGPの取得とキャッシュ 1. 自己紹介

Slide 13

Slide 13 text

OGPの取得 課題 解決策 OGPはHTMLのメタデータに定義されているので、取得するためには当然対象の Webサイトにアクセスしなければならない。 OGP取得速度は対象のWebサイトへの表示速度に依存するので、最悪数秒かかる ことも想定される。 クライアント側で取得するのでは遅すぎるし、APIサーバーで持つにしてもキャッ シュしたい。 （クライアント側だとCORS問題もある） クライアント以外で取得してどこかにキャッシュを持つ 具体的な解決策はいくつかありそうだが、個人ブログなのでコストは掛けたく無 いしリソースも管理したく無い（APIサーバーとかは用意したくない）

Slide 14

Slide 14 text

他サービスの実装（1） Zenn Zennは開発技術がかなり公開されているので、こういった時非常に参考になりま す。 現在も同じ構成かは分かりませんが catnose さんの当時の scrap によれば、 CloudFunctionsでHTMLを生成して、iframeで表示。一定期間キャッシュしてい るとのこと。 r https://zenn.dev/catnose99/scraps/381b3750099f49

Slide 15

Slide 15 text

他サービスの実装（2） 所感 エッジサーバーで取得・キャッシュしてから返すのが実装としては無難そうだ が、ぶっちゃけ個人ブログの1機能ぐらいであればエッジサーバーですら用意した くない。

Slide 16

Slide 16 text

解決策（1） 最終的な解決 SGでブログをレンダリングしているので、ビルドフェーズでメタデータを取得して最終 的なHTMLを生成する。 メタデータはキャッシュとしてJSONファイルでGitにコミットする。

Slide 17

Slide 17 text

解決策（2） 解決策（2） 解決策詳細（ビルドフェーズで以下の事を行う） uG 記事のMarkdownからURLを取得して、HTTPリクエストで対象サイトのメタデータ を取r ƒG 取得したメタデータをJSONファイルに書き込む（キャッシュ用e 3G JSONファイルのメタデータを使ってHTML生s BG キャッシュ用JSONファイルはコミットする

Slide 18

Slide 18 text

解決策（2） 解決策（3） ビルドフェーズのコード

Slide 19

Slide 19 text

解決策（2） 解決策（4） 以上でSGで表示できて、キャッシュされるようにもなりました

Slide 20

Slide 20 text

解決策（2） 課題 & まとめ 課題 残った課題 この処理だと一度取得したメタデータが一生キャッシュされるので、一定期間でパージするよ うな処理を入れないと元サイトのOGPが変わった時に追従されない。 再生成スクリプトを用意してGitHub Actionsで定期実行するのが妥当かなーとか考えている が、やはり個人ブログの1機能のためにそんなリソースを持ちたくない。（まぁ、GitHub Actionsぐらいならいいかと思いつつ面倒なので放置してます...） OGPが変わる機会もそんなにないので、今はいいかなと思って放置している。

Slide 21

Slide 21 text

解決策（2） 課題 & まとめ まとめ リンクカードの表示はHTTPリクエストが絡むので思ったより手間が掛かる SGであればビルドフェーズでリクエストしてしまえば高速に表示できる SGできないのであればエッジで処理するのが無難な選択肢

Slide 22

Slide 22 text

ご静聴ありがとうございました