Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SSGなサイトでOGP画像を動的生成したい
kubotak
December 19, 2020
Programming
1
1.4k
SSGなサイトでOGP画像を動的生成したい
Shizuoka.js#6 LT
kubotak
December 19, 2020
Tweet
Share
More Decks by kubotak
See All by kubotak
Felteで作る簡単フォームバリデーション
kubotak
1
150
SvelteKitを本番投入してみて
kubotak
0
550
PlaywrightによるSvelteコンポーネントテスト
kubotak
0
1.1k
AWS CDKでまるっと インフラ環境をIaCしたぞ!
kubotak
0
80
FeatureToggle戦略と運用方法
kubotak
3
790
SvelteKitでストアのハイドレーションを考えてみた
kubotak
2
100
PHPコードを消すライブラリを作った
kubotak
0
1.1k
なぜLaravel9はLTSではないのか
kubotak
0
940
Nuxt v2からv3へのマイグレーション
kubotak
0
530
Other Decks in Programming
See All in Programming
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
100
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
230
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
AWSにおける標的型Bot対策
hacomono
0
430
An Advanced Introduction to R
nicetak
0
1.8k
Hasura の Relationship と権限管理
karszawa
0
180
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
610
TokyoR#103_DataProcessing
kilometer
0
540
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
570
Cloudflare Workersと状態管理
chimame
3
490
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
320
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
420
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
299
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Design by the Numbers
sachag
271
18k
Embracing the Ebb and Flow
colly
75
3.6k
Building Applications with DynamoDB
mza
85
5k
Designing for Performance
lara
600
65k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Clear Off the Table
cherdarchuk
79
290k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
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 :)