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
ブラウザで一緒に音楽をつくる
Search
nishaya
March 30, 2018
Technology
0
2.1k
ブラウザで一緒に音楽をつくる
オンライン同期可能なシーケンサーを作る話
nishaya
March 30, 2018
Tweet
Share
More Decks by nishaya
See All by nishaya
Webで音楽を奏でる
nishaya
0
6.1k
そのSPA、本当に必要ですか?
nishaya
0
3.4k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.3k
Other Decks in Technology
See All in Technology
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
380
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
150
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
540
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
280
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
Agile PBL at New Grads Trainings
kawaguti
PRO
1
390
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
190
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
110
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Side Projects
sachag
455
43k
The Invisible Side of Design
smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Writing Fast Ruby
sferik
628
62k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Transcript
ϒϥβͰ(Ұॹʹ)ԻָΛͭ͘Δ ɹ SpeeeKaigi 2018/03/30 ೋࣾ୩ ߉༎ @nishaya 1
ࣗݾհ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ •
(ג) Speee ϓϩδΣΫτਪਐࣨ/LM 2
લճ·Ͱͷ͋Β͢͡ γϯηαΠβʔΛ࡞ͬͨ1-1 - ϒϥβͰԻΛ໐Β͢ - ՝: Web Audio APIͷ੍ޚʹReact/ ReduxΛ͏
1-1 ReactͰγϯηαΠβʔΛ࡞ͬͨ - Speee DEVELOPER BLOG h4p:/ /tech.speee.jp/entry/2017/04/06/100000 3
લճ·Ͱͷ͋Β͢͡ ύλʔϯγʔέϯα࡞ͬͨ1-2 - ϒϥβʹԻָΛԋ͍ͤͨ͞ - ͍ͭͰʹαϯϓϥʔΛଂͨ͠ - ՝: λΠϛϯά੍ޚ 1-2
ReactͰύλʔϯγʔέϯαΛ࡞ͬͨ - Speee DEVELOPER BLOG h5p:/ /tech.speee.jp/entry/2017/10/26/105100 4
લճ·Ͱͷ͋Β͢͡ FMԻݯ࡞ͬͨ1-3 1-3 ࡞ΕΘ͔ΔɺFMԻݯ - Իָ͕Ͱ͖ͳ͍ h(p:/ /nomusiclife.hatenablog.jp/entry/2017/12/14/194428 5
ࠓճղܾ͍ͨ͠՝ • ը໘্ͰۂΛΤσΟοτͰ͖ΔΑ͏ʹ͍ͨ͠ • ࡞ͬͨۂΛΫϥυ্ʹࣗಈอଘ͍ͨ͠ 6
Ͱ͖ͨ 7
DEMO 8
༻ٕͨ͠ज़ • React/Redux • TypeScript • Firebase(Cluod Firestore/Auth/Hos<ng) • άϦουSVG
as JSX 9
͓͓·͔ͳߏ • ۂσʔλΛReduxͷstateʹஔ͖ɺmapStateToPropsͰReact componentʹ͢ • ϊʔτͷฤू(ՃɾআͳͲ)ac6onΛdispatch͠ɺreducerͰ Redux stateΛॻ͖͑Δ 10
11
Cluod Firestore • ۂσʔλͷอଘઌCloud Firestore(2018/03/30࣌Ͱϕʔ λ൛) • ࠷ۙFirebaseʹՃ͞ΕͨɺReal9me DatabaseʹΘΔ৽͍͠ σʔλϕʔε2-1
2-1 σʔλϕʔεΛબ: Cloud Firestore ·ͨ Real3me Database | Firebase h9ps:/ /firebase.google.com/docs/database/rtdb-vs-firestore 12
Firestoreͷσʔλಉظ • Reduxͷstateʹ͋Δۂσʔλʹมߋ͕͋ͬͨΒߋ৽͠Α͏ͱࢥ ͍͕ͬͯͨ... 13
Snapshot Listener • υΩϡϝϯτͷߋ৽Λɺσʔλ͕όοΫΤϯυʹૹ৴͞ΕΔ લʹݕ͢ΔͨΊͷΈ2-2 • Op&mis&c Updates(ָ؍తߋ৽)Λ࣮ݱͰ͖Δ • DBͷอଘ͕ޭ͢Δͱ͍͏લఏͷͱɺUIΛߋ৽͢Δ
2-2 Cloud Firestore ͰϦΞϧλΠϜ ΞοϓσʔτΛೖख͢Δ | Firebase h3ps:/ /firebase.google.com/docs/firestore/query-data/listen 14
• listenerΛઃఆ • ߋ৽͞ΕͨυΩϡϝϯτΛReduxͷstoreʹอଘ 15
• UI͔ΒτϦΨʔ͞ΕͨมߋΛ·ͣϩʔΧϧʹ͋ΔυΩϡϝϯτ ʹө • มߋόοΫΤϯυʹૹ৴͞ΕΔલʹϩʔΧϧͷυΩϡϝϯτ ʹରͯ͠ߦΘΕɺଈ࣌݁Ռ͕onSnapshotͷίʔϧόοΫʹΑͬ ͯ௨͞ΕΔ 16
Op#mis#c Updates • Firestore documentʹsnapshot listener Ληοτ • UIૢ࡞ΛىʹdocumentΛߋ৽ •
onSnapshotͷίʔϧόοΫͰReduxͷ stateΛߋ৽ • componentͷpropsʹมߋ͕ • શ͕ͯऴΘͬͨޙɺඇಉظʹόοΫΤ ϯυ͕update͞ΕΔ 17
෭࣍తʹΫϥΠΞϯτؒͷಉظ͕Ͱ͖ΔΑ͏ʹͳͬͨ • onSnapshotsnapshot listenerΛઃఆͨ͠υΩϡϝϯτʹϦϞ ʔτͰߋ৽͕ߦΘΕͨ߹ʹτϦΨʔ͞ΕΔ • ผΫϥΠΞϯτ͕listen͍ͯ͠ΔυΩϡϝϯτʹมߋΛߦ͏ͱɺ όοΫΤϯυʹมߋ͕౸ୡͨ͠ࡍʹߋ৽͞ΕͨυΩϡϝϯτͷ ༰͕ͦͷΫϥΠΞϯτʹ௨͞ΕΔ •
ಉظํɺ·ͨෳΫϥΠΞϯτؒͰՄೳ 18
19
DEMO 20
ࠓޙͷల։ • ϒϩοΫΛΈ߹ΘͤͯΞϨϯδͰ͖ΔΑ͏ʹ͢Δ • ΠϯτϩɺAϝϩɺBϝϩɺαϏ... • બͰ͖ΔԻݯํࣜΛՃ • όοΫΤϯυΛGraphQLͰ࣮͢Δ 21
ॴײ • FirestoreΛ͏͜ͱͰɺಛผͳ࣮ͳ͠ʹϚϧνΫϥΠΞϯτ ؒಉظ͕࣮Ͱ͖Δ • ͨͩ͠ɺஅଓతͳมߋͷಉظͰrate limitʹҙ͢Δඞཁ͋ Γ 22
ॴײ • ۂσʔλͷߏ͕ͦΕͳΓʹෳࡶͩͬͨͷͰɺTypeScriptͷܕ ͚͕ޮԽʹҰങͬͨ • ReactͰάϥϑΟΧϧ͔ͭΠϯλϥΫςΟϒͳදݱΛ͢Δ߹ɺ SVG as JSXඇৗʹ͍উख͕Α͍ 23
!͓·͚! • Ӆ͠ίϚϯυೖΕͨͷͰ୳ͯ͠Έ͍ͯͩ͘͞ 24