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
880
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
20
8.1k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
p1ass
4
2.2k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
p1ass
1
13k
うじまる君の生活習慣の乱れを可視化したい! / uzimaru birthday LT
p1ass
2
15k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
p1ass
1
7.3k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
p1ass
1
43
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
p1ass
1
1.4k
Micro Frontends × gRPC-Web の挑戦 / The challenge of micro frontends and gRPC-Web
p1ass
0
79
LINEの就業型インターンに参加した話
p1ass
0
8k
Other Decks in Programming
See All in Programming
Git Rebase
bkuhlmann
10
1.2k
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
110
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
420
Cloudflare Workersと状態管理
chimame
3
500
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
260
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.9k
良質な技術記事を量産する秘訣 / #MeetsPro
jnchito
16
4.8k
Circuit⚡
monaapk
0
200
子育てとEMと転職と
_atsushisakai
1
430
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
620
Gradle build: The time is now
nonews
1
500
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
326
55k
Atom: Resistance is Futile
akmur
256
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Making Projects Easy
brettharned
102
4.8k
Bootstrapping a Software Product
garrettdimon
299
110k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Six Lessons from altMBA
skipperchong
15
2.3k
Building Your Own Lightsaber
phodgson
96
4.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
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 ϋϚΓͲ͜Ζ͚ͩҙ͠·͠ΐ͏