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

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

ぷらす
November 21, 2020
Programming
2
810

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

ぷらす

November 21, 2020
Tweet

More Decks by ぷらす

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

Other Decks in Programming

See All in Programming
Whyから始めよう！スクラムチームが力強く前に進むための「なぜやるのか」を考える
psj59129
1
420
[API Platform Con] Domain Driven Design with API Platform 3
mtarld
0
2.6k
なるべくJavaScriptを書かないで
SymfonyのUIをリッチにする Symfony UX
ippey
1
340
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
1
190
Swift Concurrency Next Step
shiz
7
700
iOS15からのCommunication NotificationとSiri
matsuji
2
370
SwiftPMのプラグイン機能をiOSアプリ開発に活用する / Development App With SwiftPM Plugins
usamik26
0
770
Git 未経験者 が GitHub Actions で もがいた話 / 20220914 git beginner uses github actions
mackey0225
1
390
20分間で振り返るIn-App Purchaseの歴史
inokinn
3
660
Flutterアプリ開発にネイティブコードはどこまで求められるのか
akatsuki174
2
460
セキュリティスキャンツール cdk-nag を使ってみた
kinyok
0
180
watchOS におけるバックグラウンドタスクの限界
yamannnu
2
190

Featured

See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
48
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
642
53k
Become a Pro
speakerdeck
PRO
3
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
21
1.2k
A designer walks into a library…
pauljervisheath
197
16k
Designing for humans not robots
tammielis
243
24k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.4k
Building Your Own Lightsaber
phodgson
95
4.7k
Support Driven Design
roundedbygravity
87
8.7k

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 ϋϚΓͲ͜Ζ͚ͩ͸஫ҙ͠·͠ΐ͏