Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

did0es
September 28, 2023

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/

did0es

September 28, 2023
Tweet

More Decks by did0es

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 01 CyberAgent Developer Conference 2023ʹ͍ͭͯ

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  9. ɾ࠾༻ཧ༝

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

    View full-size slide

  10. ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ


    ɾ࠾༻ཧ༝

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

    View full-size slide

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


    ɾ࠾༻ཧ༝

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. σβΠϯ੒Ռ෺
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  17. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ
    ಋೖͨ݁͠Ռ
    ɾτʔΫϯΛ࢖ͬͨελΠϦϯάͷ
    ɹϨϏϡʔ&मਖ਼͕΄΅0ʹɻ


    ɾυϝΠϯ஌ࣝΛ΋ͨͳ͍಺ఆऀͷ
    ɹҭ੒ίετΛ࡟ݮ
    ɾ໋໊͕Ұ෦৑௕ʹͳͬͨ
    ɹTailwind༝དྷͷprefix(border, textͳͲ)͕Spindleͷ໋໊ɹ ͱϒοΩ
    ϯάͨ͠
    02

    View full-size slide

  18. 03 MomentoʹΑΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ
    CADCʹ͓͚Δνϟοτػೳ
    ɾExpert DAYͷϥΠϒηογϣϯʹͯఏڙ


    ɾLP্Ͱ౤ߘՄೳͳಗ໊νϟοτ
    ɹLPͰࢹௌɾίϝϯτͷશ͕ͯऩ·ΔΑ͏ʹ


    ɹίϝϯτͷ৺ཧతͳϋʔυϧΛͳ͘͢


    ɾ؅ཧը໘ͰͷϞσϨʔτ
    ɹӡӦ͔ΒͷΞφ΢ϯε΍ɺίϝϯτͷ؅ཧ͕Ͱ͖ΔΑ͏ʹ
    03

    View full-size slide

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

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

    ɹϑΥʔϜͳͲͷUIͷ࣮૷


    ɹ؅ཧऀͱҰൠϢʔβʔͰείʔϓΛௐ੔ͨ͠Tokenͷൃߦ


    ɾpub/sub
    ɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe
    03

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ɹ૝ఆͷ3 ʙ 5ਓ೔ΑΓ΋୹͍2ਓ೔Ͱ࣮૷


    👍 Redisؔ࿈ͷPaaSͷ஌͕ࣝ΄ͱΜͲແͯ͘΋ߏஙͰ͖ͨ


    ɹMomentoͱ͍͏SaaSͷ஌͚ࣝͩͰ׬݁͢Δ


    ɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠
    03

    View full-size slide

  30. 04 3DCG in LP

    View full-size slide

  31. 3DCG in LP
    Opening
    04

    View full-size slide

  32. 3DCG in LP
    Ending
    04

    View full-size slide

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

    View full-size slide

  34. 3DCG in LP
    3DCGಋೖͷഎܠ
    04
    ɾٕज़త௅ઓ


    ɹαΠόʔΤʔδΣϯτ಺Ͱϒϥ΢βͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨ


    ɾલճͱͷҧ͍Λग़͢


    ɹDeveloper Conference + CA BASE NEXT = ࠓճ


    ɹΠϯλϥΫγϣϯΛ૿΍͢ʁձ৔ʹ͍Δ͔ͷΑ͏ͳྟ৔ײΛग़͢ʁ


    ɾ2DCGͷύϥύϥອըͷ࢓૊ΈΛྲྀ༻


    ɹʢ୅ʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ͸׆͔͢


    ɹεΫϩʔϧͰมԽ͢Δ3DCG

    View full-size slide

  35. ɾMV΍KVͷૉࡐͷௐୡ


    ɹಈը੍࡞ձࣾʹ࿈ܞ͍͖ͯͨͩ͠ɺඞཁͳૉࡐΛௐୡ


    ɹૉࡐΛෆਖ਼ʹར༻͞Εͳ͍Α͏ͳن໿ͷ੔උ


    ɾPoCͷ࡞੒


    ɹϞϊ͕ແ͍ͱGoαΠϯΛ໯͑ͳ͍ͷͰɺͻͨ͢ΒύλʔϯΛ੍࡞


    ɹϒϥ΢βͷCanvasͱThree.jsΛར༻࣮ͯ͠૷͠ɺಈըΛࡱӨ
    3DCG in LP
    ͲͷΑ͏ʹ࣮ݱͨ͠ͷ͔
    04

    View full-size slide

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

    View full-size slide

  37. ɾόΠφϦ΁ͷ෼ׂʹΑΔѹॖ݁Ռ : 4.8MB → 300KB


    ɹgLTF Transform : https://gltf-transform.dev Λར༻
    3DCG in LP
    gLTFͷ෼ׂɾಡΈࠐΈ
    04

    View full-size slide

  38. ɾϥΠτͷޫݯͷ৭΍3DϞσϧͷҐஔͳͲΛௐ੔


    ɹಈըΛࢀߟʹσβΠφʔʹ൑அͯ͠΋Β͍ͭͭௐ੔


    ɾ؀ڥޫͷద༻


    ɹ؀ڥޫͷ৘ใ͕ೖͬͨ2Dσʔλ(EnvMap, .exr)


    ɹϥΠτ΍3D ModelɺFogͳͲͷௐ੔Ͱ͸࠶ݱͰ͖ͳ͍ɺϞσϧͷ࣭ײ͕ಘΒΕͨ
    3DCG in LP
    KVಈըͷ࠶ݱ
    04

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 3DCG in LP
    ࣗಈ࠶ੜ
    04

    View full-size slide

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

    View full-size slide

  46. 👍 ςΫओಋͰ3DCGΛ࣮ݱͰ͖ͨ


    ɹٕज़త௅ઓͱCA಺ʹReact + 3DCG࣮૷ͷ஌ݟΛల։͕Ͱ͖ͨ


    ɹ࣮ݱʹ͝ڠྗ͍͍ͨͩͨํʑʹ͸͓ख਺͓͔͚͠·ͨ͠🙇


    👍 PoC࡞੒͔Β࣮૷·ͰεϐʔσΟʔʹਐΜͩ


    ɹࡉ͔͍୯ҐͰσβΠφʔʹϨϏϡʔΛ΋Β͍ͭͭɺ࣮૷ΛਐΊΒΕͨ


    💭 ύϑΥʔϚϯεʹ͸՝୊͕࢒ͬͨ


    ɹϢʔβʔ͔Β͍͔ͭ͘LP͕ॏ͍ࢫͷ໰͍߹ΘͤΛ௖͍ͨ
    3DCG in LP
    ॴײ
    04

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide