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
Laravel Boost 超入門
fire_arlo
3
210
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
個人軟體時代
ethanhuang13
0
320
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
アセットのコンパイルについて
ojun9
0
120
Testing Trophyは叫ばない
toms74209200
0
860
Deep Dive into Kotlin Flow
jmatsu
1
320
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Thoughts on Productivity
jonyablonski
70
4.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Embracing the Ebb and Flow
colly
87
4.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
What's in a price? How to price your products and services
michaelherold
246
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Invisible Side of Design
smashingmag
301
51k
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
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠