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 Fukuoka.Firebase@LTイベント
登壇枠で使用

参考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 Fukuoka.Firebase@LTΠϕϯτ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. ࣗࣾαʔϏε։ൃத

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. ϩϯάϙʔϦϯά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. FirebaseͰ΍ͬͯΈͨ

    View full-size slide

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

    View full-size slide

  19. νϡʔτϦΞϧ

    View full-size slide

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

    View full-size slide

  21. Firebaseίϯιʔϧ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. νϟοτը໘

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide