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
360
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
38
Drink! プロジェクトスライド
lanberb
0
22
3D表現を用いたECサイトと従来サイトにおける購買率比較実験に向けた表現手法調査
lanberb
0
38
トランスポート層について
lanberb
0
66
BandPocket 草案スライド
lanberb
0
85
Other Decks in Programming
See All in Programming
Namespace on read
tagomoris
2
370
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
継続的な活動で築く地方エンジニアの道
myamashii
2
360
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
How to use Macrobenchmark
veronikapj
0
160
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
20240706_CDKConf
takuyay0ne
0
1.2k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Gamification - CAS2011
davidbonilla
78
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Teambox: Starting and Learning
jrom
130
8.6k
A Philosophy of Restraint
colly
200
16k
Designing with Data
zakiwarfel
96
5k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
The Invisible Side of Design
smashingmag
294
50k
Bash Introduction
62gerente
607
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
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
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠