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

by Minoru Takeuchi

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

࢖͍ͬͯΔٕज़

Slide 4

Slide 4 text

࢖͍ͬͯΔٕज़ • React޲͚UIϥΠϒϥϦ • ίϯϙʔωϯτͷཻ౓͸ Tailwind + α ͘Β͍ʁ • ΧϥʔύϨοτ΍ϨεϙϯγϒͳͲͷ ελΠϧγεςϜ׬උ • WAI-ARIA४ڌ

Slide 5

Slide 5 text

࢖͍ͬͯΔٕज़ • Canvas ͷඳըΛߦ͏ JS ϥΠϒϥϦ • React, Vue, Angular޲͚ʹ ެࣜͷαϙʔτϥΠϒϥϦ͕ଘࡏ • ό΢ϯσΟϯάϘοΫε΍ ΞχϝʔγϣϯͳͲ෯޿͘Χόʔ

Slide 6

Slide 6 text

ʮ͏͡·Δ͘ΜΛͭ͘Ζ͏ʂʯ ͕Ͱ͖Δ·Ͱ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

఺਺Λܭࢉ͢Δ࢓૊Έ • ֤ύʔπ͸ Ͱ͓खຊͷҐஔʹͳΔΑ͏ʹ͍ͯ͠Δ • ഑ஔޙͷ֤ύʔπͷζϨΛܭࢉͯ͠Ҿ͘ (x, y) = (0,0) score = 100 − 1 5 n ∑ k=0 |x| + |y|

Slide 13

Slide 13 text

Twitter΢έ͢Δ OGPΛੜ੒ͭ͘Δ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ը૾Λੜ੒͢ΔFunctionΛͭ͘Δ • node-canvas Λ࢖ͬͯɺSVG΍จࣈΛඳը • ೔ຊޠϑΥϯτΛ༻ҙ͠ͳ͍ͱ͍͚ͳ͍ • ࠷ॳ͸ Next.js ͷ API Routes Λ࢖ͬͯ΍Ζ͏ͱͨ͠ • JS/TS Ҏ֎ͷϑΝΠϧ͕όϯυϧͰ͖ͳ͍ʂ • Base64Ͱಡ·ͤͯ /tmp/ ʹॻ͖ࠐΉͷ΋ແཧ

Slide 16

Slide 16 text

ը૾Λੜ੒͢Δ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

Slide 17

Slide 17 text

͜ΕͰ΋·ͩ

Slide 18

Slide 18 text

ґଘύοέʔδΛೖΕΔ • 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

Slide 19

Slide 19 text

Thank you! ͦͯ͠…͏͡·Δ͘Μ஀ੜ೔͓ΊͰͱ͏ ɹhttps://uzimaru-maker.now.sh