Upgrade to Pro — share decks privately, control downloads, hide ads and more …

自社サービス チャット機能にFirebaseが導入されてた/Firebase was introduced to the chat function of our service

kkznch
February 21, 2019

自社サービス チャット機能にFirebaseが導入されてた/Firebase was introduced to the chat function of our service

#0 [email protected]イベント
登壇枠で使用

参考URL
https://fukuokafirebase.connpass.com/event/114251

kkznch

February 21, 2019
Tweet

More Decks by kkznch

Other Decks in Technology

Transcript

  1. ࣗࣾαʔϏε
    νϟοτػೳʹ
    Firebase͕ಋೖ͞Εͯͨ
    גࣜձࣾRe:Build
    Յ਺ ါىʢ@kkznchʣ
    2019೥2݄21೔ʢ໦ʣ
    #0 [email protected]Πϕϯτ

    View Slide

  2. ࣗݾ঺հ
    • Յ਺ ါىʢ@kkznchʣ
    • 1990೥ͷԭೄੜ·Εɺԭೄҭͪɺԭೄࡏॅ
    • ܦྺɿ
    ‣ ిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ୲౰
    ‣ גࣜձࣾRe:BuildͰWebΤϯδχΞ
    ‣ εϚϒϥSP θϧμʢઓಆྗ350ສલޙɺඇVIPʣ

    View Slide

  3. ձࣾ঺հ
    • גࣜձࣾRe:Buildʢ2017೥11݄ʹઃཱʣ
    • ݱࡏͷࣾһ਺͸໊̑
    • ԭೄΛڌ఺ͱ͠ɺجຊతʹ͸Laravel΍Vue.jsΛ
    ࢖ͬͯडୗɾࣗࣾαʔϏε։ൃΛ͍ͯ͠Δ
    • ϦϞʔτϫʔΫɺࣗ༝ͳಇ͖ํΛਪ঑͍ͯ͠Δ

    View Slide

  4. ࣗࣾαʔϏε։ൃத

    View Slide

  5. ৭Μͳػೳ࣮૷ͯ͠Δ
    νϟοτػೳ͸ผͷਓ͕୲౰

    View Slide

  6. ؾ͚ͮ͹νϟοτػೳʹ
    Firebase͕ಋೖ͞Ε͍ͯͨ

    View Slide

  7. Firebase෼͔Βͳ͍
    ↑ݱ࣮
    ษڧձʹࢀՃ͢Δ
    ෼͔ΔΑ͏ʹͳΔ
    ↑໨ඪ

    View Slide

  8. νϟοτػೳΛҰ͔Β
    ࡞ͬͨ͜ͱ͋Γ·͔͢ʁ

    View Slide

  9. ϦΞϧλΠϜͳνϟοτ࡞Δ

    View Slide

  10. σʔλϕʔεɾςʔϒϧઃܭ

    View Slide

  11. ϓϩάϥϜ࡞੒ʢόοΫΤϯυʣ
    • APIΛ࣮ߦ͢ΔͨΊͷॲཧΛॻ͘
    • APIܦ༝ͰϝοηʔδΛऔಘ͢ΔॲཧΛॻ͘
    • APIܦ༝ͰϝοηʔδΛอଘ͢ΔॲཧΛॻ͘

    View Slide

  12. ϦΞϧλΠϜߋ৽͢Δख๏ܾΊ
    • ϙʔϦϯά
    • ϩϯάϙʔϦϯά
    • WebSocket

    View Slide

  13. ϙʔϦϯά

    View Slide

  14. ϩϯάϙʔϦϯά

    View Slide

  15. WebSocket

    View Slide

  16. ϓϩάϥϜ࡞੒ʢϑϩϯτʣ
    • ϝοηʔδΛऔಘ͢ΔॲཧΛॻ͘
    • ϝοηʔδΛૹ৴͢ΔॲཧΛॻ͘
    • ϦΞϧλΠϜߋ৽Λߦ͏ॲཧΛॻ͘
    • ϙʔϦϯάɺϩϯάϙʔϦϯάɺWebSocket
    • औಘ͖ͯͨ͠ϝοηʔδΛඳը͢ΔॲཧΛॻ͘

    View Slide

  17. View Slide

  18. όάͩΒ͚ͷνϟοτػೳ
    ׬੒

    View Slide

  19. ࣮૷ʹखؒͱ͔͔࣌ؒΔ

    View Slide

  20. FirebaseͰ΍ͬͯΈͨ

    View Slide

  21. લఏ
    • Firebase͕Կͳͷ͔෼͔Βͳ͍
    • FirebaseͰԿ͕Ͱ͖Δͷ͔෼͔Βͳ͍
    • ຊΠϕϯτͷ3೔લʹॳΊͯFirebase৮ͬͨ

    View Slide

  22. νϡʔτϦΞϧ

    View Slide

  23. ਆαΠτ

    View Slide

  24. Vue.js + FirebaseͰνϟοτ࡞ΔνϡʔτϦΞϧ

    View Slide

  25. Firebaseίϯιʔϧ

    View Slide

  26. ϓϩδΣΫτΛ௥Ճ͢Δ

    View Slide

  27. ೝূํࣜʮGoogleʯΛ༗ޮԽ

    View Slide

  28. DBͷΞΫηεϧʔϧΛఆٛ͢Δ

    View Slide

  29. Vue.js

    View Slide

  30. firebaseϞδϡʔϧΛΠϯετʔϧ
    ίϚϯυϥΠϯ͔Βୟ͘
    main.jsϑΝΠϧͷதͰಡΈࠐΉΑ͏ʹ͢Δ

    View Slide

  31. FirebaseΞΫηε৘ใΛ௥ه͢Δ

    View Slide

  32. Vue.jsΛॻ͘
    • FirebaseॳظԽॲཧΛॻ͘
    • ϩάΠϯɾϩάΞ΢τͷॲཧΛॻ͘
    • ϝοηʔδΛૹ৴͢ΔॲཧΛॻ͘
    • ϝοηʔδΛඳը͢ΔॲཧΛॻ͘

    View Slide

  33. ׬੒

    View Slide

  34. νϟοτը໘

    View Slide

  35. DBͷத਎

    View Slide

  36. όοΫΤϯυ͕ͳ͍
    ѹ౗తʹָɺ޾෱౓ߴ͍
    ※όοΫΤϯυ޷͖ͳͷͰσΟεͬͯΔΘ͚Ͱ͸ͳ͍

    View Slide

  37. ·ͱΊ

    View Slide

  38. • Firebase͸όοΫΤϯυͷΠϯϑϥߏஙෆཁ
    • Firebase࢖ͬͨϦΞϧλΠϜॲཧͷ࣮૷ָ͕
    • σʔλͷ࣋ͪํ͓΋͠Ζ͍
    • Firebaseʹଞʹ৭Μͳػೳ͕͋ΔͷͰ࢖ͬͯΈ͍ͨ
    ·ͱΊ

    View Slide

  39. Firebase΍ͦͷଞͷٕज़
    ৘ใΛڞ༗͠߹͍·͠ΐ͏

    View Slide

  40. ࢀߟURL
    • ϦΞϧλΠϜͳwebΞϓϦΛ࣮ݱ͢Δํ๏(ϙʔϦϯάɺ
    CometɺServer Sent EventsɺWebSocket)
    ‣ https://qiita.com/kimullaa/items/d49bd603be17b36f7495
    • جૅ͔ΒֶͿVue.js
    ‣ https://cr-vue.mio3io.com

    View Slide