Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CyberAgent Developer Conference(CADC) 2023 LP開発...
Search
Nao Sasaki
September 28, 2023
Programming
1
480
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
Nao Sasaki
September 28, 2023
Tweet
Share
More Decks by Nao Sasaki
See All by Nao Sasaki
guidebook_Bandpocket.pdf
lanberb
0
49
Drink! プロジェクトスライド
lanberb
0
25
3D表現を用いたECサイトと従来サイトにおける購買率比較実験に向けた表現手法調査
lanberb
0
47
トランスポート層について
lanberb
0
79
BandPocket 草案スライド
lanberb
0
100
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
120
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
870
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
840
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
CSC305 Lecture 06
javiergs
PRO
0
230
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
XP, Testing and ninja testing ZOZ5
m_seki
3
670
CSC509 Lecture 03
javiergs
PRO
0
340
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
860
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Documentation Writing (for coders)
carmenintech
75
5.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
Embracing the Ebb and Flow
colly
88
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
A designer walks into a library…
pauljervisheath
209
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
None
ࠤʑ ঘʛNao Sasaki גࣜձࣾαΠόʔΤʔδΣϯτ FANTECHຊ෦ CLࣄۀ෦ ϑϩϯτΤϯυΤϯδχΞ CADC 2023 LP։ൃνʔϜϦʔμʔ
@lanberb @lanberb_
CyberAgent Developer Conference 2023ʹ͍ͭͯ TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ 3DCG in LP 01
02 03 04 CONTENTS 05 ·ͱΊ
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
ɾAmebaͷΞΫηγϒϧͳσβΠϯγεςϜ ɾ࠾༻ཧ༝ ɹɾ͔ͩΒαϙʔτ͕खް͍ ɹɾؔతͳτʔΫϯࢀর͕పఈ͞Ε͍ͯΔ TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ Spindleͱ 02
TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ 02 Semantic Token ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ Primitive Token จ຺Λ࣋ͨͳ͍τʔΫϯ Color Line-Height
Font-Family Font-Size Design Token Primitive Token
02 TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ
σβΠϯՌ TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ 02 CSS Token ࣮ଆͷ߹Ͱ ࣗ༝ʹ࡞ΕΔτʔΫϯ color-white font-xs font-avenir
leading-20 bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Semantic Token FigmaͰΘΕΔ ༻్ɾจ຺Λ࣋ͬͨτʔΫϯ color font font line-height background จ຺ͷཧղʹ Ϧιʔε͕ඞཁ
σβΠϯՌ TailwindͱSpindleΛΈ߹Θͤͨ։ൃޮԽ 02 Tailwind ηϚϯςΟοΫʹ ໋໊͞ΕͨτʔΫϯ܈ color-white font-xs font-avenir leading-20
bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Spindle Design Token ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ Primitive Token จ຺Λ࣋ͨͳ͍τʔΫϯ Color Font-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.com 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ CADCʹ͓͚Δνϟοτػೳ 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ CADCʹ͓͚Δνϟοτػೳ ɾExpert DAYͷϥΠϒηογϣϯʹͯఏڙ ɾLP্ͰߘՄೳͳಗ໊νϟοτ ɹLPͰࢹௌɾίϝϯτͷશ͕ͯऩ·ΔΑ͏ʹ ɹίϝϯτͷ৺ཧతͳϋʔυϧΛͳ͘͢ ɾཧը໘ͰͷϞσϨʔτ ɹӡӦ͔ΒͷΞφϯεɺίϝϯτͷཧ͕Ͱ͖ΔΑ͏ʹ 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ϦΞϧλΠϜͳνϟοτͷ࣮ݱ ɾϢʔβʔͷ࡞ ɹMomentoͷConsoleͰϢʔβʔΛ࡞͠ɺݖݶΛ༩ ɾίϝϯτͷ࡞ɾআ ɹϑΥʔϜͳͲͷUIͷ࣮ ɹཧऀͱҰൠϢʔβʔͰείʔϓΛௐͨ͠Tokenͷൃߦ ɾpub/sub ɹLPɾAdmin໘ͰมߋΛpublish͠ɺͦΕͧΕsubscribe 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ΞʔΩςΫνϟ 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷߘͱཧ 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷߘͱཧ 03 ϑΥʔϜૹ৴࣌ʹ publish & cacheʹpush
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷߘͱཧ 03 publish࣌ͷkeyͰsubscribe
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ νϟοτͷ༷ࢠ 03
MomentoʹΑΔϦΞϧλΠϜνϟοτػೳͷ࣮ݱ ॴײ 👍 ظؒͰίϝϯτػೳΛ࣮Ͱ͖ͨ ɹఆͷ3 ʙ 5ਓΑΓ͍2ਓͰ࣮ 👍 Redisؔ࿈ͷPaaSͷ͕ࣝ΄ͱΜͲແͯ͘ߏஙͰ͖ͨ ɹMomentoͱ͍͏SaaSͷ͚ࣝͩͰ݁͢Δ
ɹϑϩϯτΤϯυΤϯδχΞʹͱͬͯ༏͍͠ 03
04 3DCG in LP
3DCG in LP Opening 04
3DCG in LP Ending 04
3DCG in LP 3DCGಋೖͷ͖͔͚ͬ 04 ɾΤϯδχΞओಋͰσβΠφʔϚωʔδϟʔΛר͖ࠐΜͰ࢝·ͬͨ
3DCG in LP 3DCGಋೖͷഎܠ 04 ɾٕज़తઓ ɹαΠόʔΤʔδΣϯτͰϒϥβͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨ ɾલճͱͷҧ͍Λग़͢ ɹDeveloper Conference
+ CA BASE NEXT = ࠓճ ɹΠϯλϥΫγϣϯΛ૿͢ʁձʹ͍Δ͔ͷΑ͏ͳྟײΛग़͢ʁ ɾ2DCGͷύϥύϥອըͷΈΛྲྀ༻ ɹʢʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ׆͔͢ ɹεΫϩʔϧͰมԽ͢Δ3DCG
ɾMVKVͷૉࡐͷௐୡ ɹಈը੍࡞ձࣾʹ࿈ܞ͍͖ͯͨͩ͠ɺඞཁͳૉࡐΛௐୡ ɹૉࡐΛෆਖ਼ʹར༻͞Εͳ͍Α͏ͳنͷඋ ɾPoCͷ࡞ ɹϞϊ͕ແ͍ͱGoαΠϯΛ͑ͳ͍ͷͰɺͻͨ͢ΒύλʔϯΛ੍࡞ ɹϒϥβͷCanvasͱThree.jsΛར༻࣮ͯ͠͠ɺಈըΛࡱӨ 3DCG in LP ͲͷΑ͏ʹ࣮ݱͨ͠ͷ͔
04
3DCG in LP Canvasͷඳըϑϩʔ 04
ɾόΠφϦͷׂʹΑΔѹॖ݁Ռ : 4.8MB → 300KB ɹgLTF Transform : https://gltf-transform.dev Λར༻
3DCG in LP gLTFͷׂɾಡΈࠐΈ 04
ɾϥΠτͷޫݯͷ৭3DϞσϧͷҐஔͳͲΛௐ ɹಈըΛࢀߟʹσβΠφʔʹஅͯ͠Β͍ͭͭௐ ɾڥޫͷద༻ ɹڥޫͷใ͕ೖͬͨ2Dσʔλ(EnvMap, .exr) ɹϥΠτ3D ModelɺFogͳͲͷௐͰ࠶ݱͰ͖ͳ͍ɺϞσϧͷ࣭ײ͕ಘΒΕͨ 3DCG in LP
KVಈըͷ࠶ݱ 04
3DCG in LP KVಈըͱൺֱ(ڥޫద༻લ) 04
3DCG in LP KVಈըͱൺֱ(ڥޫద༻ޙ) 04
3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04
3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04 Animation Frameຖʹ ModelͷճసΛߋ৽
3DCG in LP εΫϩʔϧͱͷ࿈ܞ 04 εΫϩʔϧྔΛਖ਼نԽ͠ 0 ~ 2πͷൣғʹ͢Δ
3DCG in LP ࣗಈ࠶ੜ 04
3DCG in LP ࣗಈ࠶ੜ 04 Animation 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
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠