ブラウザで一緒に音楽をつくる

オンライン同期可能なシーケンサーを作る話

Transcript

1. ϒϥ΢βͰ(Ұॹʹ)ԻָΛͭ͘Δ ɹ SpeeeKaigi 2018/03/30 ೋࣾ୩ ߉༎ @nishaya 1
2. ࣗݾ঺հ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ • (ג) Speee ϓϩδΣΫτਪਐࣨ/LM 2
3. લճ·Ͱͷ͋Β͢͡ γϯηαΠβʔΛ࡞ͬͨ1-1 - ϒϥ΢βͰԻΛ໐Β͢ - ՝୊: Web Audio APIͷ੍ޚʹReact/ ReduxΛ࢖͏ 1-1 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h4p:/ /tech.speee.jp/entry/2017/04/06/100000 3
4. લճ·Ͱͷ͋Β͢͡ ύλʔϯγʔέϯα΋࡞ͬͨ1-2 - ϒϥ΢βʹԻָΛԋ૗͍ͤͨ͞ - ͍ͭͰʹαϯϓϥʔΛ಺ଂͨ͠ - ՝୊: λΠϛϯά੍ޚ 1-2 ReactͰύλʔϯγʔέϯαΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h5p:/ /tech.speee.jp/entry/2017/10/26/105100 4
5. લճ·Ͱͷ͋Β͢͡ FMԻݯ΋࡞ͬͨ1-3 1-3 ࡞Ε͹Θ͔ΔɺFMԻݯ - ๻͸Իָ͕Ͱ͖ͳ͍ h(p:/ /nomusiclife.hatenablog.jp/entry/2017/12/14/194428 5
6. ࠓճղܾ͍ͨ͠՝୊ • ը໘্ͰۂΛΤσΟοτͰ͖ΔΑ͏ʹ͍ͨ͠ • ࡞ͬͨۂΛΫϥ΢υ্ʹࣗಈอଘ͍ͨ͠ 6
7. Ͱ͖ͨ 7
8. DEMO 8
9. ࢖༻ٕͨ͠ज़ • React/Redux • TypeScript • Firebase(Cluod Firestore/Auth/Hos<ng) • άϦου͸SVG as JSX 9
10. ͓͓·͔ͳߏ੒ • ۂσʔλΛReduxͷstateʹஔ͖ɺmapStateToPropsͰReact componentʹ౉͢ • ϊʔτͷฤू(௥Ճɾ࡟আͳͲ)͸ac6onΛdispatch͠ɺreducerͰ Redux stateΛॻ͖׵͑Δ 10
11. 11
12. 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
13. Firestore΁ͷσʔλಉظ • Reduxͷstateʹ͋Δۂσʔλʹมߋ͕͋ͬͨΒߋ৽͠Α͏ͱࢥ ͍͕ͬͯͨ... 13
14. 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
15. • listenerΛઃఆ • ߋ৽͞ΕͨυΩϡϝϯτΛReduxͷstoreʹอଘ 15
16. • UI͔ΒτϦΨʔ͞ΕͨมߋΛ·ͣϩʔΧϧʹ͋ΔυΩϡϝϯτ ʹ൓ө • มߋ͸όοΫΤϯυʹૹ৴͞ΕΔલʹϩʔΧϧͷυΩϡϝϯτ ʹରͯ͠ߦΘΕɺଈ࣌݁Ռ͕onSnapshotͷίʔϧόοΫʹΑͬ ͯ௨஌͞ΕΔ 16
17. Op#mis#c Updates • Firestore documentʹsnapshot listener Ληοτ • UIૢ࡞Λى఺ʹdocumentΛߋ৽ • onSnapshotͷίʔϧόοΫͰReduxͷ stateΛߋ৽ • componentͷpropsʹมߋ͕఻೻ • શ͕ͯऴΘͬͨޙɺඇಉظʹόοΫΤ ϯυ͕update͞ΕΔ 17
18. ෭࣍తʹΫϥΠΞϯτؒͷಉظ͕Ͱ͖ΔΑ͏ʹͳͬͨ • onSnapshot͸snapshot listenerΛઃఆͨ͠υΩϡϝϯτʹϦϞ ʔτͰߋ৽͕ߦΘΕͨ৔߹ʹ΋τϦΨʔ͞ΕΔ • ผΫϥΠΞϯτ͕listen͍ͯ͠ΔυΩϡϝϯτʹมߋΛߦ͏ͱɺ όοΫΤϯυʹมߋ͕౸ୡͨ͠ࡍʹߋ৽͞ΕͨυΩϡϝϯτͷ ಺༰͕ͦͷΫϥΠΞϯτʹ௨஌͞ΕΔ • ಉظ͸૒ํ޲ɺ·ͨ͸ෳ਺ΫϥΠΞϯτؒͰ΋Մೳ 18
19. 19
20. DEMO 20
21. ࠓޙͷల։ • ϒϩοΫΛ૊Έ߹ΘͤͯΞϨϯδͰ͖ΔΑ͏ʹ͢Δ • ΠϯτϩɺAϝϩɺBϝϩɺαϏ... • બ୒Ͱ͖ΔԻݯํࣜΛ௥Ճ • όοΫΤϯυΛGraphQLͰ࣮૷͢Δ 21
22. ॴײ • FirestoreΛ࢖͏͜ͱͰɺಛผͳ࣮૷ͳ͠ʹϚϧνΫϥΠΞϯτ ؒಉظ͕࣮૷Ͱ͖Δ • ͨͩ͠ɺஅଓతͳมߋͷಉظͰ͸rate limitʹ஫ҙ͢Δඞཁ͋ Γ 22
23. ॴײ • ۂσʔλͷߏ଄͕ͦΕͳΓʹෳࡶͩͬͨͷͰɺTypeScriptͷܕ ෇͚͕ޮ཰ԽʹҰ໾ങͬͨ • ReactͰάϥϑΟΧϧ͔ͭΠϯλϥΫςΟϒͳදݱΛ͢Δ৔߹ɺ SVG as JSX͸ඇৗʹ࢖͍উख͕Α͍ 23
24. !͓·͚! • Ӆ͠ίϚϯυೖΕͨͷͰ୳ͯ͠Έ͍ͯͩ͘͞ 24