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

by nishaya

Slide 1

Slide 1 text

ϒϥ΢βͰ(Ұॹʹ)ԻָΛͭ͘Δ ɹ SpeeeKaigi 2018/03/30 ೋࣾ୩ ߉༎ @nishaya 1

Slide 2

Slide 2 text

ࣗݾ঺հ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ • (ג) Speee ϓϩδΣΫτਪਐࣨ/LM 2

Slide 3

Slide 3 text

લճ·Ͱͷ͋Β͢͡ γϯηαΠβʔΛ࡞ͬͨ1-1 - ϒϥ΢βͰԻΛ໐Β͢ - ՝୊: Web Audio APIͷ੍ޚʹReact/ ReduxΛ࢖͏ 1-1 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h4p:/ /tech.speee.jp/entry/2017/04/06/100000 3

Slide 4

Slide 4 text

લճ·Ͱͷ͋Β͢͡ ύλʔϯγʔέϯα΋࡞ͬͨ1-2 - ϒϥ΢βʹԻָΛԋ૗͍ͤͨ͞ - ͍ͭͰʹαϯϓϥʔΛ಺ଂͨ͠ - ՝୊: λΠϛϯά੍ޚ 1-2 ReactͰύλʔϯγʔέϯαΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG h5p:/ /tech.speee.jp/entry/2017/10/26/105100 4

Slide 5

Slide 5 text

લճ·Ͱͷ͋Β͢͡ FMԻݯ΋࡞ͬͨ1-3 1-3 ࡞Ε͹Θ͔ΔɺFMԻݯ - ๻͸Իָ͕Ͱ͖ͳ͍ h(p:/ /nomusiclife.hatenablog.jp/entry/2017/12/14/194428 5

Slide 6

Slide 6 text

ࠓճղܾ͍ͨ͠՝୊ • ը໘্ͰۂΛΤσΟοτͰ͖ΔΑ͏ʹ͍ͨ͠ • ࡞ͬͨۂΛΫϥ΢υ্ʹࣗಈอଘ͍ͨ͠ 6

Slide 7

Slide 7 text

Ͱ͖ͨ 7

Slide 8

Slide 8 text

DEMO 8

Slide 9

Slide 9 text

࢖༻ٕͨ͠ज़ • React/Redux • TypeScript • Firebase(Cluod Firestore/Auth/Hos

Slide 10

Slide 10 text

͓͓·͔ͳߏ੒ • ۂσʔλΛReduxͷstateʹஔ͖ɺmapStateToPropsͰReact componentʹ౉͢ • ϊʔτͷฤू(௥Ճɾ࡟আͳͲ)͸ac6onΛdispatch͠ɺreducerͰ Redux stateΛॻ͖׵͑Δ 10

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Cluod Firestore • ۂσʔλͷอଘઌ͸Cloud Firestore(2018/03/30࣌఺Ͱ͸ϕʔ λ൛) • ࠷ۙFirebaseʹ௥Ճ͞ΕͨɺReal9me Databaseʹ୅ΘΔ৽͍͠ σʔλϕʔε2-1 2-1 σʔλϕʔεΛબ୒: Cloud Firestore ·ͨ͸ Real3me Database | Firebase h9ps:/ /ﬁrebase.google.com/docs/database/rtdb-vs-ﬁrestore 12

Slide 13

Slide 13 text

Firestore΁ͷσʔλಉظ • Reduxͷstateʹ͋Δۂσʔλʹมߋ͕͋ͬͨΒߋ৽͠Α͏ͱࢥ ͍͕ͬͯͨ... 13

Slide 14

Slide 14 text

Snapshot Listener • υΩϡϝϯτ΁ͷߋ৽Λɺσʔλ͕όοΫΤϯυʹૹ৴͞ΕΔ લʹݕ஌͢ΔͨΊͷ࢓૊Έ2-2 • Op&mis&c Updates(ָ؍తߋ৽)Λ࣮ݱͰ͖Δ • DB΁ͷอଘ͕੒ޭ͢Δͱ͍͏લఏͷ΋ͱɺUIΛߋ৽͢Δ 2-2 Cloud Firestore ͰϦΞϧλΠϜ ΞοϓσʔτΛೖख͢Δ | Firebase h3ps:/ /ﬁrebase.google.com/docs/ﬁrestore/query-data/listen 14

Slide 15

Slide 15 text

• listenerΛઃఆ • ߋ৽͞ΕͨυΩϡϝϯτΛReduxͷstoreʹอଘ 15

Slide 16

Slide 16 text

• UI͔ΒτϦΨʔ͞ΕͨมߋΛ·ͣϩʔΧϧʹ͋ΔυΩϡϝϯτ ʹ൓ө • มߋ͸όοΫΤϯυʹૹ৴͞ΕΔલʹϩʔΧϧͷυΩϡϝϯτ ʹରͯ͠ߦΘΕɺଈ࣌݁Ռ͕onSnapshotͷίʔϧόοΫʹΑͬ ͯ௨஌͞ΕΔ 16

Slide 17

Slide 17 text

Op#mis#c Updates • Firestore documentʹsnapshot listener Ληοτ • UIૢ࡞Λى఺ʹdocumentΛߋ৽ • onSnapshotͷίʔϧόοΫͰReduxͷ stateΛߋ৽ • componentͷpropsʹมߋ͕఻೻ • શ͕ͯऴΘͬͨޙɺඇಉظʹόοΫΤ ϯυ͕update͞ΕΔ 17

Slide 18

Slide 18 text

෭࣍తʹΫϥΠΞϯτؒͷಉظ͕Ͱ͖ΔΑ͏ʹͳͬͨ • onSnapshot͸snapshot listenerΛઃఆͨ͠υΩϡϝϯτʹϦϞ ʔτͰߋ৽͕ߦΘΕͨ৔߹ʹ΋τϦΨʔ͞ΕΔ • ผΫϥΠΞϯτ͕listen͍ͯ͠ΔυΩϡϝϯτʹมߋΛߦ͏ͱɺ όοΫΤϯυʹมߋ͕౸ୡͨ͠ࡍʹߋ৽͞ΕͨυΩϡϝϯτͷ ಺༰͕ͦͷΫϥΠΞϯτʹ௨஌͞ΕΔ • ಉظ͸૒ํ޲ɺ·ͨ͸ෳ਺ΫϥΠΞϯτؒͰ΋Մೳ 18

Slide 19

Slide 19 text

Slide 20

Slide 20 text

DEMO 20

Slide 21

Slide 21 text

ࠓޙͷల։ • ϒϩοΫΛ૊Έ߹ΘͤͯΞϨϯδͰ͖ΔΑ͏ʹ͢Δ • ΠϯτϩɺAϝϩɺBϝϩɺαϏ... • બ୒Ͱ͖ΔԻݯํࣜΛ௥Ճ • όοΫΤϯυΛGraphQLͰ࣮૷͢Δ 21

Slide 22

Slide 22 text

ॴײ • FirestoreΛ࢖͏͜ͱͰɺಛผͳ࣮૷ͳ͠ʹϚϧνΫϥΠΞϯτ ؒಉظ͕࣮૷Ͱ͖Δ • ͨͩ͠ɺஅଓతͳมߋͷಉظͰ͸rate limitʹ஫ҙ͢Δඞཁ͋ Γ 22

Slide 23

Slide 23 text

ॴײ • ۂσʔλͷߏ଄͕ͦΕͳΓʹෳࡶͩͬͨͷͰɺTypeScriptͷܕ ෇͚͕ޮ཰ԽʹҰ໾ങͬͨ • ReactͰάϥϑΟΧϧ͔ͭΠϯλϥΫςΟϒͳදݱΛ͢Δ৔߹ɺ SVG as JSX͸ඇৗʹ࢖͍উख͕Α͍ 23

Slide 24

Slide 24 text

!͓·͚! • Ӆ͠ίϚϯυೖΕͨͷͰ୳ͯ͠Έ͍ͯͩ͘͞ 24