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
280
情報漏洩させないための設計
kubotak
6
2.1k
Svelteコンポーネントの依存関係に秩序を〜
kubotak
0
140
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
550
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
900
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
11k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
1.2k
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
800
Felteで作る簡単フォームバリデーション
kubotak
1
1.7k
Other Decks in Programming
See All in Programming
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
5つのアンチパターンから学ぶLT設計
narihara
1
170
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
VS Code Update for GitHub Copilot
74th
2
640
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.1k
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Site-Speed That Sticks
csswizardry
10
690
Code Reviewing Like a Champion
maltzj
524
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
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 :)