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
290
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
36
Drink! プロジェクトスライド
lanberb
0
17
3D表現を用いたECサイトと従来サイトにおける購買率比較実験に向けた表現手法調査
lanberb
0
31
トランスポート層について
lanberb
0
61
BandPocket 草案スライド
lanberb
0
80
Other Decks in Programming
See All in Programming
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Git Lint
bkuhlmann
4
750
Goのmultiple errorsについて (2024年4月版)
syumai
4
970
雑に思考を整理する技術と効能
konifar
60
29k
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
980
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
280
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
Site Reliability Engineering for GMO
pyama86
8
1k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
VS Code をプロダクトにどう取り込むか
onomax
1
420
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
Featured
See All Featured
Side Projects
sachag
451
41k
Designing Experiences People Love
moore
136
23k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Embracing the Ebb and Flow
colly
80
4.1k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Designing with Data
zakiwarfel
96
4.8k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
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
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠