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
48
Drink! プロジェクトスライド
lanberb
0
25
3D表現を用いたECサイトと従来サイトにおける購買率比較実験に向けた表現手法調査
lanberb
0
47
トランスポート層について
lanberb
0
77
BandPocket 草案スライド
lanberb
0
100
Other Decks in Programming
See All in Programming
What's new in AppKit on macOS 26
1024jp
0
110
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
PicoRuby on Rails
makicamel
2
130
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
140
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
180
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
230
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
740
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
790
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
530
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
19k
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Statistics for Hackers
jakevdp
799
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Visualization
eitanlees
146
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Music & Morning Musume
bryan
46
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
BBQ
matthewcrist
89
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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
͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠