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
1
470

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

7f68f5f85f4a39df7d8d3c81cbbfb788?s=128

ぷらす

November 21, 2020
Tweet

More Decks by ぷらす

See All by ぷらす
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
17
6.7k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
4
1.8k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
8.8k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
2
13k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
5.8k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
35
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
880
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
39
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
6.3k

Other Decks in Programming

See All in Programming
A45681c58220b58ca83a926b1be52e65?s=48 moriatsushi
2
2.5k
2e7087b86608d4497c209eb9ba14d8f5?s=48 rosylilly
6
5.6k
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
2
190
218473ff7abad0fcd72865da2b23bb5b?s=48 memory1994
6
730
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
460
Bfc42a2fb137897db919bac632c83085?s=48 teruhisafukumoto
1
340
1fab9d01b25e99522f3dfd01e3d4cb51?s=48 soutaro
3
590
23190387d424e33d6a1a807cea1e0469?s=48 osamtimizer
0
250
A0abebaaa72697006085b05fabefa1f6?s=48 ura0ka
0
160
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
6
610
2e8ff55bf441ac3101a36812010216c2?s=48 medup
0
240
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
1
260

Featured

See All Featured
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
255
17k
78b475797a14c84799063c7cd073962f?s=48 holman
290
130k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
5.2k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
33
1.3k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
274
17k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
238
23k

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