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

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

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

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(͕͋Δͧʂʂʂ
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