Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SSGなサイトでOGP画像を動的生成したい
Search
kubotak
December 19, 2020
Programming
1
2.2k
SSGなサイトでOGP画像を動的生成したい
Shizuoka.js#6 LT
kubotak
December 19, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
情報漏洩させないための設計
kubotak
6
2.2k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
140
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
550
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
910
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.3k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
800
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
「App Intent」よくわからんけどすごい!
rinngo0302
1
110
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
PipeCDのプラグイン化で目指すところ
warashi
1
310
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
400
Featured
See All Featured
Scaling GitHub
holman
460
140k
The Invisible Side of Design
smashingmag
301
51k
Building Adaptive Systems
keathley
43
2.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
4 Signs Your Business is Dying
shpigford
184
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
KATA
mclloyd
30
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Building an army of robots
kneath
306
45k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
Copyright © M&A Cloud All rights reserved. SSGなサイトでOGP画像を動的生成したい Shizuoka.js#6 LT
Kenjiro Kubota
Copyright © M&A Cloud All rights reserved. Profile 2 久保田
賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド JavaScript Go PHP https://kubotak.page
Copyright © M&A Cloud All rights reserved. SSGとは
Copyright © M&A Cloud All rights reserved. Static Site Generator
Static Site Generator • HTMLを事前に生成して配信すること ◦ サーバーに動的な処理がない • いわゆるJamStackとかそれ
Copyright © M&A Cloud All rights reserved. OGPとは
Copyright © M&A Cloud All rights reserved. Open Graph Protocol
Open Graph Protocol • Facebookでシェアされるときにいい感じに画像やタイトルを出す 仕組み(雑に) • プロトコルの初期バージョンはRDFaに基づいている ◦ HTMLをマークアップするための記述仕様の一つ
Copyright © M&A Cloud All rights reserved. どうやって作ったらいいの?
Copyright © M&A Cloud All rights reserved. QiitaやZennはどうなってるのか QiitaやZennはどうなってるのか •
Qiita ◦ 画像配信サービス(CDN)のimgixを利用 ◦ クエリパラメータによる文字と台紙の合成 • Zenn ◦ 画像配信サービス(CDN)のCloudinaryを利用 ◦ Qiitaとたぶん同じ
Copyright © M&A Cloud All rights reserved. 外部サービス(CDN)を使おう
Copyright © M&A Cloud All rights reserved. 完
Copyright © M&A Cloud All rights reserved. そうじゃない、他には?
Copyright © M&A Cloud All rights reserved. vercel/og-image vercel/og-image •
Open Graph Image as a Service!!! • リポジトリをフォークしてカスタマイズしてVercelにデプロイ • デフォルトでは日本語フォントが無いので注意
Copyright © M&A Cloud All rights reserved. 「Vercel使ってないし、ホスティン グサービスは1個に集約したい」 私
Copyright © M&A Cloud All rights reserved. 「Vercel使ってないし、ホスティン グサービスは1個に集約したい」 私
「というか、大したページ数ないの で事前に生成しちゃおう」 私
Copyright © M&A Cloud All rights reserved. 材料 recipe •
台紙 • フリーフォント • sharp • text-svg • tiny-segmenter • image-size
Copyright © M&A Cloud All rights reserved. 台紙 台紙 •
これがないと始まらない! ◦ 文字と合成する際のベースとなるテンプレート
Copyright © M&A Cloud All rights reserved. フリーフォント フリーフォント •
日本語を出力するなら日本語フォントは必須 • おすすめはGoogleFonts https://fonts.google.com/?subset=japanese
Copyright © M&A Cloud All rights reserved. sharp sharp •
node.js製画像変換ライブラリ ◦ リサイズ ◦ 合成 ◦ 回転・反転・etc ◦ 色を操作 ◦ etc ▪ imageMagicよりも高速にリサイズできる(らしい)
Copyright © M&A Cloud All rights reserved. text-svg text-svg •
node-canvasを利用してテキストからsvgを生成する ◦ text2pngというライブラリのフォーク ◦ 類似のライブラリにtext-to-svgがあるが改行に対応してない のでtext-svgを利用
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 fontファイルの読み込み
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 台紙が黒いので白文字
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と合成する文字だけの画像を生成 文字は中央寄せ
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 台紙の読み込み
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 合成!
Copyright © M&A Cloud All rights reserved. ここまでの流れ 台紙と文字を合成してファイル書き出し 出力サイズを決めて書き出し
Copyright © M&A Cloud All rights reserved. やったか?
Copyright © M&A Cloud All rights reserved. やってない
Copyright © M&A Cloud All rights reserved. なにがいけないのか なにがいけないのか •
svgで生成したタイトル画像が台紙のサイズを超えたのでsharpで エラー • タイトルはcontentfulから取得した文字列を使ってるので改行 コードがない ◦ 長いタイトルで大きい画像が生成されてしまう
Copyright © M&A Cloud All rights reserved. タイトルを改行しよう
Copyright © M&A Cloud All rights reserved. タイトルの改行 タイトルの改行 •
n文字間隔で「\n」(改行コード)を追加する • ただ追加しただけではいい感じにならない可能性がある
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. 禁則処理 禁則処理 •
禁則処理のようなものを行いたい • また、単語の途中で折り返さないようにしたい 禁則処理(きんそくしょり)とは、特に日本語の文書作成・組版におい て、「約物などが行頭・行末などにあってはならない」などとされる禁止 事項、または、それらを回避するために、字詰めや文の長さを調整したり すること。 “ ”
Copyright © M&A Cloud All rights reserved. tiny-segmenter tiny-segmenter •
軽量な分かち書きを行うライブラリ(形態素解析)
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. 禁則処理風に「、」や「。」 の前で改行しない
Copyright © M&A Cloud All rights reserved. image-size image-size •
画像サイズを取得するライブラリ ◦ 形態素解析の結果、長い固有名詞や英語ワードなどで一行が 長くなってしまった場合、台紙サイズを越える可能性がある ◦ サイズが大きかったら台紙以下になるようにリサイズしてか ら合成する
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. 完成!
Copyright © M&A Cloud All rights reserved.
Copyright © M&A Cloud All rights reserved. まとめ まとめ •
OGP画像を作りたかったらCDNサービスを使おう • 自前で頑張るなら形態素解析とか使えばいい感じになると思う • デプロイのたびに毎回生成するのめんどくさくない?件数が多かっ たらどうするの? ◦ 個人ブログ用に作ったので気にしない! ◦ 件数が多いならCDNサービスに任せよう!
Copyright © M&A Cloud All rights reserved. Thank you for
watching :)