Slide 1

Slide 1 text

ϦΞϧλΠϜσʔλϕʔε
 Cloud Firestoreೖ໳ αϙʔλʔζColabษڧձ ࠜ؛ప໵

Slide 2

Slide 2 text

ࣗݾ঺հ • ࠜ؛ప໵ @wkurokishiw • ϥϯαʔζגࣜձࣾ • ओʹϑϩϯτ·ΘΓ୲౰ • ஜ೾େֶେֶӃ18ଔ • ਺஋ղੳ • ֎ࠃਓ؍ޫ޲͚ΞϓϦ։ൃ • WebϑϩϯτΤϯυڧΊ • Vue.js, Vuex, React, Redux

Slide 3

Slide 3 text

Ϋϥ΢υιʔγϯά Lancers

Slide 4

Slide 4 text

Ϋϥ΢υιʔγϯά Lancers

Slide 5

Slide 5 text

͸͡Ίʹ • ର৅ऀ • FirestoreͰͲΜͳ͜ͱ͕Ͱ͖Δ͔Θ͔Βͳ͍ • FirebaseΛ࢖ͬͯΔ͚ͲFirestore͸࢖ͬͯͳ͍ • ΰʔϧ • FirestoreͰͲΜͳ͜ͱ͕Ͱ͖Δ͔ཧղ • εϥΠυ΍αϯϓϧΞϓϦͷίʔυΛಡΊ͹࢖͑Δ • ࠓ೔࿩͞ͳ͍͜ͱ • ύϑΥʔϚϯε/଎౓

Slide 6

Slide 6 text

ΞδΣϯμ • Cloud Firestoreͱ͸ • ηΩϡϦςΟϧʔϧ • έʔεελσΟɿ
 ෳ਺෦԰νϟοτΞϓϦͷDBɾϧʔϧઃܭ • Realtime Databaseͱͷൺֱ • ·ͱΊ

Slide 7

Slide 7 text

Cloud Firestoreͱ͸

Slide 8

Slide 8 text

Cloud Firestoreͱ͸ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε

Slide 9

Slide 9 text

Cloud Firestoreͱ͸ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε

Slide 10

Slide 10 text

Cloud Firestoreͱ͸ • Firebase͕ఏڙ͢ΔNoSQLσʔλϕʔε

Slide 11

Slide 11 text

Firestoreͷಛ௃ • JSONϥΠΫͳσʔλܗࣜ • ϦΞϧλΠϜʹσʔλΛอଘɾಉظ • αʔόϨε • ଞͷFirebaseαʔϏεͱڧྗͳ࿈ܞ

Slide 12

Slide 12 text

JSONϥΠΫͳσʔλܗࣜ • εΩʔϚϨε • ίϨΫγϣϯ/υΩϡϝϯτ • ίϨΫγϣϯ:
 υΩϡϝϯτΛ·ͱΊͨ΋ͷ • υΩϡϝϯτ:
 σʔλΛอ࣋͢Δ΋ͷ

Slide 13

Slide 13 text

JSONϥΠΫͳσʔλܗࣜ

Slide 14

Slide 14 text

JSONϥΠΫͳσʔλܗࣜ ίϨΫγϣϯ υΩϡϝϯτ

Slide 15

Slide 15 text

JSONϥΠΫͳσʔλܗࣜ υΩϡϝϯτ ίϨΫγϣϯ (αϒίϨΫγϣϯ)

Slide 16

Slide 16 text

JSONϥΠΫͳσʔλܗࣜ • ಡΈऔΓ͸ίϨΫγϣ ϯ/υΩϡϝϯτ୯Ґ • Լ૚ͷαϒίϨΫγϣ ϯ·ͰҰ౓ʹऔΔ͜ ͱ͸Ͱ͖ͳ͍

Slide 17

Slide 17 text

JSONϥΠΫͳσʔλܗࣜ • શσʔλΛऔಘ 1. countriesίϨΫγϣ ϯͷσʔλΛऔಘ

Slide 18

Slide 18 text

JSONϥΠΫͳσʔλܗࣜ • શσʔλΛऔಘ 1. countriesίϨΫγϣ ϯͷσʔλΛऔಘ 2. υΩϡϝϯτͦΕͧ Εʹରͯ͠citiesί ϨΫγϣϯͷσʔλ Λऔಘ

Slide 19

Slide 19 text

ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} )

Slide 20

Slide 20 text

ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} ) {name: UK} Λ௥Ճ

Slide 21

Slide 21 text

{name: UK} Λ௥Ճ ϦΞϧλΠϜʹσʔλΛอଘɾಉظ add( {name: UK} ) event:add
 {name: UK} event:add
 {name: UK}

Slide 22

Slide 22 text

αʔόϨε • αʔό؅ཧෆཁ • ߴՄ༻ੑ/ߴεέʔϥϏϦςΟ • ΫϥΠΞϯτίʔυͷΈͰ׬݁

Slide 23

Slide 23 text

ଞͷFirebaseαʔϏεͱڧྗͳ࿈ܞ • Firebase Authentication • Ϣʔβೝূػೳ(ϝʔϧ, Google, Facebook, etc..) • ೝূͨ͠Ϣʔβͷݖݶઃఆ • Cloud Functions • JavaScriptͷؔ਺ΛΫϥ΢υ্Ͱ࣮ߦ • Firestoreͷॻ͖ࠐΈ΍HTTPϦΫΤετΛ
 τϦΨʔʹ࣮ͯ͠ߦ͢Δ͜ͱ͕Մೳ

Slide 24

Slide 24 text

ηΩϡϦςΟϧʔϧ

Slide 25

Slide 25 text

ϧʔϧ • ಡΈऔΓ΍ॻ͖ࠐΈͷݖݶΛઃఆ͢Δػೳ • Firebase Authenticationͱ૊Έ߹ΘͤΔ͜ͱ͕Մೳ • ೝূػೳ • Google, Facebook, TwitterͳͲ • ࡉ͔ͳόϦσʔγϣϯ • จࣈ਺੍ݶ • εΩʔϚఆٛ

Slide 26

Slide 26 text

ϧʔϧ • REST API or Firebaseͷίϯιʔϧ͔Βઃఆ

Slide 27

Slide 27 text

͢΂ͯͷಡΈऔΓɾॻ͖ࠐΈ͸ೝূඞਢ

Slide 28

Slide 28 text

͢΂ͯͷಡΈऔΓɾॻ͖ࠐΈ͸ೝূඞਢ ͓·͡ͳ͍

Slide 29

Slide 29 text

͢΂ͯͷಡΈऔΓɾॻ͖ࠐΈ͸ೝূඞਢ πϦʔͷ
 rootΛࣔ͢

Slide 30

Slide 30 text

͢΂ͯͷಡΈऔΓɾॻ͖ࠐΈ͸ೝূඞਢ ೝূͨ͠ΒಡΈऔΓɾ ॻ͖ࠐΈΛڐՄ

Slide 31

Slide 31 text

εΩʔϚఆٛ

Slide 32

Slide 32 text

εΩʔϚఆٛ nameͷཁૉ͕ඞਢ

Slide 33

Slide 33 text

έʔεελσΟɿ ෳ਺෦԰νϟοτΞϓϦͷ
 DBɾϧʔϧઃܭ

Slide 34

Slide 34 text

σϞ https://github.com/TetsuyaNegishi/simple-chat

Slide 35

Slide 35 text

DBઃܭ • rooms͕ෳ਺ • Ұͭͷroomʹରͯ͠comment͕ෳ਺ • ίϝϯτʹ͸Ϣʔβͷ৘ใΛ΋ͨͤΔ

Slide 36

Slide 36 text

DBઃܭ - ৑௕Խܕ rooms: { // collection roomId: { // document name: comments: { // collection commentId: { //document comment: user: { name:, id: } } } } }

Slide 37

Slide 37 text

DBઃܭ - ৑௕Խܕ • user৘ใ͸৑௕Խ͢Δ • ϝϦοτ • ॻ͖ࠐΈָ͕ • ಡΈࠐΈ͕গͳ͍ • σϝϦοτ • user৘ใͷ੔߹ੑ͕ อͯͳ͍ • user৘ใ͕৑௕ rooms: { // collection roomId: { // document name: comments: { // collection commentId: { //document comment: user: { name:, id: } } } } }

Slide 38

Slide 38 text

DBઃܭ - ࢀরܕ • usersίϨΫγϣϯΛ
 ࢀর • ϝϦοτ • user৘ใͷ੔߹ੑ • user৘ใ͕؆ܿ • σϝϦοτ • ಡΈࠐΈճ਺͕૿Ճ • ॻ͖ࠐΈ͕൥ࡶ rooms: { // collection … commentId: { //document comment: user: { /users/userId} } … } users: { userId: {name:} }

Slide 39

Slide 39 text

ൺֱ ಡΈऔΓճ਺ σʔλ੔߹ੑ ΫϥΠΞϯτί ʔυͷ؆ܿ͞ ৑௕Խܕ গͳ͍ º ˓ ࢀরܕ ଟ͍ ˓ ˚ • ΫϥΠΞϯτଆͷίʔυΛγϯϓϧʹ͍ͨ͠ • Ϣʔβͷ৘ใ͸มԽ͠ͳ͍ͱԾఆ ࠾༻

Slide 40

Slide 40 text

ϧʔϧઃܭ • ಡΈऔΓ͸୭Ͱ΋Ͱ͖ΔΑ͏ʹ͍ͨ͠ɻ • ϧʔϜͷ࡞੒΍ίϝϯτͷॻ͖ࠐΈ͸ೝূඞਢɻ • ίϝϯτͷฤू͸ࣗ෼ͷ΋ͷ͚ͩՄೳɻ • ϧʔϜͷ࡟আ, ฤू͸ෆՄ

Slide 41

Slide 41 text

ϧʔϧઃܭ - roomsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId} • read: ୭Ͱ΋OK • create: ೝূඞਢ • update, delete: ෆՄ

Slide 42

Slide 42 text

ϧʔϧઃܭ - commentsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId}/comments/{commentId} • read: ୭Ͱ΋OK • create: ೝূඞਢ • update, delete:ޙड़

Slide 43

Slide 43 text

ϧʔϧઃܭ - commentsͷಡΈऔΓɾฤूݖݶ • rooms/{roomId}/comments/{commentId} • update, delete: ࣗ෼͕౤ߘͨ͠΋ͷ͸Մ

Slide 44

Slide 44 text

ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ

Slide 45

Slide 45 text

ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ commentsίϨΫγϣϯͷ
 υΩϡϝϯτ͕มߋ͞ΕΔͱؔ਺͕࣮ߦ

Slide 46

Slide 46 text

ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ Ҿ਺ʹ౉͞ΕΔσʔλ͸Ϧετ

Slide 47

Slide 47 text

ΫϥΠΞϯτίʔυ - σʔλͷಡΈऔΓ change.type͕addedͷ৔߹ ը໘ʹ൓ө

Slide 48

Slide 48 text

Realtime Databaseͱͷൺֱ

Slide 49

Slide 49 text

Realtime Databaseͱ͸ • Realtime Database • NoSQLσʔλϕʔε • ҰຕͷJSON • FirestoreΑΓ΋ઌʹϦϦʔε

Slide 50

Slide 50 text

ൺֱ • Realtime Database • ྉ͕͍ۚ҆(͜ͱ͕ଟ͍) • ·ͱΊͯσʔλΛऔಘ͢Δ͜ͱ͕༰қ • Cloud Firestore • σʔλͷ੔ཧ͕͠΍͍͢(αϒίϨΫγϣϯ) • ॊೈͳΫΤϦ • σʔλऔಘͷ৚݅Λࡉ͔͘ઃఆՄೳ • Realtime Database͔ΒڧԽ͞Ε͍ͯΔ

Slide 51

Slide 51 text

ྉۚ ແྉ࿮ ैྔ੍ 3FBMUJNF%BUBCBTF
 (#μ΢ϯϩʔυࡁΈ (#݄ (# 'JSFTUPSF
 %PDVNFOUTSFBE ສ೔ , σʔλྔ
 ʹରͯ͠՝ۚ ಡΈऔΓճ਺
 ʹରͯ͠՝ۚ

Slide 52

Slide 52 text

ྉۚ 0.1KBͷσʔλ

Slide 53

Slide 53 text

ྉۚ 0.1KBͷσʔλ • Realtime Database • 0.1KBΛμ΢ϯϩʔυ • Firestore • 5ͭͷυΩϡϝϯτ
 Λreadͨ͠ͱΧ΢ϯτ

Slide 54

Slide 54 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • 1ಡΈऔΓͰ1readΧ΢ϯτͱצҧ͍ • 3ສPV/೔ͷϖʔδʹFirestoreΛ࢖༻ˠ੍ݶʹҾ͔͔ͬΔ

Slide 55

Slide 55 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ Firestore Realtime Database New Data New Data PVͷଟ͍ϖʔδ PVͷগͳ͍ϖʔδ • ͳΜͱ͔ແྉ࿮ʹऩΊ͍ͨ • ಡΈऔΓΛ෼ࢄͤͯ͞ແྉ࿮ʹऩΊΔ Cloud Functions

Slide 56

Slide 56 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions

Slide 57

Slide 57 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions σʔλ͕create͞ ΕΔ͜ͱΛ؂ࢹ

Slide 58

Slide 58 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ • Cloud Functions Realtime Databaseʹσʔλ௥Ճ

Slide 59

Slide 59 text

ϓϩμΫγϣϯ؀ڥʹద༻ͨ͠ͱ͖ͷͰ͖͝ͱ ࣮ଌ஋ ແྉ࿮ 3FBMUJNF%BUBCBTF .#೔ (#݄ 'JSFTUPSF ສ೔ ສ೔

Slide 60

Slide 60 text

·ͱΊ

Slide 61

Slide 61 text

·ͱΊ • Firestore͸JSONϥΠΫͳσʔλܗࣜΛ΋ͬͨNoSQL • ΫϥΠΞϯτͷίʔυͷΈͰϦΞϧλΠϜʹ
 σʔλΛอଘɾಉظͰ͖Δ • ଞͷFirebaseαʔϏεͱ૊Έ߹ΘͤΔ͜ͱͰ
 ߴ౓ͳ͜ͱ΋Մೳ

Slide 62

Slide 62 text

Thank youʂ