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

7f68f5f85f4a39df7d8d3c81cbbfb788?s=47 ぷらす
November 21, 2020
Programming
0
120

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
4
780
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
1.8k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
2
12k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
4k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
32
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
660
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
24
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
5k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
170

Other Decks in Programming

See All in Programming
B1f68959f14f39a7cba2bc9fd4b926e9?s=48 ruyadorno
2
340
3499a1d71fa70b8ee44816ca9e7329fe?s=48 bells17
1
150
3b38214ae9927683d69680cb6161852b?s=48 jorgecastilloprz
0
1.7k
4cd9f68f08d2200de34043e4ce049d03?s=48 yagieng
4
430
75cf8176bf14811428f77d8fe737f0d5?s=48 konstantin_diener
0
190
2f38ad91642226a08c0e1b926ba17f7c?s=48 furuhama
1
120
D6fcc16462fbe93673342da3ff5d8121?s=48 xhochy
0
110
C0e29dade6ec33081689ac135a269b45?s=48 crgarridos
0
150
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
0
200
67962a042668ffac9323b8e0c55eee6e?s=48 keisuke69
6
3.1k
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
180
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
9
1.3k

Featured

See All Featured
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
370k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
110k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.3k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
268
16k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
7
430
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
6
590
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
113
25k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.3k

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