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

by Nao Sasaki

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

01 CyberAgent Developer Conference 2023ʹ͍ͭͯ

Slide 5

Slide 5 text

CyberAgent Developer Conference 2023ʹ͍ͭͯ Πϕϯτͷ֓ཁ 01 ɾ2023 06/28 - 06/29ͷ2೔ؒ։࠵  ɹΦϯϥΠϯܗࣜɹYouTubeͰ഑৴ ɾDAY 1 - NEXT DAY  ɹ࣍ੈ୅Λ୲͏एखʹΑΔ2 ~ 30෼ͷ࿥ըηογϣϯ ɾDAY 2 - EXPERT DAY  ɹ֤෼໺ͷϕςϥϯࣾһʹΑΔ໿1࣌ؒͷϥΠϒηογϣϯ

Slide 6

Slide 6 text

CyberAgent Developer Conference 2023ʹ͍ͭͯ 01 Έͳ͞ΜɺLP͸ݟ͍͚ͯͨͩ·͔ͨ͠ʁ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ ࠓ೥౓ͷ։ൃମ੍ ɾϝϯόʔ  ɹࣾһΤϯδχΞ2໊ + 24ଔ಺ఆऀόΠτ2໊ ɾεέδϡʔϧ  ɹ։ൃظؒ: 1ϲ݄ ɾཁ݅ ɹNEXTͱEXPERTͦΕͧΕͷϒϥϯυԋग़ɺӡ༻νʔϜʹΑΔLP಺ϦϯΫͷࠩ͠ସ͑ ɹ഑৴தͷϦΞϧλΠϜνϟοτػೳɺΤϯυϩʔϧɺϦΞϧλΠϜͷLIVEදࣔɺ౳ʑ… 02

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ɾAmeba੡ͷΞΫηγϒϧͳσβΠϯγεςϜ ɾ࠾༻ཧ༝  ɹɾ಺੡͔ͩΒαϙʔτ͕खް͍ ɹɾؔ਺తͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ Spindleͱ͸ 02

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

σβΠϯ੒Ռ෺ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 CSS Token ࣮૷ଆͷ౎߹Ͱ ࣗ༝ʹ࡞ΕΔτʔΫϯ color-white font-xs font-avenir leading-20 bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Semantic Token FigmaͰ࢖ΘΕΔ ༻్ɾจ຺Λ࣋ͬͨτʔΫϯ color font font line-height background จ຺ͷཧղʹ Ϧιʔε͕ඞཁ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

03 MomentoʹΑΔ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ϦΞϧλΠϜͳνϟοτͷ࣮ݱ ɾϢʔβʔͷ࡞੒  ɹMomentoͷConsoleͰϢʔβʔΛ࡞੒͠ɺݖݶΛ෇༩ ɾίϝϯτͷ࡞੒ɾ࡟আ  ɹϑΥʔϜͳͲͷUIͷ࣮૷ ɹ؅ཧऀͱҰൠϢʔβʔͰείʔϓΛௐ੔ͨ͠Tokenͷൃߦ ɾpub/sub ɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe 03

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ॴײ 👍 ୹ظؒͰίϝϯτػೳΛ࣮૷Ͱ͖ͨ  ɹ૝ఆͷ3 ʙ 5ਓ೔ΑΓ΋୹͍2ਓ೔Ͱ࣮૷ 👍 Redisؔ࿈ͷPaaSͷ஌͕ࣝ΄ͱΜͲແͯ͘΋ߏஙͰ͖ͨ ɹMomentoͱ͍͏SaaSͷ஌͚ࣝͩͰ׬݁͢Δ ɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠ 03

Slide 31

Slide 31 text

04 3DCG in LP

Slide 32

Slide 32 text

3DCG in LP Opening 04

Slide 33

Slide 33 text

3DCG in LP Ending 04

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04 εΫϩʔϧྔΛਖ਼نԽ͠ 0 ~ 2πͷൣғʹ͢Δ

Slide 45

Slide 45 text

3DCG in LP ࣗಈ࠶ੜ 04

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

05 ·ͱΊ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠