Upgrade to Pro — share decks privately, control downloads, hide ads and more …

vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image

7f68f5f85f4a39df7d8d3c81cbbfb788?s=47 ぷらす
November 21, 2020
Programming
2
740

vercel/og-imageを使ったブログOGPの簡単自動生成 / Generate OGP easily using vercel og-image

7f68f5f85f4a39df7d8d3c81cbbfb788?s=128

ぷらす

November 21, 2020
Tweet

More Decks by ぷらす

See All by ぷらす
趣味プロジェクトをリードする技術 / Technology to lead hobby projects
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
19
7.7k
Webアプリケーションにおける並行処理の難しさ / #Gocon_Sendai
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
4
2k
RSSフィードをもっと便利に / Make RSS feeds more convenient #camphor_lt
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
12k
うじまる君の生活習慣の乱れを可視化したい！ / uzimaru birthday LT
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
2
14k
複数サービスを運用しやすい理想のコンテナ環境をVPS上に構築する #camphor_day / Building ideal container environment on VPS
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
6.8k
Kubernetesのイメージタグの更新を楽にするツールを作った / p1ass/mikku - make updating Kubernetes image tags easier
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
37
ドメインロジックと 永続化処理を分離する設計改善 を行って得られた知見 / Design improvements that separate domain logic and persistence function
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
1.2k
Micro Frontends × gRPC-Web の挑戦 / The challenge of micro frontends and gRPC-Web
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
54
LINEの就業型インターンに参加した話
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
7.4k

Other Decks in Programming

See All in Programming
TDX22: User-Mode DB Ops
3cf3d4d85fad3d196c1127018a370418?s=48 ca_peterson
3
1.1k
코드 품질 1% 올리기
354271902cd8ba2762d05b251dfa0f84?s=48 pluu
1
950
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
1644fba8a219c89987390ef4f23d06bf?s=48 ahomu
3
1.6k
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
4631864606a93224804a49331d1a7dfd?s=48 fufuhu
3
1.6k
How useEvent would change our applications
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.5k
Get Ready for Jakarta EE 10
B489790e1a844284d7cd1fa2cd6e021f?s=48 ivargrimstad
0
2.1k
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
260
The future of trust stores in Python
6638acfdb9c5979d11b4312984292c55?s=48 sethmlarson
0
180
【PHPerKaigi2022】Mongo に溜まった約1.6億件の記事データを BigQuery へ …
C9206c01d92fe6141158122f2c6e95fa?s=48 userkazun
0
110
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
330c5e37fb238d6b319ae6e18770f44b?s=48 posquit0
1
310
書籍『良いコード/悪いコードで学ぶ設計入門』でエンジニアリングの当たり前を変える
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
3
1.1k
Reinventing the wheel ... as a service
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
3
240

Featured

See All Featured
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
The Brand Is Dead. Long Live the Brand.
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
45
2.7k
Teambox: Starting and Learning
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
121
7.6k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.5k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Music & Morning Musume
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
4.1k

Transcript

  1. WFSDFMPHJNBHFΛ࢖ͬͨ ϒϩά0(1ͷ؆୯ࣗಈੜ੒ -5 /BPLJ,JTIJ !QBTT 

  2. ͸͡Ίʹ ࠓ೔͸͋Γ͕ͱ͏͍͟͝·͢ 

  3. IUUQTCMPHQBTTDPN ΀Β͢ͷϒϩά 

  4. ΀Β͢ͷϒϩά ٕज़ωλ΍ͦͷଞॾʑΛॻࣗ͘࡞ϒϩά l (JU)VCQBTTCMPH l ੩తαΠτδΣωϨʔλ)VHP l σβΠϯ͸طଘͷ΋ͷʹେྔͷύονΛ౰ͯͯΔ l ϗεςΟϯά7FSDFM

    

  5. l 5XJUUFS΍͸ͯϒ্Ͱදࣔ l ΠϯϓϨογϣϯ΁ͷӨڹେ l ࢹೝੑͷ֦େ l ΫϦοΫྖҬͷ֦େ ը૾Λݸผʹ༻ҙ͍ͨ͠ʂ ϒϩάͷ0(1

    

  6. ࠓ·Ͱͷ0(1ӡ༻ l هࣄΛॻͨ͘ͼʹ(*.1Ͱը૾Λ࡞੒ l ςϯϓϨʔτ΋ϦϙδτϦʹஔ͍ͱ͍ͨ l ͦͷը૾Λࣗ෼ͰDPNNJU ͦΕͰ΋ྑ͍ͬͪΌྑ͍͕໘౗ 

  7. Ͳ͏ʹ͔ͯ͠0(1Λࣗಈੜ੒͍ͨ͠ʂ l όοΫΤϯυͷهࣄͰը૾Λ࢖͏͜ͱ͸ك l جຊ͸λΠτϧͷΈͷ0(1Λ࡞੒  ΋͠΍ࣗಈͰੜ੒Ͱ͖ΔͷͰ͸ʁ

  8. طଘͷੜ੒ख๏  ࠨIUUQTTQFBLFSEFDLDPNTDILUKNGJSFCBTFEFPTIPVRJOHPHQTIFOHDIFOH ӈIUUQTTQFBLFSEFDLDPNEPSB ੜ஀-5ͷఆ൪ωλ

  9. طଘͷੜ੒ख๏ l 'JSFCBTF $MPVE'VODUJPOT l ͓खܰ CZͨ͡· l /FYUKT 443

     7FSDFM l +49Λ͔͚ΔͷͰෳࡶͳ͜ͱΛ͢Δͷʹ͸ྑͦ͞͏ l 0(1͚ͩͷͨΊͩͱΦʔόʔΤϯδχΞϦϯά͔ʁ 

  10. ୈࡾͷબ୒ࢶ WFSDFMPHJNBHF  https://github.com/vercel/og-image

  11. WFSDFMPHJNBHFͷಛ௃ l 63*ɾΫΤϦύϥϝʔλΛม͑Δ͜ͱͰੜ੒ը૾ΛมԽ l ϒϩάͷλΠτϧΛૹΕ͹0, l WFSDFMͰ؆୯σϓϩΠʂ l $*ͰσϓϩΠࣗಈԽΛؤுΜͳͯ͘΋0, l

    $%/ʹΩϟογϡͯ͘͠ΕΔͷͰຖճը૾͕ੜ੒͞Εͣߴ଎ ࠓճͷ༻్ʹྑͦ͞͏ 

  12. WFSDFMPHJNBHFͷσϓϩΠ جຊ͸3&"%.&௨Γʹ΍Ε͹0,  WFSDFMPHJNBHFΛϑΥʔΫ  WFSDFMKTPOΛฤू  )5.-$44Λ͍ͬͯ͡σβΠϯΛมߋ  WFSDFMʹσϓϩΠ

    

  13. ࣮ࡍͷྫ IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩγ͢ΔQOH 

  14. ؾΛ͚ͭΔϙΠϯτ l WFSDFMʹ೔ຊޠϑΥϯτ͕ͳ͍ l ͲΒ܅΋ݴͬͯͨɻ8FCϑΥϯτ͔ຒΊࠐΈͰରԠ l ࠷ॳۭനͷ0(1Λੜ੒ͯ͠͠·ͬͨ 

  15. ؾΛ͚ͭΔϙΠϯτ l σϑΥϧτͷ$BDIF$POUSPM͕೥ l ۭനͷ0(1͕5XJUUFSʹΩϟογϡ͞Εɺ5XJUUFS7BMJEBUPSΛ࢖ͬͯ΋ 0(1͕ߋ৽͞Εͳ͍ l 63-ʹόʔδϣϯQSFGJYΛ෇༩ͯ͠ରԠ l IUUQTPHJNBHFQBTTDPNBQJW$BEEZͰH31$ͷϦΫΤετΛϦόʔεϓϩΩ

    γ͢ΔQOH 

  16. ਓʹΑͬͯ͸ؾʹͳΔϙΠϯτ 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>`; }

  17. ଞͷਓ͕࡞ͬͨWFSDFMPHJNBHFΛ࢖ͬͨ΍ͭ (JU)VC4PDJBMJGZ(JU)VC༻ͷ0(1Λ࡞ͬͯ͘ΕΔ܅  https://socialify.git.ci/

  18. ·ͱΊ l WFSDFMPHJNBHFΛ࢖ͬͯϒϩάͷ0(1Λࣗಈੜ੒ l WFSDFMʹ؆୯σϓϩΠͰ͖ΔͷͰݸਓͩͱ͔ͳΓ༗༻ l ϋϚΓͲ͜Ζ͚ͩ͸஫ҙ͠·͠ΐ͏