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

Transcript

1. View Slide

2. ࠤʑ໦ ঘʛNao Sasaki
   גࣜձࣾαΠόʔΤʔδΣϯτ
   FANTECHຊ෦ CLࣄۀ෦
   ϑϩϯτΤϯυΤϯδχΞ
   CADC 2023 LP։ൃνʔϜϦʔμʔ
   @lanberb
   @lanberb_
   

   View Slide

3. CyberAgent Developer Conference 2023ʹ͍ͭͯ
   TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
   MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
   3DCG in LP
   01
   02
   03
   04
   CONTENTS
   05 ·ͱΊ
   

   View Slide

4. 01 CyberAgent Developer Conference 2023ʹ͍ͭͯ
   

   View Slide

5. CyberAgent Developer Conference 2023ʹ͍ͭͯ
   Πϕϯτͷ֓ཁ
   01
   ɾ2023 06/28 - 06/29ͷ2೔ؒ։࠵

   ɹΦϯϥΠϯܗࣜɹYouTubeͰ഑৴
   ɾDAY 1 - NEXT DAY

   ɹ࣍ੈ୅Λ୲͏एखʹΑΔ2 ~ 30෼ͷ࿥ըηογϣϯ
   ɾDAY 2 - EXPERT DAY

   ɹ֤෼໺ͷϕςϥϯࣾһʹΑΔ໿1࣌ؒͷϥΠϒηογϣϯ
   

   View Slide

6. CyberAgent Developer Conference 2023ʹ͍ͭͯ
   01
   Έͳ͞ΜɺLP͸ݟ͍͚ͯͨͩ·͔ͨ͠ʁ
   

   View Slide

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
   

   View Slide

8. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
   

   View Slide

9. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
   ࠓ೥౓ͷ։ൃମ੍
   ɾϝϯόʔ

   ɹࣾһΤϯδχΞ2໊ + 24ଔ಺ఆऀόΠτ2໊
   ɾεέδϡʔϧ

   ɹ։ൃظؒ: 1ϲ݄
   ɾཁ݅
   ɹNEXTͱEXPERTͦΕͧΕͷϒϥϯυԋग़ɺӡ༻νʔϜʹΑΔLP಺ϦϯΫͷࠩ͠ସ͑
   ɹ഑৴தͷϦΞϧλΠϜνϟοτػೳɺΤϯυϩʔϧɺϦΞϧλΠϜͷLIVEදࣔɺ౳ʑ…
   02
   

   View Slide

10. ɾ࠾༻ཧ༝

    ɹɾΫϥε໊Λߟ͑Δ࣌ؒΛແବʹ͠ͳ͍
    ɹɾCSSΛංେԽͤ͞ͳ͍
    ɹɾίʔυͷมߋ͕ΑΓ҆શʹͳΔ
    TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    Tailwindͱ͸
    02
    

    View Slide

11. ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ
    
    
    ɾ࠾༻ཧ༝

    ɹɾ಺੡͔ͩΒαϙʔτ͕खް͍
    ɹɾؔ਺తͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ
    TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    Spindleͱ͸
    02
    

    View Slide

12. ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ
    
    
    ɾ࠾༻ཧ༝

    ɹɾ಺੡͔ͩΒαϙʔτ͕खް͍
    ɹɾؔ਺తͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ
    TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    Spindleͱ͸
    02
    

    View Slide

13. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    02
    Semantic Token
    ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ
    Primitive Token
    จ຺Λ࣋ͨͳ͍τʔΫϯ
    Color
    Line-Height
    Font-Family
    Font-Size
    Design Token
    Primitive Token
    

    View Slide

14. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    

    View Slide

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
    จ຺ͷཧղʹ
    Ϧιʔε͕ඞཁ
    

    View Slide

16. σβΠϯ੒Ռ෺
    TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    02
    Tailwind
    ηϚϯςΟοΫʹ
    ໋໊͞ΕͨτʔΫϯ܈
    color-white
    font-xs
    font-avenir
    leading-20
    bg-red
    ɾ
    ɾ
    ɾ
    ։ൃ
    σβΠϯ
    Spindle Design Token
    ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ
    Primitive Token
    จ຺Λ࣋ͨͳ͍τʔΫϯ
    Color
    Font-Size
    ɾ
    ɾ
    ɾ
    จ຺ʹμΠϨΫτʹ
    ΞΫηεͰ͖Δ
    

    View Slide

17. 02 TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    Tailwind͸໋໊ͷۤ͠Έ͔Β͋ͳͨΛղ์͠ͳ͍
    Tailwind × SpindleͰ͸
    ໋໊͕͍ۤ͠ͱ͔ߟ͑ͳ͍͍ͯ͘
    ʁ
    

    View Slide

18. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    ಋೖͨ݁͠Ռ
    ɾτʔΫϯΛ࢖ͬͨελΠϦϯάͷ
    ɹϨϏϡʔ&मਖ਼͕΄΅0ʹɻ
    
    
    ɾυϝΠϯ஌ࣝΛ΋ͨͳ͍಺ఆऀͷ
    ɹҭ੒ίετΛ࡟ݮ
    ɾ໋໊͕Ұ෦৑௕ʹͳͬͨ
    ɹTailwind༝དྷͷprefix(border, textͳͲ)͕Spindleͷ໋໊ɹ ͱϒοΩ
    ϯάͨ͠
    02
    

    View Slide

19. 03 MomentoʹΑΔ
    

    View Slide

20. גࣜձࣾαΠόʔΤʔδΣϯτ
    άϧʔϓITਪਐຊ෦ CIU
    ϑϩϯτΤϯυΤϯδχΞ
    CADC 2023 LP։ൃνʔϜ ςοΫϦʔυ
    ฏҪ ඔଠʛShuta Hirai
    @shuta13
    @did0es
    

    View Slide

21. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    Momentoʹ͍ͭͯ
    ɾServerlessͳcaching, pub/subͳͲΛఏڙ͢ΔSaaS
    ɹ΄ͱΜͲઃఆෆཁ͔ͭαʔόʔϨεͳRedis
    ɹdocs : https://docs.momentohq.com
    03
    

    View Slide

22. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    CADCʹ͓͚Δνϟοτػೳ
    03
    

    View Slide

23. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    CADCʹ͓͚Δνϟοτػೳ
    ɾExpert DAYͷϥΠϒηογϣϯʹͯఏڙ
    
    
    ɾLP্Ͱ౤ߘՄೳͳಗ໊νϟοτ
    ɹLPͰࢹௌɾίϝϯτͷશ͕ͯऩ·ΔΑ͏ʹ
    
    
    ɹίϝϯτͷ৺ཧతͳϋʔυϧΛͳ͘͢
    
    
    ɾ؅ཧը໘ͰͷϞσϨʔτ
    ɹӡӦ͔ΒͷΞφ΢ϯε΍ɺίϝϯτͷ؅ཧ͕Ͱ͖ΔΑ͏ʹ
    03
    

    View Slide

24. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    ϦΞϧλΠϜͳνϟοτͷ࣮ݱ
    ɾϢʔβʔͷ࡞੒

    ɹMomentoͷConsoleͰϢʔβʔΛ࡞੒͠ɺݖݶΛ෇༩
    ɾίϝϯτͷ࡞੒ɾ࡟আ

    ɹϑΥʔϜͳͲͷUIͷ࣮૷
    
    
    ɹ؅ཧऀͱҰൠϢʔβʔͰείʔϓΛௐ੔ͨ͠Tokenͷൃߦ
    
    
    ɾpub/sub
    ɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe
    03
    

    View Slide

25. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    ΞʔΩςΫνϟ
    03
    

    View Slide

26. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    νϟοτͷ౤ߘͱ؅ཧ
    03
    

    View Slide

27. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    νϟοτͷ౤ߘͱ؅ཧ
    03
    ϑΥʔϜૹ৴࣌ʹ
    publish & cacheʹpush
    

    View Slide

28. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    νϟοτͷ౤ߘͱ؅ཧ
    03
    publish࣌ͷkeyͰsubscribe
    

    View Slide

29. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    νϟοτͷ༷ࢠ
    03
    

    View Slide

30. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    ॴײ
    👍 ୹ظؒͰίϝϯτػೳΛ࣮૷Ͱ͖ͨ

    ɹ૝ఆͷ3 ʙ 5ਓ೔ΑΓ΋୹͍2ਓ೔Ͱ࣮૷
    
    
    👍 Redisؔ࿈ͷPaaSͷ஌͕ࣝ΄ͱΜͲແͯ͘΋ߏஙͰ͖ͨ
    
    
    ɹMomentoͱ͍͏SaaSͷ஌͚ࣝͩͰ׬݁͢Δ
    
    
    ɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠
    03
    

    View Slide

31. 04 3DCG in LP
    

    View Slide

32. 3DCG in LP
    Opening
    04
    

    View Slide

33. 3DCG in LP
    Ending
    04
    

    View Slide

34. 3DCG in LP
    3DCGಋೖͷ͖͔͚ͬ
    04
    ɾΤϯδχΞओಋͰσβΠφʔ΍ϚωʔδϟʔΛר͖ࠐΜͰ࢝·ͬͨ
    

    View Slide

35. 3DCG in LP
    3DCGಋೖͷഎܠ
    04
    ɾٕज़త௅ઓ
    
    
    ɹαΠόʔΤʔδΣϯτ಺Ͱϒϥ΢βͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨ
    
    
    ɾલճͱͷҧ͍Λग़͢
    
    
    ɹDeveloper Conference + CA BASE NEXT = ࠓճ
    
    
    ɹΠϯλϥΫγϣϯΛ૿΍͢ʁձ৔ʹ͍Δ͔ͷΑ͏ͳྟ৔ײΛग़͢ʁ
    
    
    ɾ2DCGͷύϥύϥອըͷ࢓૊ΈΛྲྀ༻
    
    
    ɹʢ୅ʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ͸׆͔͢
    
    
    ɹεΫϩʔϧͰมԽ͢Δ3DCG
    

    View Slide

36. ɾMV΍KVͷૉࡐͷௐୡ
    
    
    ɹಈը੍࡞ձࣾʹ࿈ܞ͍͖ͯͨͩ͠ɺඞཁͳૉࡐΛௐୡ
    
    
    ɹૉࡐΛෆਖ਼ʹར༻͞Εͳ͍Α͏ͳن໿ͷ੔උ
    
    
    ɾPoCͷ࡞੒
    
    
    ɹϞϊ͕ແ͍ͱGoαΠϯΛ໯͑ͳ͍ͷͰɺͻͨ͢ΒύλʔϯΛ੍࡞
    
    
    ɹϒϥ΢βͷCanvasͱThree.jsΛར༻࣮ͯ͠૷͠ɺಈըΛࡱӨ
    3DCG in LP
    ͲͷΑ͏ʹ࣮ݱͨ͠ͷ͔
    04
    

    View Slide

37. 3DCG in LP
    Canvas΁ͷඳըϑϩʔ
    04
    

    View Slide

38. ɾόΠφϦ΁ͷ෼ׂʹΑΔѹॖ݁Ռ : 4.8MB → 300KB
    
    
    ɹgLTF Transform : https://gltf-transform.dev Λར༻
    3DCG in LP
    gLTFͷ෼ׂɾಡΈࠐΈ
    04
    

    View Slide

39. ɾϥΠτͷޫݯͷ৭΍3DϞσϧͷҐஔͳͲΛௐ੔
    
    
    ɹಈըΛࢀߟʹσβΠφʔʹ൑அͯ͠΋Β͍ͭͭௐ੔
    
    
    ɾ؀ڥޫͷద༻
    
    
    ɹ؀ڥޫͷ৘ใ͕ೖͬͨ2Dσʔλ(EnvMap, .exr)
    
    
    ɹϥΠτ΍3D ModelɺFogͳͲͷௐ੔Ͱ͸࠶ݱͰ͖ͳ͍ɺϞσϧͷ࣭ײ͕ಘΒΕͨ
    3DCG in LP
    KVಈըͷ࠶ݱ
    04
    

    View Slide

40. 3DCG in LP
    KVಈըͱൺֱ(؀ڥޫద༻લ)
    04
    

    View Slide

41. 3DCG in LP
    KVಈըͱൺֱ(؀ڥޫద༻ޙ)
    04
    

    View Slide

42. 3DCG in LP
    εΫϩʔϧͱͷ࿈ܞ
    04
    

    View Slide

43. 3DCG in LP
    εΫϩʔϧͱͷ࿈ܞ
    04
    Animation Frameຖʹ
    Modelͷճస౓Λߋ৽
    

    View Slide

44. 3DCG in LP
    εΫϩʔϧͱͷ࿈ܞ
    04
    εΫϩʔϧྔΛਖ਼نԽ͠
    0 ~ 2πͷൣғʹ͢Δ
    

    View Slide

45. 3DCG in LP
    ࣗಈ࠶ੜ
    04
    

    View Slide

46. 3DCG in LP
    ࣗಈ࠶ੜ
    04
    Animation Frameຖʹ
    clockͷܦա࣌ؒͰ
    Modelͷճస౓Λߋ৽
    

    View Slide

47. 👍 ςΫओಋͰ3DCGΛ࣮ݱͰ͖ͨ
    
    
    ɹٕज़త௅ઓͱCA಺ʹReact + 3DCG࣮૷ͷ஌ݟΛల։͕Ͱ͖ͨ
    
    
    ɹ࣮ݱʹ͝ڠྗ͍͍ͨͩͨํʑʹ͸͓ख਺͓͔͚͠·ͨ͠🙇
    
    
    👍 PoC࡞੒͔Β࣮૷·ͰεϐʔσΟʔʹਐΜͩ
    
    
    ɹࡉ͔͍୯ҐͰσβΠφʔʹϨϏϡʔΛ΋Β͍ͭͭɺ࣮૷ΛਐΊΒΕͨ
    
    
    💭 ύϑΥʔϚϯεʹ͸՝୊͕࢒ͬͨ
    
    
    ɹϢʔβʔ͔Β͍͔ͭ͘LP͕ॏ͍ࢫͷ໰͍߹ΘͤΛ௖͍ͨ
    3DCG in LP
    ॴײ
    04
    

    View Slide

48. 05 ·ͱΊ
    

    View Slide

49. ·ͱΊ
    Good👍
    ɾࠓ·Ͱͷ஌ݟΛ׆͔ͨ͠৽ͨͳࢼΈ
    ɹTailwindCSS x SpindleɹMomentoʹΑΔνϟοτ࣮૷
    ɹ2DCGʹΑΔදݱ͔Β3DCG΁ͷਐԽ
    ɾগਓ਺Ͱ΋ظ೔಺ϦϦʔεΛ࣮ݱ
    ɹٕज़త௅ઓΛऔΓೖΕͭͭ΋ɺظ೔಺Λ໨ࢦ͠ୡ੒ͨ͠
    ɹΤϯδχΞͷ෼ۀํ਑͕ܕʹ͸·ͬͨ
    ɾσβΠφʔͱͷ໖ີͳ࿈ܞ
    ɹࡉ͔͍୯ҐͰνΣοΫΛड͚ɺख໭Γগͳ͘දݱͷ1ͭ1ͭΛ௥ٻͨ͠
    05
    

    View Slide

50. ·ͱΊ
    More💭
    ɾύϑΥʔϚϯεվળ
    ɹ͋·Γख͕ճΒͳ͔ͬͨɹਪଌͰ͸ͳ͘ܭଌ
    ɾमਖ਼ͷνέοτ؅ཧ
    ɹ৘ใ͕֨ࠩੜ·Εɺ։ൃϦιʔεͷϩεʹܨ͕ͬͨ
    ɾΞηοτ؅ཧ
    ɹमਖ਼Ͱ͔ͳΓ޻਺Λׂ͍ͨ
    ɹೖߘ༻ͷϑΥʔϜͳͲΛ੔උ͢Ε͹ྑͦ͞͏
    05
    

    View Slide

51. ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide