Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fce89ba6c42ee675dba62e4b127a7290?s=47 nishaya
March 30, 2018

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

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

Fce89ba6c42ee675dba62e4b127a7290?s=128

nishaya

March 30, 2018
Tweet

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