View Slide
ࠤʑ ঘʛNao SasakiגࣜձࣾαΠόʔΤʔδΣϯτFANTECHຊ෦ CLࣄۀ෦ϑϩϯτΤϯυΤϯδχΞCADC 2023 LP։ൃνʔϜϦʔμʔ@lanberb@lanberb_
CyberAgent Developer Conference 2023ʹ͍ͭͯTailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽMomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ3DCG in LP01020304CONTENTS05 ·ͱΊ
01 CyberAgent Developer Conference 2023ʹ͍ͭͯ
CyberAgent Developer Conference 2023ʹ͍ͭͯΠϕϯτͷ֓ཁ01ɾ2023 06/28 - 06/29ͷ2ؒ։࠵ ɹΦϯϥΠϯܗࣜɹYouTubeͰ৴ɾDAY 1 - NEXT DAY ɹ࣍ੈΛ୲͏एखʹΑΔ2 ~ 30ͷըηογϣϯɾDAY 2 - EXPERT DAY ɹ֤ͷϕςϥϯࣾһʹΑΔ1࣌ؒͷϥΠϒηογϣϯ
CyberAgent Developer Conference 2023ʹ͍ͭͯ01Έͳ͞ΜɺLPݟ͍͚ͯͨͩ·͔ͨ͠ʁ
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
02 TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ
TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽࠓͷ։ൃମ੍ɾϝϯόʔ ɹࣾһΤϯδχΞ2໊ + 24ଔఆऀόΠτ2໊ɾεέδϡʔϧ ɹ։ൃظؒ: 1ϲ݄ɾཁ݅ɹNEXTͱEXPERTͦΕͧΕͷϒϥϯυԋग़ɺӡ༻νʔϜʹΑΔLPϦϯΫͷࠩ͠ସ͑ɹ৴தͷϦΞϧλΠϜνϟοτػೳɺΤϯυϩʔϧɺϦΞϧλΠϜͷLIVEදࣔɺʑ…02
ɾ࠾༻ཧ༝ ɹɾΫϥε໊Λߟ͑Δ࣌ؒΛແବʹ͠ͳ͍ɹɾCSSΛංେԽͤ͞ͳ͍ɹɾίʔυͷมߋ͕ΑΓ҆શʹͳΔTailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽTailwindͱ02
ɾAmebaͷΞΫηγϒϧͳσβΠϯγεςϜɾ࠾༻ཧ༝ ɹɾ͔ͩΒαϙʔτ͕खް͍ɹɾؔతͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔTailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽSpindleͱ02
TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ02Semantic Token༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯPrimitive Tokenจ຺Λ࣋ͨͳ͍τʔΫϯColorLine-HeightFont-FamilyFont-SizeDesign TokenPrimitive Token
σβΠϯՌTailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ02CSS Token࣮ଆͷ߹Ͱࣗ༝ʹ࡞ΕΔτʔΫϯcolor-whitefont-xsfont-avenirleading-20bg-redɾɾɾ։ൃσβΠϯSemantic TokenFigmaͰΘΕΔ༻్ɾจ຺Λ࣋ͬͨτʔΫϯcolorfontfontline-heightbackgroundจ຺ͷཧղʹϦιʔε͕ඞཁ
σβΠϯՌTailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ02TailwindηϚϯςΟοΫʹ໋໊͞ΕͨτʔΫϯ܈color-whitefont-xsfont-avenirleading-20bg-redɾɾɾ։ൃσβΠϯSpindle Design Token༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯPrimitive Tokenจ຺Λ࣋ͨͳ͍τʔΫϯColorFont-Sizeɾɾɾจ຺ʹμΠϨΫτʹΞΫηεͰ͖Δ
02 TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽTailwind໋໊ͷۤ͠Έ͔Β͋ͳͨΛղ์͠ͳ͍Tailwind × SpindleͰ໋໊͕͍ۤ͠ͱ͔ߟ͑ͳ͍͍ͯ͘ʁ
TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽಋೖͨ݁͠ՌɾτʔΫϯΛͬͨελΠϦϯάͷɹϨϏϡʔ&मਖ਼͕΄΅0ʹɻɾυϝΠϯࣝΛͨͳ͍ఆऀͷɹҭίετΛݮɾ໋໊͕Ұ෦ʹͳͬͨɹTailwind༝དྷͷprefix(border, textͳͲ)͕Spindleͷ໋໊ɹ ͱϒοΩϯάͨ͠02
03 MomentoʹΑΔ
גࣜձࣾαΠόʔΤʔδΣϯτάϧʔϓITਪਐຊ෦ CIUϑϩϯτΤϯυΤϯδχΞCADC 2023 LP։ൃνʔϜ ςοΫϦʔυฏҪ ඔଠʛShuta Hirai@shuta13@did0es
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱMomentoʹ͍ͭͯɾServerlessͳcaching, pub/subͳͲΛఏڙ͢ΔSaaSɹ΄ͱΜͲઃఆෆཁ͔ͭαʔόʔϨεͳRedisɹdocs : https://docs.momentohq.com03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱCADCʹ͓͚Δνϟοτػೳ03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱCADCʹ͓͚ΔνϟοτػೳɾExpert DAYͷϥΠϒηογϣϯʹͯఏڙɾLP্ͰߘՄೳͳಗ໊νϟοτɹLPͰࢹௌɾίϝϯτͷશ͕ͯऩ·ΔΑ͏ʹɹίϝϯτͷ৺ཧతͳϋʔυϧΛͳ͘͢ɾཧը໘ͰͷϞσϨʔτɹӡӦ͔ΒͷΞφϯεɺίϝϯτͷཧ͕Ͱ͖ΔΑ͏ʹ03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱϦΞϧλΠϜͳνϟοτͷ࣮ݱɾϢʔβʔͷ࡞ ɹMomentoͷConsoleͰϢʔβʔΛ࡞͠ɺݖݶΛ༩ɾίϝϯτͷ࡞ɾআ ɹϑΥʔϜͳͲͷUIͷ࣮ɹཧऀͱҰൠϢʔβʔͰείʔϓΛௐͨ͠Tokenͷൃߦɾpub/subɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱΞʔΩςΫνϟ03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱνϟοτͷߘͱཧ03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱνϟοτͷߘͱཧ03ϑΥʔϜૹ৴࣌ʹpublish & cacheʹpush
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱνϟοτͷߘͱཧ03publish࣌ͷkeyͰsubscribe
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱνϟοτͷ༷ࢠ03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱॴײ👍 ظؒͰίϝϯτػೳΛ࣮Ͱ͖ͨ ɹఆͷ3 ʙ 5ਓΑΓ͍2ਓͰ࣮👍 Redisؔ࿈ͷPaaSͷ͕ࣝ΄ͱΜͲແͯ͘ߏஙͰ͖ͨɹMomentoͱ͍͏SaaSͷ͚ࣝͩͰ݁͢ΔɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠03
04 3DCG in LP
3DCG in LPOpening04
3DCG in LPEnding04
3DCG in LP3DCGಋೖͷ͖͔͚ͬ04ɾΤϯδχΞओಋͰσβΠφʔϚωʔδϟʔΛר͖ࠐΜͰ࢝·ͬͨ
3DCG in LP3DCGಋೖͷഎܠ04ɾٕज़తઓɹαΠόʔΤʔδΣϯτͰϒϥβͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨɾલճͱͷҧ͍Λग़͢ɹDeveloper Conference + CA BASE NEXT = ࠓճɹΠϯλϥΫγϣϯΛ૿͢ʁձʹ͍Δ͔ͷΑ͏ͳྟײΛग़͢ʁɾ2DCGͷύϥύϥອըͷΈΛྲྀ༻ɹʢʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ׆͔͢ɹεΫϩʔϧͰมԽ͢Δ3DCG
ɾMVKVͷૉࡐͷௐୡɹಈը੍࡞ձࣾʹ࿈ܞ͍͖ͯͨͩ͠ɺඞཁͳૉࡐΛௐୡɹૉࡐΛෆਖ਼ʹར༻͞Εͳ͍Α͏ͳنͷඋɾPoCͷ࡞ɹϞϊ͕ແ͍ͱGoαΠϯΛ͑ͳ͍ͷͰɺͻͨ͢ΒύλʔϯΛ੍࡞ɹϒϥβͷCanvasͱThree.jsΛར༻࣮ͯ͠͠ɺಈըΛࡱӨ3DCG in LPͲͷΑ͏ʹ࣮ݱͨ͠ͷ͔04
3DCG in LPCanvasͷඳըϑϩʔ04
ɾόΠφϦͷׂʹΑΔѹॖ݁Ռ : 4.8MB → 300KBɹgLTF Transform : https://gltf-transform.dev Λར༻3DCG in LPgLTFͷׂɾಡΈࠐΈ04
ɾϥΠτͷޫݯͷ৭3DϞσϧͷҐஔͳͲΛௐɹಈըΛࢀߟʹσβΠφʔʹஅͯ͠Β͍ͭͭௐɾڥޫͷద༻ɹڥޫͷใ͕ೖͬͨ2Dσʔλ(EnvMap, .exr)ɹϥΠτ3D ModelɺFogͳͲͷௐͰ࠶ݱͰ͖ͳ͍ɺϞσϧͷ࣭ײ͕ಘΒΕͨ3DCG in LPKVಈըͷ࠶ݱ04
3DCG in LPKVಈըͱൺֱ(ڥޫద༻લ)04
3DCG in LPKVಈըͱൺֱ(ڥޫద༻ޙ)04
3DCG in LPεΫϩʔϧͱͷ࿈ܞ04
3DCG in LPεΫϩʔϧͱͷ࿈ܞ04Animation FrameຖʹModelͷճసΛߋ৽
3DCG in LPεΫϩʔϧͱͷ࿈ܞ04εΫϩʔϧྔΛਖ਼نԽ͠0 ~ 2πͷൣғʹ͢Δ
3DCG in LPࣗಈ࠶ੜ04
3DCG in LPࣗಈ࠶ੜ04Animation Frameຖʹclockͷܦա࣌ؒͰModelͷճసΛߋ৽
👍 ςΫओಋͰ3DCGΛ࣮ݱͰ͖ͨɹٕज़తઓͱCAʹReact + 3DCG࣮ͷݟΛల։͕Ͱ͖ͨɹ࣮ݱʹ͝ڠྗ͍͍ͨͩͨํʑʹ͓ख͓͔͚͠·ͨ͠🙇👍 PoC࡞͔Β࣮·ͰεϐʔσΟʔʹਐΜͩɹࡉ͔͍୯ҐͰσβΠφʔʹϨϏϡʔΛΒ͍ͭͭɺ࣮ΛਐΊΒΕͨ💭 ύϑΥʔϚϯεʹ՝͕ͬͨɹϢʔβʔ͔Β͍͔ͭ͘LP͕ॏ͍ࢫͷ͍߹ΘͤΛ͍ͨ3DCG in LPॴײ04
05 ·ͱΊ
·ͱΊGood👍ɾࠓ·ͰͷݟΛ׆͔ͨ͠৽ͨͳࢼΈɹTailwindCSS x SpindleɹMomentoʹΑΔνϟοτ࣮ɹ2DCGʹΑΔදݱ͔Β3DCGͷਐԽɾগਓͰظϦϦʔεΛ࣮ݱɹٕज़తઓΛऔΓೖΕͭͭɺظΛࢦ͠ୡͨ͠ɹΤϯδχΞͷۀํ͕ܕʹ·ͬͨɾσβΠφʔͱͷ໖ີͳ࿈ܞɹࡉ͔͍୯ҐͰνΣοΫΛड͚ɺखΓগͳ͘දݱͷ1ͭ1ͭΛٻͨ͠05
·ͱΊMore💭ɾύϑΥʔϚϯεվળɹ͋·Γख͕ճΒͳ͔ͬͨɹਪଌͰͳ͘ܭଌɾमਖ਼ͷνέοτཧɹใ͕֨ࠩੜ·Εɺ։ൃϦιʔεͷϩεʹܨ͕ͬͨɾΞηοτཧɹमਖ਼Ͱ͔ͳΓΛׂ͍ͨɹೖߘ༻ͷϑΥʔϜͳͲΛඋ͢Εྑͦ͞͏05
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠