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

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

nishaya
March 30, 2018

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

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

nishaya

March 30, 2018
Tweet

More Decks by nishaya

Other Decks in Technology

Transcript

  1. લճ·Ͱͷ͋Β͢͡ γϯηαΠβʔΛ࡞ͬͨ1-1 - ϒϥ΢βͰԻΛ໐Β͢ - ՝୊: Web Audio APIͷ੍ޚʹReact/ ReduxΛ࢖͏

    1-1 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h4p:/ /tech.speee.jp/entry/2017/04/06/100000 3
  2. લճ·Ͱͷ͋Β͢͡ ύλʔϯγʔέϯα΋࡞ͬͨ1-2 - ϒϥ΢βʹԻָΛԋ૗͍ͤͨ͞ - ͍ͭͰʹαϯϓϥʔΛ಺ଂͨ͠ - ՝୊: λΠϛϯά੍ޚ 1-2

    ReactͰύλʔϯγʔέϯαΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h5p:/ /tech.speee.jp/entry/2017/10/26/105100 4
  3. 11

  4. 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
  5. Op#mis#c Updates • Firestore documentʹsnapshot listener Ληοτ • UIૢ࡞Λى఺ʹdocumentΛߋ৽ •

    onSnapshotͷίʔϧόοΫͰReduxͷ stateΛߋ৽ • componentͷpropsʹมߋ͕఻೻ • શ͕ͯऴΘͬͨޙɺඇಉظʹόοΫΤ ϯυ͕update͞ΕΔ 17
  6. 19