Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
ぷらす
November 21, 2020
Programming
2
740
vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image
ぷらす
November 21, 2020
Tweet
Share
More Decks by ぷらす
See All by ぷらす
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
p1ass
19
7.7k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
p1ass
1
12k
うじまる君の生活習慣の乱れを可視化したい! / uzimaru birthday LT
p1ass
2
14k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
p1ass
1
6.8k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
0
37
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
1.2k
Micro Frontends × gRPC-Web の挑戦 / The challenge of micro frontends and gRPC-Web
p1ass
0
54
LINEの就業型インターンに参加した話
p1ass
0
7.4k
Other Decks in Programming
See All in Programming
TDX22: User-Mode DB Ops
ca_peterson
3
1.1k
코드 품질 1% 올리기
pluu
1
950
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.6k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.6k
How useEvent would change our applications
koba04
1
1.5k
Get Ready for Jakarta EE 10
ivargrimstad
0
2.1k
Monadic Java
mariofusco
4
260
The future of trust stores in Python
sethmlarson
0
180
【PHPerKaigi2022】Mongo に溜まった約1.6億件の記事データを BigQuery へ …
userkazun
0
110
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
posquit0
1
310
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
minodriven
3
1.1k
Reinventing the wheel ... as a service
mariofusco
3
240
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Teambox: Starting and Learning
jrom
121
7.6k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
Making Projects Easy
brettharned
98
4.3k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
We Have a Design System, Now What?
morganepeng
35
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Music & Morning Musume
bryan
35
4.1k
Transcript
WFSDFMPHJNBHFΛͬͨ ϒϩά0(1ͷ؆୯ࣗಈੜ -5 /BPLJ,JTIJ !QBTT
͡Ίʹ ࠓ͋Γ͕ͱ͏͍͟͝·͢
IUUQTCMPHQBTTDPN Β͢ͷϒϩά
Β͢ͷϒϩά ٕज़ωλͦͷଞॾʑΛॻࣗ͘࡞ϒϩά l (JU)VCQBTTCMPH l ੩తαΠτδΣωϨʔλ)VHP l σβΠϯطଘͷͷʹେྔͷύονΛͯͯΔ l ϗεςΟϯά7FSDFM
l 5XJUUFSͯϒ্Ͱදࣔ l ΠϯϓϨογϣϯͷӨڹେ l ࢹೝੑͷ֦େ l ΫϦοΫྖҬͷ֦େ ը૾Λݸผʹ༻ҙ͍ͨ͠ʂ ϒϩάͷ0(1
ࠓ·Ͱͷ0(1ӡ༻ l هࣄΛॻͨ͘ͼʹ(*.1Ͱը૾Λ࡞ l ςϯϓϨʔτϦϙδτϦʹஔ͍ͱ͍ͨ l ͦͷը૾ΛࣗͰDPNNJU ͦΕͰྑ͍ͬͪΌྑ͍͕໘
Ͳ͏ʹ͔ͯ͠0(1Λࣗಈੜ͍ͨ͠ʂ l όοΫΤϯυͷهࣄͰը૾Λ͏͜ͱك l جຊλΠτϧͷΈͷ0(1Λ࡞ ࣗ͠ಈͰੜͰ͖ΔͷͰʁ
طଘͷੜख๏ ࠨIUUQTTQFBLFSEFDLDPNTDILUKNGJSFCBTFEFPTIPVRJOHPHQTIFOHDIFOH ӈIUUQTTQFBLFSEFDLDPNEPSB ੜ-5ͷఆ൪ωλ
طଘͷੜख๏ l 'JSFCBTF $MPVE'VODUJPOT l ͓खܰ CZͨ͡· l /FYUKT 443
7FSDFM l +49Λ͔͚ΔͷͰෳࡶͳ͜ͱΛ͢Δͷʹྑͦ͞͏ l 0(1͚ͩͷͨΊͩͱΦʔόʔΤϯδχΞϦϯά͔ʁ
ୈࡾͷબࢶ WFSDFMPHJNBHF https://github.com/vercel/og-image
WFSDFMPHJNBHFͷಛ l 63*ɾΫΤϦύϥϝʔλΛม͑Δ͜ͱͰੜը૾ΛมԽ l ϒϩάͷλΠτϧΛૹΕ0, l WFSDFMͰ؆୯σϓϩΠʂ l $*ͰσϓϩΠࣗಈԽΛؤுΜͳͯ͘0, l
$%/ʹΩϟογϡͯ͘͠ΕΔͷͰຖճը૾͕ੜ͞Εͣߴ ࠓճͷ༻్ʹྑͦ͞͏
WFSDFMPHJNBHFͷσϓϩΠ جຊ3&"%.&௨ΓʹΕ0, WFSDFMPHJNBHFΛϑΥʔΫ WFSDFMKTPOΛฤू )5.-$44Λ͍ͬͯ͡σβΠϯΛมߋ WFSDFMʹσϓϩΠ
࣮ࡍͷྫ IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩγ͢ΔQOH
ؾΛ͚ͭΔϙΠϯτ l WFSDFMʹຊޠϑΥϯτ͕ͳ͍ l ͲΒ܅ݴͬͯͨɻ8FCϑΥϯτ͔ຒΊࠐΈͰରԠ l ࠷ॳۭനͷ0(1Λੜͯ͠͠·ͬͨ
ؾΛ͚ͭΔϙΠϯτ l σϑΥϧτͷ$BDIF$POUSPM͕ l ۭനͷ0(1͕5XJUUFSʹΩϟογϡ͞Εɺ5XJUUFS7BMJEBUPSΛͬͯ 0(1͕ߋ৽͞Εͳ͍ l 63-ʹόʔδϣϯQSFGJYΛ༩ͯ͠ରԠ l IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩ
γ͢ΔQOH
ਓʹΑͬͯؾʹͳΔϙΠϯτ l ੜը૾ͷϚʔΫΞοϓ͕+49Ͱͳ͘ී௨ͷ)5.- l ࠓճఔͷͷͰ͋Εͳ͔͕ͬͨɺ ෳࡶͳͷΛΖ͏ͱ͢Δͱ +49Λॻ͖ͨ͘ͳ͖ͬͯͦ͏ l ReactDOMServer.renderToStaticMarkup(element)で )5.-จࣈྻΛੜͯ͠͠·͑؆୯ʹग़དྷͦ͏
https://zenn.dev/otsukayuhi/articles/e52651b4e2c5ae7c4a17 export function getHtml(parsedReq: ParsedRequest) { const { text, theme, md, fontSize } = parsedReq; return `<!DOCTYPE html> <html> <meta charset="utf-8"> <title>Generated Image</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> ${getCss(theme, fontSize)} </style> <body> <div> <div class="spacer"> <div class="heading">${emojify( md ? marked(text) : sanitizeHtml(text) )} </div> </div> </body> </html>`; }
ଞͷਓ͕࡞ͬͨWFSDFMPHJNBHFΛͬͨͭ (JU)VC4PDJBMJGZ(JU)VC༻ͷ0(1Λ࡞ͬͯ͘ΕΔ܅ https://socialify.git.ci/
·ͱΊ l WFSDFMPHJNBHFΛͬͯϒϩάͷ0(1Λࣗಈੜ l WFSDFMʹ؆୯σϓϩΠͰ͖ΔͷͰݸਓͩͱ͔ͳΓ༗༻ l ϋϚΓͲ͜Ζ͚ͩҙ͠·͠ΐ͏