Slide 1

Slide 1 text

##اۀ͕$MPVE'VODUJPOTͰ $$αʔϏεΛ্ཱͪ͛ͨ࿩

Slide 2

Slide 2 text

##اۀ͕$MPVE'VODUJPOTͰ $$αʔϏεʹ௅Μͩ࿩

Slide 3

Slide 3 text

w͜Ε͔ΒαʔόʔϨεʹνϟϨϯδ͍ͨ͠ํ ·ͣ͸͡Ίʹର৅ऀ w'JSFCBTF$MPVE'VODUJPOTʹڵຯ͕͋Δํ

Slide 4

Slide 4 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 5

Slide 5 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 6

Slide 6 text

੢෢࢙ גࣜձࣾEJ⒎FBTZ
 औక໾$50 !@UBLFTIJ@ 4*FSͰ೥ؒओʹۀ຿γεςϜͷ
 ։ൃ ౦ژͰDPGPVOEFSͱͯ͠*5
 ϕϯνϟʔ্ཱͪ͛ ϑϦʔϥϯεϓϩάϥϚʔͱͯ͠
 ಠཱ ೥EJ⒎FBTZʹδϣΠϯ $50ͱͯ͠*5ͷྗͰ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ
 ͢΂͘׆ಈத ˡࠓ͜͜

Slide 7

Slide 7 text

ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ

Slide 8

Slide 8 text

ΦʔμʔϝΠυ डୗ։ൃ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

೥
 શࠃن໛େձಋೖ ` `

Slide 11

Slide 11 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 12

Slide 12 text

UP#डୗͰͷҰൠతͳαʔόʔߏ੒

Slide 13

Slide 13 text

$MPVE
 %/4 $MPVE
 $%/ $MPVE
 -PBE #BMBODJOH $PNQVUF &OHJOF $PNQVUF &OHJOF $MPVE
 42- $MPVE
 4UPSBHF w ϑϩϯτΤϯυϓϩάϥϜ w ը૾ͳͲ੩తίϯςϯπ w ن໛ʹԠͯ͡ෛՙ෼ࢄ w όοΫΤϯυϓϩάϥϜ w ن໛ʹԠͯ͡ෳ਺୆ߏ੒ w ϩάϑΝΠϧ w ಈతϑΝΠϧ $MPVE
 .FNPSZTUPSF w 3FEJT w %#

Slide 14

Slide 14 text

αόʔϨεͱͷग़ձ͍

Slide 15

Slide 15 text

Google͕ఏڙ͢ΔBaaS(Backend as a Service) 2011೥ʹFirebase, Inc.ʹΑͬͯ։ൃ 2014೥ʹGoogleʹങऩ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ࣗࣾαʔϏεͰͷ࠾༻

Slide 18

Slide 18 text

໨ඪୡ੒Ϛϯμϥʔτ ࣗ૸ܕ૊৫Λ໨ࢦ͢اۀͷͨΊͷνʔϜ໨ඪୡ੒πʔϧ

Slide 19

Slide 19 text

w ࢢ৔ͷχʔζ͕ෆ໌֬ w ࠷খͷਓ਺ίετظؒͰ௅Έ͍ͨ w ΠϯϑϥΤϯδχΞ͍ͳ͍ ͳͥ'JSFCBTFΛ࠾༻

Slide 20

Slide 20 text

'JSFCBTFͷߏ੒ 7VFKT
 ͷ41"

Slide 21

Slide 21 text

w ೔ʑมΘΔཁ݅΁ͷॊೈͳରԠ w 3%#೴Ͱͷ/P42-ઃܭˠඇਖ਼نԽ͕伴 w Ϩεϙϯε͕஗͍ˠແବͳΫΤϦൃߦ w ؅ཧπʔϧ͕ͳ͍ w ϚΠάϨʔγϣϯ͕େม ग़͖ͯͨ՝୊

Slide 22

Slide 22 text

ྫ͑͹ɾɾɾ ೔ʑมΘΔཁ݅΁ͷॊೈͳରԠ w ࠷ॳ͸Ϛϯμϥʔτ͕ొ࿥ɾߋ৽Ͱ͖Ε͹ྑ͍ɻ w ໨ඪʹରͯ͠ίϝϯτ͍ͨ͠ɻ w ίϝϯτʹର͍͍ͯ͠Ͷʂ͍ͨ͠ɻ w ϚϯμϥʔτͱίϝϯτΛλΠϜϥΠϯʹग़͍ͨ͠ɻ w ෦ॺ͝ͱʹϢʔβʔΛ؅ཧ͍ͨ͠ɻ

Slide 23

Slide 23 text

'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" Cloud SQL

Slide 24

Slide 24 text

4FSWFSMFTT71$"DDFTTЌ൛

Slide 25

Slide 25 text

3%#ͱ/P42- 3%# 'JSFTUPSF ෳࡶͳߏ଄ͷσʔλ ୯७ͳߏ଄ͷσʔλ ݫີͳҰ؏ੑ͕ඞཁͳσʔλ ετοΫ͍ͯ͘͠σʔλ ߋ৽ɾ࡟আɾ෇͚ସ͕͑ଟ͍ ୯७ͳऔಘ

Slide 26

Slide 26 text

ΩϟϯϖʔϯαΠτͷ૬ஊ

Slide 27

Slide 27 text

w ୹ೲظ w ֬ఆͨ͠ཁ݅ w ΞΫηε਺ͷ༧ଌෆೳ w $.౳ʹΑΓॠؒతʹΞΫηε૿Ճ w ػೳ͸γϯϓϧʢΩϟϯϖʔϯίʔυൃߦʣ w γεςϜ͕ࢭ·ͬͨΒ౰વΫϨʔϜ ΩϟϯϖʔϯαΠτͷ૬ஊ

Slide 28

Slide 28 text

'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" ֎෦"1* ֎෦"1*ೝূΩʔ

Slide 29

Slide 29 text

w େྔͷΩϟϯϖʔϯίʔυΛϚελʔొ࿥͢Δͷʹ ࣌ؒΛཁ͢Δ
 ˠ'JSFTUPSF΁ͷσʔλ౤ೖ͸౓ʹ্͕݅ݶ w Ωϟϯϖʔϯͷ൓ԠʹΑͬͯ௥ՃͰສ݅୯Ґ ͰΩϟϯϖʔϯίʔυ͕ૹΒΕͯ͘Δ ग़͖ͯͨ՝୊

Slide 30

Slide 30 text

'JSFCBTFͷߏ੒ 7VFKT
 ͷ41" Cloud SQL ֎෦"1* ֎෦"1*ೝূΩʔ

Slide 31

Slide 31 text

w $MPVE42-͕ϘτϧωοΫʹ w $MPVE'VODUJPOTʹΑͬͯɺॊೈʹରԠͰ ͖ͨ w γϯϓϧͳػೳͩͬͨͷͰɺߴ଎ʹߏஙͰ͖ͨ w ҆ఆՔಇͰɺ͓٬༷΋ຬ଍ ৼΓฦΓ

Slide 32

Slide 32 text

$UP$ࣗࣾαʔϏε΁ͷ௅ઓ

Slide 33

Slide 33 text

࡞ͬͨ$UP$αʔϏε Ձ஋ڞײ͢Δਓ͕ͨͪܨ͕Δ
 ϚονϯάϓϥοτϑΥʔϜ • Ϣʔβʔ/ϓϩϑΟʔϧొ࿥ • νϟοτ • νϟοτͷ΍ΓͱΓͰ਌ີ౓UP • ਌ີ౓͕͕͋Δͱ༑ୡͱͯ͠ܨ͕Δ

Slide 34

Slide 34 text

࡞ͬͨ΋ͷͷɾɾ৭ʑ͋Γ·ͨ͠ɾɾ

Slide 35

Slide 35 text

<൪֎ฤ-5> डୗاۀ͕ ৽نαʔϏεΛ ্ཱͪ͛Δ࣌͸ ͜͜ʹؾΛ͚ͭΖʂ

Slide 36

Slide 36 text

ࣾձ৘੎ ΠϯλʔωοτͰͷग़ձ͍͕ ࣾձ໰୊ʹɾɾ

Slide 37

Slide 37 text

ͳΜͰࠓͦΕ΍Δͷʁ डୗνʔϜͱ৽نαʔϏενʔϜʹ ෼͚ͯΈͨ wԿΛ΍͍ͬͯΔͷ͔Α͘Θ͔Βͳ͍ɾɾʁ wͳΜͰࠓ΍Δඞཁ͕͋Δͷɾɾʁ ͳΜ͔ͪΐͬͱ͗͘͠Ό͘ɾɾɾ

Slide 38

Slide 38 text

՝୊ղܾܕͱ՝୊ൃݟܕ ՝୊ղܾܕ ՝୊ൃݟܕ w ՝୊͕໌֬ w ΍Δҙٛ΍ɺ΍ͬͨ݁ՌͷมԽ͕૝૾͠΍͍͢ w ʮ՝୊ʯ͕ԾઆͰ͋Γɺෆ໌֬ νʔϜҎ֎ͷϝϯόʔͷೲಘײ
 ͕ඞཁ

Slide 39

Slide 39 text

εϐʔυͱೲಘײ w εϐʔσΟʹࣄۀΛਐΊΔͨΊʹϝϯόʔͷ
 ೲಘײ͕େࣄ w ೲಘײ㱠શһࢍ੒ w ఆظతͳঢ়گͷڞ༗͕େࣄ w ԿΛ΍͍ͬͯΔ͔ʁ w ࠓޙͲͷΑ͏ʹਐΊΔ͔ʁ w ఫୀͷϙΠϯτ͸ʁ

Slide 40

Slide 40 text

Ұ୴ετοϓɻ

Slide 41

Slide 41 text

໭Γ·͢ɾɾ

Slide 42

Slide 42 text

w $UP$͸ະ஌ͷྖҬ w ΞΫηε਺͕༧ଌෆՄೳ w ࢢ৔ͷχʔζ͕ෆ໌֬ w ࠷খͷਓ਺ίετظؒͰ௅Έ͍ͨ w ·ͣ͸.71Ͱࣄۀݕূ w ΠϯϑϥΤϯδχΞ͍ͳ͍ ͳͥ'JSFCBTF$MPVE'VODUJPOTΛ࠾༻

Slide 43

Slide 43 text

αʔϏεͷߏ੒ 7VFKT
 ͷ41" Cloud SQL ϦΞϧλΠϜσʔλ ୯७ʹετοΫ
 ͍ͯ͘͠σʔλ ؔ܎ੑΛ࣋ͭ
 σʔλ

Slide 44

Slide 44 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 45

Slide 45 text

։ൃʹ͍ͭͯͷϙΠϯτղઆ

Slide 46

Slide 46 text

'JSFCBTF"VUIFOUJDBUJPOͰ ϩάΠϯ࣮૷

Slide 47

Slide 47 text

'JSFCBTF"VUIFOUJDBUJPOͰ؆୯ೝূ ϝʔϧ ύεϫʔυೝূ΍
 ֤छ 4/4ೝূ͕؆୯

Slide 48

Slide 48 text

'JSFCBTF6*ͰϩάΠϯը໘΋ import FirebaseAuth ɹɹ from "@/components/FirebaseAuth"; export default { name: "Login", components: { FirebaseAuth } };

Slide 49

Slide 49 text

'JSFCBTF6*ͰϩάΠϯը໘΋

Slide 50

Slide 50 text

3FBMUJNF%BUBCBTFͰ ϦΞϧλΠϜνϟοτ

Slide 51

Slide 51 text

3FBMUJNF%BUBCBTF'JSFTUPSF • ଟ࠼Ͱߴ଎ͳΫΤϦ • ࣗಈͰεέʔϧ • ެࣜαΠτͰਪ঑ • γϯϓϧͳσʔλΛ
 ؆୯ʹอଘ • ϨΠςϯγ͕ඇৗʹ௿͍ • සൟͳঢ়ଶಉظʹ࠷ద

Slide 52

Slide 52 text

firebase .database() .ref("messages") .push( { messageText: this.messageText, uid: this.uid } ); σʔλͷ௥Ճ

Slide 53

Slide 53 text

σʔλ͕௥Ճ͞Ε͍ͯΔ͜ͱΛ֬ೝ

Slide 54

Slide 54 text

firebase .database() .ref("messages") .on("child_added", snapshot => { this.messages.unshift(snapshot.val()); }); σʔλͷϦΞϧλΠϜߋ৽

Slide 55

Slide 55 text

σʔλͷϧʔϧ

Slide 56

Slide 56 text

σʔλͷϧʔϧઃఆ͸ࡉ৺ͷ஫ҙΛ ΫϥΠΞϯτ͔Β௚઀σʔλΛߋ৽ ِ૷Մೳ 3FBMUJNF%BUBCBTF'JSFTUPSFଆͰϧʔϧ؅ཧ

Slide 57

Slide 57 text

σʔλͷϧʔϧઃఆ͸ࡉ৺ͷ஫ҙΛ match /databases/{database}/documents { match /users/{uid} { allow update, delete: if request.auth.uid == uid; allow create, read : if request.auth.uid != null; } match /messages/{uid} { allow update, delete: if request.auth.uid == uid; allow create, read: if request.auth.uid != null; } }

Slide 58

Slide 58 text

$MPVE'VODUJPOTͷ࣮ߦ

Slide 59

Slide 59 text

$MPVE'VODUJPOTͷ࣮ߦ exports.hello = https.onCall(async (data, context) => { }); exports.updateUser = https.onCall(async (data, context) => { }); exports.getUser = https.onCall(async (data, context) => { }); exports.sendPushMessage = firestore .document(“messages/{userId}") .onWrite(async (change, context) => { }); JOEFYKT

Slide 60

Slide 60 text

$MPVE'VODUJPOTͷ࣮ߦ σϓϩΠ

Slide 61

Slide 61 text

$MPVE'VODUJPOTͷ࣮ߦ const hello = functions.httpsCallable("hello"); const result = await hello({ name: "takeshi" }); this.message = result.data.message; ΫϥΠΞϯταΠυ exports.hello = https.onCall((data, context) => { return { message: `Hello, ${data.name}.`, uid: context.auth.uid }; }); αʔόʔαΠυ OPEFKT ೝূ৘ใͷऔಘ΋؆୯

Slide 62

Slide 62 text

τϦΨʔͷར༻

Slide 63

Slide 63 text

'JSFTUPSFߋ৽ΛτϦΨʔʹ௨஌ exports.sendPushMessage = firestore .document("messages/{userId}") .onWrite(async (change, context) => { const data = change.after.data(); const previousData = change.before.data(); const userRef = await admin .firestore() .collection("users") .doc(context.params.userId); const userDoc = await userRef.get(); ߋ৽લޙͷ஋औಘ

Slide 64

Slide 64 text

'JSFTUPSFߋ৽ΛτϦΨʔʹ௨஌ const payload = { notification: { title: "௨஌λΠτϧ", body: "௨஌ຊจ" } }; admin .messaging() .sendToDevice(user.fcmToken, payload); ϓογϡ௨஌ૹ৴

Slide 65

Slide 65 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 66

Slide 66 text

w ϓϩμΫτཁ݅ͷ։ൃʹूதͰ͖ͨ w ೝূपΓͷॲཧ͕؆୯ w ̍ॲཧɿ̍ؔ਺ͳͷͰɺυϝΠϯΛ·͕ͨͳ͍ɺ ϚΠΫϩαʔϏεతͳͭ͘ΓΛҙࣝͰ͖ͨ ϝϦοτ

Slide 67

Slide 67 text

w ϕϯμʔϩοΫΠϯ w ྉۚͷ༧ଌ͕೉͍͠ɾා͍ w σʔλϕʔεϧʔϧͷઃఆ࿙ΕͳͲ஫ҙ σϝϦοτ

Slide 68

Slide 68 text

wࣗݾ঺հձࣾ঺հ wαʔόʔϨε΁ͷาΈ w$MPVE'VODUJPOTͱ'JSFCBTF wϝϦοτσϝϦοτ w࠷ޙʹ

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

EJ⒎FBTZ$50੢ͷ
  ʹ͠ ೔࿈ଓ౤ߘνϟϨϯδ
 "EWFOU$BMFOEBS ઈࢍެ։தʂ ޙչ

Slide 71

Slide 71 text

NBLFEJ⒏DVMUUIJOHTFBTZ ੈքதͷzΉ͔͍ͣ͠zΛ؆୯ʹ