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
590

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
18
7.2k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
4
1.9k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
11k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
2
14k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
6.2k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
36
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
1
1k
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
47
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
6.8k

Other Decks in Programming

See All in Programming
Ba655e3712aaabfbca289fe136f85fe4?s=48 qnighy
0
140
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
2
4.1k
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
130
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
1
250
119659c28d16f22d01eb48a6f3ee1391?s=48 iwatatomoya
0
3.6k
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
2
340
3cb4e761dbdb7aebd1ffd85f752e1e3e?s=48 sonatard
0
490
7166bc2cbc462ab5fd1987a76d0fe709?s=48 takahirom
1
210
Aa254f26f91d4776b9cd19a7ce632867?s=48 ciniml
2
140
Dc8d7b0277a1646d6842105241e8bef5?s=48 peacock0803sz
0
330
F21d69109b1c03921abf7d12f0fb6654?s=48 dscs
0
160
30e63a1ad21d3944b288fc3d33d1e920?s=48 amrrs
0
160

Featured

See All Featured
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
5k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
39
1.8k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.8k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
25
1.2k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.2k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
57
9.6k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
594
210k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
123
8.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 ϋϚΓͲ͜Ζ͚ͩ͸஫ҙ͠·͠ΐ͏