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

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

ぷらす

November 21, 2020
Tweet

More Decks by ぷらす

Other Decks in Programming

Transcript

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


    View full-size slide

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

    View full-size slide

  3. IUUQTCMPHQBTTDPN
    ΀Β͢ͷϒϩά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ΋͠΍ࣗಈͰੜ੒Ͱ͖ΔͷͰ͸ʁ

    View full-size slide

  8. طଘͷੜ੒ख๏

    ࠨIUUQTTQFBLFSEFDLDPNTDILUKNGJSFCBTFEFPTIPVRJOHPHQTIFOHDIFOH
    ӈIUUQTTQFBLFSEFDLDPNEPSB
    ੜ஀-5ͷఆ൪ωλ

    View full-size slide

  9. طଘͷੜ੒ख๏
    l 'JSFCBTF$MPVE'VODUJPOT
    l ͓खܰ CZͨ͡·
    l /FYUKT 443
    7FSDFM
    l +49Λ͔͚ΔͷͰෳࡶͳ͜ͱΛ͢Δͷʹ͸ྑͦ͞͏
    l 0(1͚ͩͷͨΊͩͱΦʔόʔΤϯδχΞϦϯά͔ʁ

    View full-size slide

  10. ୈࡾͷબ୒ࢶ WFSDFMPHJNBHF

    https://github.com/vercel/og-image

    View full-size slide

  11. WFSDFMPHJNBHFͷಛ௃
    l 63*ɾΫΤϦύϥϝʔλΛม͑Δ͜ͱͰੜ੒ը૾ΛมԽ
    l ϒϩάͷλΠτϧΛૹΕ͹0,
    l WFSDFMͰ؆୯σϓϩΠʂ
    l $*ͰσϓϩΠࣗಈԽΛؤுΜͳͯ͘΋0,
    l $%/ʹΩϟογϡͯ͘͠ΕΔͷͰຖճը૾͕ੜ੒͞Εͣߴ଎
    ࠓճͷ༻్ʹྑͦ͞͏

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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 `


    Generated Image

    <br/>${getCss(theme, fontSize)}<br/>



    ${emojify(
    md ? marked(text) : sanitizeHtml(text)
    )}



    `;
    }

    View full-size slide

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

    https://socialify.git.ci/

    View full-size slide

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

    View full-size slide