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. ϒϥ΢βͰ(Ұॹʹ)ԻָΛͭ͘Δ
    ɹ
    SpeeeKaigi 2018/03/30
    ೋࣾ୩ ߉༎ @nishaya
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ࢖༻ٕͨ͠ज़
    • React/Redux
    • TypeScript
    • Firebase(Cluod Firestore/Auth/Hos• άϦου͸SVG as JSX
    9

    View full-size slide

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

    View full-size slide

  9. 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

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide