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