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

#0 Fukuoka.Firebase@LTイベント
登壇枠で使用

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

Transcript

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

   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