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
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
210
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
410
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
190
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
120
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
8
300
JOAI発表資料 @ 関東kaggler会
joai_committee
1
150
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
300
AIに頼りすぎない新人育成術
cuebic9bic
3
340
結局QUICで通信は速くなるの?
kota_yata
9
7.5k
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
180
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1.1k
How STYLIGHT went responsive
nonsquared
100
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Making Projects Easy
brettharned
117
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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