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

うじまるくんをつくろう! / うじまる生誕LT会 (2020/6/1)

うじまるくんをつくろう! / うじまる生誕LT会 (2020/6/1)

遊んだらぜひツイートしてみてください(OGP頑張ったので
https://uzimaru-maker.now.sh/

GitHub: https://github.com/dora1998/uzimaru-maker

0063efb4c7066273b877fdabcdcd15b3?s=128

Minoru Takeuchi

June 01, 2020
Tweet

More Decks by Minoru Takeuchi

Other Decks in Programming

Transcript

  1. ͏͡·Δ͘ΜΛͭ͘Ζ͏ʂ ͏͡·Δੜ஀LTձ (2020/6/1) ͲΒ d0ra1998 dora1998

  2. ͨ͘͞Μ༡ΜͰ͘Εͯ͋Γ͕ͱ͏ʂ

  3. ࢖͍ͬͯΔٕज़

  4. ࢖͍ͬͯΔٕज़ • React޲͚UIϥΠϒϥϦ • ίϯϙʔωϯτͷཻ౓͸ Tailwind + α ͘Β͍ʁ •

    ΧϥʔύϨοτ΍ϨεϙϯγϒͳͲͷ ελΠϧγεςϜ׬උ • WAI-ARIA४ڌ
  5. ࢖͍ͬͯΔٕज़ • Canvas ͷඳըΛߦ͏ JS ϥΠϒϥϦ • React, Vue, Angular޲͚ʹ

    ެࣜͷαϙʔτϥΠϒϥϦ͕ଘࡏ • ό΢ϯσΟϯάϘοΫε΍ ΞχϝʔγϣϯͳͲ෯޿͘Χόʔ
  6. ʮ͏͡·Δ͘ΜΛͭ͘Ζ͏ʂʯ ͕Ͱ͖Δ·Ͱ

  7. ಥ೗౤Լ͞ΕͨΞΠίϯૉࡐ 47(͕͋Δͧʂʂʂ

  8. None
  9. None
  10. ౔୆ͱύʔπΛKonvaͰॏͶΔ

  11. ౔୆ͱύʔπΛKonvaͰॏͶΔ

  12. ఺਺Λܭࢉ͢Δ࢓૊Έ • ֤ύʔπ͸ Ͱ͓खຊͷҐஔʹͳΔΑ͏ʹ͍ͯ͠Δ • ഑ஔޙͷ֤ύʔπͷζϨΛܭࢉͯ͠Ҿ͘ (x, y) = (0,0)

    score = 100 − 1 5 n ∑ k=0 |x| + |y|
  13. Twitter΢έ͢Δ OGPΛੜ੒ͭ͘Δ

  14. γΣΞϖʔδ͸Next.jsͰSSR • useRouter()Λ࢖͏ͱɺ SSR࣌ʹqueryΛجʹͯ͠ ඳըͰ͖ͳ͍ • getServerSidePropsͰ औΓग़ͯ͠propsͰ౉͢ • ΫϩʔϥҎ֎͸

    / ʹඈ͹͢
  15. ը૾Λੜ੒͢ΔFunctionΛͭ͘Δ • node-canvas Λ࢖ͬͯɺSVG΍จࣈΛඳը • ೔ຊޠϑΥϯτΛ༻ҙ͠ͳ͍ͱ͍͚ͳ͍ • ࠷ॳ͸ Next.js ͷ

    API Routes Λ࢖ͬͯ΍Ζ͏ͱͨ͠ • JS/TS Ҏ֎ͷϑΝΠϧ͕όϯυϧͰ͖ͳ͍ʂ • Base64Ͱಡ·ͤͯ /tmp/ ʹॻ͖ࠐΉͷ΋ແཧ
  16. ը૾Λੜ੒͢ΔFunctionΛͭ͘Δ • ҰͭͷVercelϓϩδΣΫτ಺Ͱɺ2छྨͷσϓϩΠΛࠞͥΔ • Next.js • ී௨ͷNode.jsΞϓϦ cf) VercelʢݩZeitͷNowʣʹͯNext.jsͰnode-canvasΛ࢖ͬͯOGP -

    Crieit https://crieit.net/posts/Vercel-Zeit-Now-Next-js-node-canvas-OGP
  17. ͜ΕͰ΋·ͩ

  18. ґଘύοέʔδΛೖΕΔ • node-canvas ʹ͸ɺnpm֎ͷґଘϥΠϒϥϦ͕͋Δ • package.json ʹ now-build Λఆٛͯ͠ɺͦ͜Ͱ yum

    ͢Δ cf) ercel NowʢچZEIT Nowʣ্Ͱnode-canvasΛಈ͔͢ - Blanktar https://blanktar.jp/blog/2020/05/node-canvas-on-vercel-now
  19. Thank you! ͦͯ͠…͏͡·Δ͘Μ஀ੜ೔͓ΊͰͱ͏ ɹhttps://uzimaru-maker.now.sh