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
1.8k
SSGなサイトでOGP画像を動的生成したい
Shizuoka.js#6 LT
kubotak
December 19, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
DMARCレポート可視化ツールを SvelteKitで作った話
kubotak
2
290
Superforms本番投入で分かった良さとハマりどころ
kubotak
0
260
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
kubotak
31
9.4k
(うまくいった||いかなかった) 技術選定は何を考えていたか
kubotak
1
810
ウォーターフォールに思えたプロジェクトにあったアジャイルの要素
kubotak
2
570
Felteで作る簡単フォームバリデーション
kubotak
1
970
SvelteKitを本番投入してみて
kubotak
2
1.6k
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
3.1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
320
Other Decks in Programming
See All in Programming
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
110
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
Try creating your own orderedmap
kazamori
1
280
FoodGram
iseruuuuu
0
230
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
150
RaaP
ksss
0
130
Criando a Woovi em uma semana
daniloab
0
120
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
600
Implementing Design Systems in Swift
seyfoyun
2
520
PHPはいつから死んでいるかの調査
chiroruxx
2
440
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.8k
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
15k
Featured
See All Featured
Navigating Team Friction
lara
179
13k
Statistics for Hackers
jakevdp
790
220k
Bash Introduction
62gerente
605
210k
Six Lessons from altMBA
skipperchong
22
3k
It's Worth the Effort
3n
180
27k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
The Invisible Customer
myddelton
114
12k
Typedesign – Prime Four
hannesfritz
36
2.1k
Embracing the Ebb and Flow
colly
80
4.2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
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 :)