JavaScriptから使うFirebase

FirebaseをWebページのJavaScriptで使う方法の概説です。

Transcript

1. +BWB4DSJQU͔Βར༻͢Δ
   'JSFCBTF !TIJNPLBXB
   
2. Լ઒୓࣏ !TIJNPLBXB ෱Ԭ
   ˠ
   ژ౎
   ˠ
   ౦ژ ࠷ۙ͸8FCΞϓϦ։ൃ͕ଟ͍ 3VCZ
   +BWB4DSJQU
   +BWB
   $$
3. ໨࣍ w σʔλͷಡΈॻ͖
   w ϗεςΟϯά
   w Ϣʔβೝূ
   w ΦϑϥΠϯରԠ
   w ࣮ࡍʹ࢖ͬͯΈͯͷײ૝ͳͲ
4. σʔλͷಡΈॻ͖
5. ࢖༻४උ <script src='https://cdn.firebase.com/js/client/2.4.1/firebase.js'></script> ΫϥΠΞϯτϥΠϒϥϦΛΠϯΫϧʔυ
6. 'JSFCBTFͷσʔλ͸̍ͭͷ+40/ΦϒδΣΫτ { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "name" : "shimo", "text" : "͜Μʹͪ͸" }, "-KBmsPV_vfbOfsRKNqQr" : { "name" : "shimo", "text" : "͜Μ͹Μ͸" } } }
7. σʔλϕʔεͷࢀরͷऔಘ // JSONΦϒδΣΫτͷϧʔτͷࢀর var rootRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/“); // ϧʔτͷ௚Լʹ͋ΔmessagesΩʔࢀর var messageRef = rootRef.child("messages"); // ϧʔτͷ௚Լʹ͋ΔmessagesΩʔࢀর var messagesRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/messages"); ࢀর͸ɺ+40/πϦʔ্ͷಛఆͷ৔ॴΛࢦࣔ͢͠΋ͷ σʔλͷಡΈॻ͖͢Δʹ͸·ͣࢀরΛऔಘ͢Δ
8. σʔλͷอଘํ๏ w ࢀরΦϒδΣΫτͷϝιουΛ࢖͏
   w TFU
   w VQEBUF
   w QVTI
   w USBOTBDUJPO
9. TFU w جຊతͳอଘํ๏
   w ࢀর͕ࣔ͢Ωʔʹର͢Δ஋શମΛ্ॻ͖͢Δ
   w ࢀর͕ࣔ͢Ωʔ͕ଘࡏ͠ͳ͍৔߹͸Ωʔ͝ͱ࡞੒͢Δ
10. { "users" : { "taro" : { "name" : "Taro", "age" : 30 } } } var userRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/users/taro"); userRef.set({name: "Taro", age: 30}); อଘޙͷσʔλϕʔεͷ಺༰
11. QVTI w ࢀর͢Δ৔ॴͷ௚ԼʹҰҙͳΩʔΛੜ੒্ͨ͠Ͱɺ
 ͦͷΩʔʹରͯ͠஋Λอଘ͢Δ
    w Ωʔ͸λΠϜελϯϓ͔Β࡞ΒΕΔͷͰɺ࣌ؒॱʹͳΔ
    w ࢀর͕ࣔ͢৔ॴʹϦετσʔλΛอଘ͢Δͷʹ࢖͏
12. var messagesRef = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages"); messagesRef.push({name: "Taro", text: “Goodbye"}); { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "name" : "Taro", "text" : "Hello" }, "-KBmsPV_vfbOfsRKNqQr" : { "name" : "Taro", "text" : "Goodbye" } } } ߋ৽ޙͷσʔλϕʔεͷঢ়ଶ ࣗಈੜ੒͞ΕΔ
13. σʔλͷಡΈग़͠ํ๏ w ࢀরʹίʔϧόοΫؔ਺Λొ࿥͢Δ
    w PO lΠϕϯτछผz
    DBMMCBDL
    w PODF lΠϕϯτछผz
    DBMMCBDL
    w Πϕϯτͷछྨ
    w WBMVF
    w DIJME@BEEFE
    w DIJME@DIBOHFE
    w DIJME@SFNPWFE
    w DIJME@NPWFE
14. PO lWBMVFz
    DBMMCBDL w ࢀর͕ࣔ͢৔ॴҎԼͷ஋Λ·Δ͝ͱऔಘ͢Δ
    w ͦͷޙɺࢀরઌͷσʔλ͕ߋ৽͞ΕΔͨͼʹ
 ܁Γฦ͠ίʔϧόοΫؔ਺ʹߋ৽ޙͷσʔλ͕౉͞ΕΔ
15. { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "name" : "Taro", "text" : "Hello" }, "-KBmsPV_vfbOfsRKNqQr" : { "name" : "Taro", "text" : "Goodbye" } } } var ref = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages"); ref.on("value", function(snapshot) { console.log(snapshot.val()); }); σʔλϕʔεͷ಺༰ TOBQTIPUWBM ίʔϧόοΫʹ౉͞ΕΔͷ͸%BUB4OBQTIPUܕͷΦϒδΣΫτ
    IUUQTXXXpSFCBTFDPNEPDTXFCBQJEBUBTOBQTIPU
16. PO lDIJME@BEEFEz
    DBMMCBDL w ࢀরͷࢠϊʔυΛҰͭͣͭॱ൪ʹऔಘ͢Δ
    w యܕతʹ͸ɺQVTI Ͱ࡞ΒΕͨϦετΛࢦࣔ͢͠ࢀর͔Βɺ
 ͦͷϦετͷ߲໨Λॱʹऔಘ͢Δ
    w طଘͷσʔλ͕͋Δ৔߹͸ɺҰ௨ΓσʔλΛಡΈग़͢
    w ͦͷޙɺࢠϊʔυ͕௥Ճ͞ΕΔͨͼʹɺίʔϧόοΫ͕
 ݺ͹ΕΔ
17. var ref = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages"); ref.on(“child_added", function(snapshot) { console.log(snapshot.val()); }); σʔλϕʔεͷ಺༰ { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "name" : "Taro", "text" : "Hello" }, "-KBmsPV_vfbOfsRKNqQr" : { "name" : "Taro", "text" : "Goodbye" } } } TOBQTIPUWBM
18. ͦͷଞͷΠϕϯτ w PO lDIJME@DIBOHFEz
    DBMMCBDL
    w ࢀরͷࢠϊʔυͷ஋͕มԽͨ࣌͠ʹίʔϧόοΫ͕ݺ͹ΕΔ
    w PO lDIJME@SFNPWFEz
    DBMMCBDL
    w ࢀরͷࢠϊʔυ͕࡟আ͞Εͨ࣌ʹίʔϧόοΫ͕ݺ͹ΕΔ
    w PO lDIJME@NPWFEz
    DBMMCBDL
    w Ϧετσʔλ಺ͰͷࢠϊʔυͷҐஔ͕มԽͨ͠Βݺ͹ΕΔ
    w Ϧετ಺Ͱͷॱং͕มΘΔͷ͸QSJPSJUZ͕มԽͨ࣌͠
19. αϯϓϧɿνϟοτͷΑ͏ͳ΋ͷ IUUQTXJJVpSFCBTFBQQDPNUPZ@DIBUIUNM
20. Ϧετσʔλऔಘ࣌ͷ৚݅௥Ճ w ฒͼॱͷࢦఆ
    w PSEFS#Z$IJME
    w PSEFS#Z,FZ
    w PSEFS#Z7BMVF
    w PSEFS#Z1SJPSJUZ
    w औಘ݅਺ͷ੍ݶ
    w MJNJU5P'JSTU
    w MJNJU5P-BTU
    w ൣғͷࢦఆ
    w TUBSU"U
    w FOE"U
    w FRVBM5P ref.orderByPriority() .startAt(100) .limitToFirst(20) .once('value', function(snapshot) { console.log(snapshot.val()); }); ࢖༻ྫ
21. αϯϓϧɿ IUUQTXJJVpSFCBTFBQQDPNQBHJOBUJPOIUNM աڈͷϝοηʔδΛগͣͭ͠औಘ͢ΔΑ͏मਖ਼ͨ͠΋ͷ
22. ϗεςΟϯά
23. ϗεςΟϯά w )5.-ϑΝΠϧΛ'JSFCBTFͷαʔόʹஔ͍ͯެ։Ͱ͖Δ
    w IUUQT\ΞϓϦέʔγϣϯ*%^pSFCBTFBQQDPN
    w ༗ྉͰಠࣗυϝΠϯʹͰ͖Δ ઌ΄Ͳͷαϯϓϧ΋͜ΕΛ࢖͍ͬͯ·͢
24. ϗεςΟϯά
    खॱ $ npm install -g firebase-tools $ firebase init $ firebase deploy ίϚϯυϥΠϯπʔϧΛΠϯετʔϧ͢Δ ϓϩδΣΫτͷσΟϨΫτϦΛॳظԽ͢Δ ࢖༻͢Δ'JSFCBTFΞϓϦέʔγϣϯΛબ୒͢Δ ॳճ࣮ߦ࣌ʹ͸ઌʹϩάΠϯ͢ΔΑ͏ٻΊΒΕΔ ϓϩδΣΫτΛެ։͢Δ IUUQT\ΞϓϦέʔγϣϯ*%^pSFCBTFBQQDPN
    ʹެ։͞ΕΔ pSFCBTFίϚϯυ͕࢖͑ΔΑ͏ʹͳΔ ઃఆϑΝΠϧ
    pSFCBTFKTPO
    ͱɺ)5.-ϑΝΠϧ౳Λஔ͘σΟϨΫτϦ͕࡞੒͞ΕΔ
    
    
25. Ϣʔβʔೝূ
26. ηΩϡϦςΟʹؔ͢ΔτϐοΫ w Ϣʔβೝূ
    w &ϝʔϧˍύεϫʔυ
    w 0"VUI
    'BDFCPPL
    5XJUUFS
    (JU)VC
    (PPHMF
    w ಗ໊
    w ΧελϜ
    w ΞΫηεݖݶͷઃఆ
    w ೖྗσʔλͷݕূ
27. ࢖༻४උ -PHJO
    
    "VUI
    ϖʔδͷ
    &NBJM
    
    1BTTXPSEʹ͋Δ
    &OBCMF
    &NBJM
    
    1BTTXPSE
    "VUIFOUJDBUJPO
    ʹνΣοΫΛೖΕΔ
28. ೝূػೳΛ࢖ͬͨαϯϓϧ IUUQTXJJVpSFCBTFBQQDPNBVUI@SFRVJSFEIUNM
29. ը໘ߏ੒ͱ࢖༻͢Δ"1* w Ϣʔβొ࿥ը໘
    w createUser()
    Λ࢖ͬͯϢʔβΛ࡞੒
    w ϩάΠϯը໘
    w authWithPassword()
    Λ࢖ͬͯϩάΠϯॲཧ
    w ೝূ͕ඞཁͳը໘
    w getAuth()
    Λ࢖ͬͯϩάΠϯத͔൱͔ΛνΣοΫ
30. ͦͷଞͷϢʔβʔೝূؔ࿈"1* VOBVUI ϩάΞ΢τ DIBOHF&NBJM ϝʔϧΞυϨεมߋ DIBOHF1BTTXPSE ύεϫʔυมߋ SFTFU1BTTXPSE ύεϫʔυͷϦηοτ SFNPWF6TFS Ϣʔβʔͷ࡟আ
31. ΦϑϥΠϯରԠ
32. var ref = new Firebase(‘https://<YOUR-APP-ID>.firebaseio.com/.info/connected'); ref.on("value", function(snap) { if (snap.val() === true) { console.log("online"); } else { console.log("offline"); } }); w ࣗ෼ͷΦϯϥΠϯঢ়ଶΛมԽΛݕ஌ var lastOnlineRef = new Firebase("users/taro/lastOnline"); lastOnlineRef.onDisconnect().set(Firebase.ServerValue.TIMESTAMP); w ઀ଓ͕੾Εͨ࣌ʹ஋Λߋ৽ w ΦϑϥΠϯதʹ΋σʔλͷอଘ͕Ͱ͖ͯɺΦϯϥΠϯ
 ෮ؼ࣌ʹαʔόͱಉظ
33. ࣮ࡍʹ࢖ͬͯΈͯ w ࢖͍͸͡Ίͷࠒ͸3%#ͱൺֱͯ͠͠·͏
    w ٯॱʹιʔτͰ͖ͳ͍ͷʁ
    ͱ͔
    w ੍໿͸͋Δ͕ɺ࢖ͬͯΈΔͱΘΓͱԿͱ͔ͳΔ
    w σʔλͷ஝ੵΑΓϦΞϧλΠϜੑͷ͋Δ৘ใͷ΍ΓऔΓ޲͖
    w Ϣʔβʔೝূ΍ΦϑϥΠϯରԠͷػೳ͸8FCΞϓϦΛ
 ࡞Δ্Ͱͱͯ΋ศར
34. ϦϯΫ w ࠓճͷαϯϓϧΞϓϦ
    w IUUQTXJJVpSFCBTFBQQDPN
    w αϯϓϧΞϓϦͷιʔε
    w IUUQTHJUIVCDPNUBLVKJpSFCBTF@EFNP
35. ऴ
36. ͓·͚
37. "1*͕1SPNJTFԽ IUUQTXXXpSFCBTFDPNCMPHLFFQJOHPVSQSPNJTFTIUNM "1*ͷϨεϙϯε͸΋ͬͺΒίʔϧόοΫؔ਺Ͱड͚औ͍ͬͯͨͷ͕ɺ
    Ұ෦ͷ"1*ͷ໭Γ஋͕1SPNJTFʹͳͬͨɻ
38. খٕɿࣗಈੜ੒͞ΕΔΩʔΛσʔλʹೖΕΔ ۭQVTI ͯ͠TFU var messagesRef = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages"); var messageRef = messagesRef.push(); messageRef.set({id: messageRef.key(), name: "Taro", text: “Goodbye"}); { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "id" : "-KBmsNUshgxhTjcjFi-7", "name" : "Taro", "text" : "Hello" } } } ߋ৽ޙͷσʔλϕʔεͷঢ়ଶ