CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏

https://speakerdeck.com/lanberb/cyberagent-developer-conference-cadc-2023-lpkai-fa-nowu-tai-li と同じ資料です。

サイバーエージェントの技術カンファレンス「CyberAgent Developers Conference 2023」（以下、CADC2023）のLPについて、Webにおける3DCGや、リアルタイムな機能の裏側について開発者2人がお話します。 前半は佐々木から、TailwindCSSとSpindleを合わせて構築したデザインシステムについて、後半は平井から、MomentoというServerlessなサービスを用いたチャット機能についてお話します。 最後に、2人が取り組んだ3DCGの実装について、それぞれからお話します。

イベントURL：https://cyberagent.connpass.com/event/294610/

Transcript

2. ࠤʑ໦ ঘʛNao Sasaki גࣜձࣾαΠόʔΤʔδΣϯτ FANTECHຊ෦ CLࣄۀ෦ ϑϩϯτΤϯυΤϯδχΞ CADC 2023 LP։ൃνʔϜϦʔμʔ @lanberb @lanberb_
3. CyberAgent Developer Conference 2023ʹ͍ͭͯ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ 3DCG in LP 01 02 03 04 CONTENTS 05 ·ͱΊ
4. 01 CyberAgent Developer Conference 2023ʹ͍ͭͯ
5. CyberAgent Developer Conference 2023ʹ͍ͭͯ Πϕϯτͷ֓ཁ 01 ɾ2023 06/28 - 06/29ͷ2೔ؒ։࠵
 ɹΦϯϥΠϯܗࣜɹYouTubeͰ഑৴ ɾDAY 1 - NEXT DAY
 ɹ࣍ੈ୅Λ୲͏एखʹΑΔ2 ~ 30෼ͷ࿥ըηογϣϯ ɾDAY 2 - EXPERT DAY
 ɹ֤෼໺ͷϕςϥϯࣾһʹΑΔ໿1࣌ؒͷϥΠϒηογϣϯ
6. CyberAgent Developer Conference 2023ʹ͍ͭͯ 01 Έͳ͞ΜɺLP͸ݟ͍͚ͯͨͩ·͔ͨ͠ʁ
7. CyberAgent Developer Conference 2023ʹ͍ͭͯ LPͷ࢖༻ٕज़ ɾج൫ɿNext.js
 ɹLPɾ؅ཧ໘ڞʹNext.jsͷSGͰӡ༻ ɾUIɿThree.js, TailwindCSS, daisyUI
 ɹLP໘͸Three.js, TailwindCSSɹAdmin໘͸daisyUIͰ࣮૷ ɾΠϯϑϥɿS3, CloudFront, Momento
 ɹSGͷ੒Ռ෺ΛS3, CFͰ഑৴ɹϥΠϒνϟοτػೳ͸ Momento Λར༻ 02
8. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
9. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ ࠓ೥౓ͷ։ൃମ੍ ɾϝϯόʔ
 ɹࣾһΤϯδχΞ2໊ + 24ଔ಺ఆऀόΠτ2໊ ɾεέδϡʔϧ
 ɹ։ൃظؒ: 1ϲ݄ ɾཁ݅ ɹNEXTͱEXPERTͦΕͧΕͷϒϥϯυԋग़ɺӡ༻νʔϜʹΑΔLP಺ϦϯΫͷࠩ͠ସ͑ ɹ഑৴தͷϦΞϧλΠϜνϟοτػೳɺΤϯυϩʔϧɺϦΞϧλΠϜͷLIVEදࣔɺ౳ʑ… 02
10. ɾ࠾༻ཧ༝
 ɹɾΫϥε໊Λߟ͑Δ࣌ؒΛແବʹ͠ͳ͍ ɹɾCSSΛංେԽͤ͞ͳ͍ ɹɾίʔυͷมߋ͕ΑΓ҆શʹͳΔ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ Tailwindͱ͸ 02
11. ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ ɾ࠾༻ཧ༝
 ɹɾ಺੡͔ͩΒαϙʔτ͕खް͍ ɹɾؔ਺తͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ Spindleͱ͸ 02
12. ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ ɾ࠾༻ཧ༝
 ɹɾ಺੡͔ͩΒαϙʔτ͕खް͍ ɹɾؔ਺తͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ Spindleͱ͸ 02
13. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 Semantic Token ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ Primitive Token จ຺Λ࣋ͨͳ͍τʔΫϯ Color Line-Height Font-Family Font-Size Design Token Primitive Token
14. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
15. σβΠϯ੒Ռ෺ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 CSS Token ࣮૷ଆͷ౎߹Ͱ ࣗ༝ʹ࡞ΕΔτʔΫϯ color-white font-xs font-avenir leading-20 bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Semantic Token FigmaͰ࢖ΘΕΔ ༻్ɾจ຺Λ࣋ͬͨτʔΫϯ color font font line-height background จ຺ͷཧղʹ Ϧιʔε͕ඞཁ
16. σβΠϯ੒Ռ෺ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 Tailwind ηϚϯςΟοΫʹ ໋໊͞ΕͨτʔΫϯ܈ color-white font-xs font-avenir leading-20 bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Spindle Design Token ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ Primitive Token จ຺Λ࣋ͨͳ͍τʔΫϯ Color Font-Size ɾ ɾ ɾ จ຺ʹμΠϨΫτʹ ΞΫηεͰ͖Δ
17. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ Tailwind͸໋໊ͷۤ͠Έ͔Β͋ͳͨΛղ์͠ͳ͍ Tailwind × SpindleͰ͸ ໋໊͕͍ۤ͠ͱ͔ߟ͑ͳ͍͍ͯ͘ ʁ
18. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ ಋೖͨ݁͠Ռ ɾτʔΫϯΛ࢖ͬͨελΠϦϯάͷ ɹϨϏϡʔ&मਖ਼͕΄΅0ʹɻ ɾυϝΠϯ஌ࣝΛ΋ͨͳ͍಺ఆऀͷ ɹҭ੒ίετΛ࡟ݮ ɾ໋໊͕Ұ෦৑௕ʹͳͬͨ ɹTailwind༝དྷͷprefix(border, textͳͲ)͕Spindleͷ໋໊ɹ ͱϒοΩ ϯάͨ͠ 02
19. 03 MomentoʹΑΔ
20. גࣜձࣾαΠόʔΤʔδΣϯτ άϧʔϓITਪਐຊ෦ CIU ϑϩϯτΤϯυΤϯδχΞ CADC 2023 LP։ൃνʔϜ ςοΫϦʔυ ฏҪ ඔଠʛShuta Hirai @shuta13 @did0es
21. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ Momentoʹ͍ͭͯ ɾServerlessͳcaching, pub/subͳͲΛఏڙ͢ΔSaaS ɹ΄ͱΜͲઃఆෆཁ͔ͭαʔόʔϨεͳRedis ɹdocs : https://docs.momentohq.com 03
22. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ CADCʹ͓͚Δνϟοτػೳ 03
23. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ CADCʹ͓͚Δνϟοτػೳ ɾExpert DAYͷϥΠϒηογϣϯʹͯఏڙ ɾLP্Ͱ౤ߘՄೳͳಗ໊νϟοτ ɹLPͰࢹௌɾίϝϯτͷશ͕ͯऩ·ΔΑ͏ʹ ɹίϝϯτͷ৺ཧతͳϋʔυϧΛͳ͘͢ ɾ؅ཧը໘ͰͷϞσϨʔτ ɹӡӦ͔ΒͷΞφ΢ϯε΍ɺίϝϯτͷ؅ཧ͕Ͱ͖ΔΑ͏ʹ 03
24. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ϦΞϧλΠϜͳνϟοτͷ࣮ݱ ɾϢʔβʔͷ࡞੒
 ɹMomentoͷConsoleͰϢʔβʔΛ࡞੒͠ɺݖݶΛ෇༩ ɾίϝϯτͷ࡞੒ɾ࡟আ
 ɹϑΥʔϜͳͲͷUIͷ࣮૷ ɹ؅ཧऀͱҰൠϢʔβʔͰείʔϓΛௐ੔ͨ͠Tokenͷൃߦ ɾpub/sub ɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe 03
25. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ΞʔΩςΫνϟ 03
26. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷ౤ߘͱ؅ཧ 03
27. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷ౤ߘͱ؅ཧ 03 ϑΥʔϜૹ৴࣌ʹ publish & cacheʹpush
28. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷ౤ߘͱ؅ཧ 03 publish࣌ͷkeyͰsubscribe
29. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷ༷ࢠ 03
30. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ॴײ 👍 ୹ظؒͰίϝϯτػೳΛ࣮૷Ͱ͖ͨ
 ɹ૝ఆͷ3 ʙ 5ਓ೔ΑΓ΋୹͍2ਓ೔Ͱ࣮૷ 👍 Redisؔ࿈ͷPaaSͷ஌͕ࣝ΄ͱΜͲແͯ͘΋ߏஙͰ͖ͨ ɹMomentoͱ͍͏SaaSͷ஌͚ࣝͩͰ׬݁͢Δ ɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠ 03
31. 04 3DCG in LP
32. 3DCG in LP Opening 04
33. 3DCG in LP Ending 04
34. 3DCG in LP 3DCGಋೖͷ͖͔͚ͬ 04 ɾΤϯδχΞओಋͰσβΠφʔ΍ϚωʔδϟʔΛר͖ࠐΜͰ࢝·ͬͨ
35. 3DCG in LP 3DCGಋೖͷഎܠ 04 ɾٕज़త௅ઓ ɹαΠόʔΤʔδΣϯτ಺Ͱϒϥ΢βͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨ ɾલճͱͷҧ͍Λग़͢ ɹDeveloper Conference + CA BASE NEXT = ࠓճ ɹΠϯλϥΫγϣϯΛ૿΍͢ʁձ৔ʹ͍Δ͔ͷΑ͏ͳྟ৔ײΛग़͢ʁ ɾ2DCGͷύϥύϥອըͷ࢓૊ΈΛྲྀ༻ ɹʢ୅ʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ͸׆͔͢ ɹεΫϩʔϧͰมԽ͢Δ3DCG
36. ɾMV΍KVͷૉࡐͷௐୡ ɹಈը੍࡞ձࣾʹ࿈ܞ͍͖ͯͨͩ͠ɺඞཁͳૉࡐΛௐୡ ɹૉࡐΛෆਖ਼ʹར༻͞Εͳ͍Α͏ͳن໿ͷ੔උ ɾPoCͷ࡞੒ ɹϞϊ͕ແ͍ͱGoαΠϯΛ໯͑ͳ͍ͷͰɺͻͨ͢ΒύλʔϯΛ੍࡞ ɹϒϥ΢βͷCanvasͱThree.jsΛར༻࣮ͯ͠૷͠ɺಈըΛࡱӨ 3DCG in LP ͲͷΑ͏ʹ࣮ݱͨ͠ͷ͔ 04
37. 3DCG in LP Canvas΁ͷඳըϑϩʔ 04
38. ɾόΠφϦ΁ͷ෼ׂʹΑΔѹॖ݁Ռ : 4.8MB → 300KB ɹgLTF Transform : https://gltf-transform.dev Λར༻ 3DCG in LP gLTFͷ෼ׂɾಡΈࠐΈ 04
39. ɾϥΠτͷޫݯͷ৭΍3DϞσϧͷҐஔͳͲΛௐ੔ ɹಈըΛࢀߟʹσβΠφʔʹ൑அͯ͠΋Β͍ͭͭௐ੔ ɾ؀ڥޫͷద༻ ɹ؀ڥޫͷ৘ใ͕ೖͬͨ2Dσʔλ(EnvMap, .exr) ɹϥΠτ΍3D ModelɺFogͳͲͷௐ੔Ͱ͸࠶ݱͰ͖ͳ͍ɺϞσϧͷ࣭ײ͕ಘΒΕͨ 3DCG in LP KVಈըͷ࠶ݱ 04
40. 3DCG in LP KVಈըͱൺֱ(؀ڥޫద༻લ) 04
41. 3DCG in LP KVಈըͱൺֱ(؀ڥޫద༻ޙ) 04
42. 3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04
43. 3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04 Animation Frameຖʹ Modelͷճస౓Λߋ৽
44. 3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04 εΫϩʔϧྔΛਖ਼نԽ͠ 0 ~ 2πͷൣғʹ͢Δ
45. 3DCG in LP ࣗಈ࠶ੜ 04
46. 3DCG in LP ࣗಈ࠶ੜ 04 Animation Frameຖʹ clockͷܦա࣌ؒͰ Modelͷճస౓Λߋ৽
47. 👍 ςΫओಋͰ3DCGΛ࣮ݱͰ͖ͨ ɹٕज़త௅ઓͱCA಺ʹReact + 3DCG࣮૷ͷ஌ݟΛల։͕Ͱ͖ͨ ɹ࣮ݱʹ͝ڠྗ͍͍ͨͩͨํʑʹ͸͓ख਺͓͔͚͠·ͨ͠🙇 👍 PoC࡞੒͔Β࣮૷·ͰεϐʔσΟʔʹਐΜͩ ɹࡉ͔͍୯ҐͰσβΠφʔʹϨϏϡʔΛ΋Β͍ͭͭɺ࣮૷ΛਐΊΒΕͨ 💭 ύϑΥʔϚϯεʹ͸՝୊͕࢒ͬͨ ɹϢʔβʔ͔Β͍͔ͭ͘LP͕ॏ͍ࢫͷ໰͍߹ΘͤΛ௖͍ͨ 3DCG in LP ॴײ 04
48. 05 ·ͱΊ
49. ·ͱΊ Good👍 ɾࠓ·Ͱͷ஌ݟΛ׆͔ͨ͠৽ͨͳࢼΈ ɹTailwindCSS x SpindleɹMomentoʹΑΔνϟοτ࣮૷ ɹ2DCGʹΑΔදݱ͔Β3DCG΁ͷਐԽ ɾগਓ਺Ͱ΋ظ೔಺ϦϦʔεΛ࣮ݱ ɹٕज़త௅ઓΛऔΓೖΕͭͭ΋ɺظ೔಺Λ໨ࢦ͠ୡ੒ͨ͠ ɹΤϯδχΞͷ෼ۀํ਑͕ܕʹ͸·ͬͨ ɾσβΠφʔͱͷ໖ີͳ࿈ܞ ɹࡉ͔͍୯ҐͰνΣοΫΛड͚ɺख໭Γগͳ͘දݱͷ1ͭ1ͭΛ௥ٻͨ͠ 05
50. ·ͱΊ More💭 ɾύϑΥʔϚϯεվળ ɹ͋·Γख͕ճΒͳ͔ͬͨɹਪଌͰ͸ͳ͘ܭଌ ɾमਖ਼ͷνέοτ؅ཧ ɹ৘ใ͕֨ࠩੜ·Εɺ։ൃϦιʔεͷϩεʹܨ͕ͬͨ ɾΞηοτ؅ཧ ɹमਖ਼Ͱ͔ͳΓ޻਺Λׂ͍ͨ ɹೖߘ༻ͷϑΥʔϜͳͲΛ੔උ͢Ε͹ྑͦ͞͏ 05
51. ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠