$30 off During Our Annual Pro Sale. View Details »

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

Nao Sasaki
September 28, 2023

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

Nao Sasaki

September 28, 2023
Tweet

More Decks by Nao Sasaki

Other Decks in Programming

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