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

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