Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
自社サービス チャット機能にFirebaseが導入されてた/Firebase was intr...
Search
kkznch
February 21, 2019
Technology
0
1.2k
自社サービス チャット機能に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
Share
More Decks by kkznch
See All by kkznch
黒い画面へようこそ/Hello, black screen
kkznch
0
410
VueRouterとNuxtのルーティング/VueRouter and Nuxt Routing
kkznch
0
370
Vuexで何を管理する方が良い?/What is better to store in Vuex?
kkznch
1
770
Firestoreのルール設定 割と何でも出来てビビる/Firestore rule setting
kkznch
1
820
LaraCSVで手軽にCSVを出力する/Easily generate CSV by LaraCSV
kkznch
0
1.7k
SPA開発未経験者によるNuxt.jsを使った自社サービス開発 / Development of own service using Nuxt.js by inexperienced SPA development
kkznch
3
3.3k
Laravel Telescopeが便利そうな気がする/Laravel Telescope seems to be convenience
kkznch
1
1.2k
Laravel Novaはなんだかいい感じらしい/Laravel Nova seems to be nice
kkznch
0
660
Laravel5.5的 継続的インテグレーション / Laravel 5.5 Continuous Integration
kkznch
3
3.6k
Other Decks in Technology
See All in Technology
実装で解き明かす並行処理の歴史
zozotech
PRO
1
310
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
100
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.2k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.8k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.1k
stupid jj tricks
indirect
0
7.8k
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
330
Azure Well-Architected Framework入門
tomokusaba
0
260
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Visualization
eitanlees
148
16k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Faster Mobile Websites
deanohume
310
31k
KATA
mclloyd
32
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Think Like a Performance Engineer
csswizardry
27
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Optimizing for Happiness
mojombo
379
70k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
ࣗࣾαʔϏε νϟοτػೳʹ Firebase͕ಋೖ͞Εͯͨ גࣜձࣾRe:Build Յ ါىʢ@kkznchʣ 20192݄21ʢʣ #0 Fukuoka.Firebase@LTΠϕϯτ
ࣗݾհ • Յ ါىʢ@kkznchʣ • 1990ͷԭೄੜ·Εɺԭೄҭͪɺԭೄࡏॅ • ܦྺɿ ‣ ిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ୲
‣ גࣜձࣾRe:BuildͰWebΤϯδχΞ ‣ εϚϒϥSP θϧμʢઓಆྗ350ສલޙɺඇVIPʣ
ձࣾհ • גࣜձࣾRe:Buildʢ201711݄ʹઃཱʣ • ݱࡏͷࣾһ໊̑ • ԭೄΛڌͱ͠ɺجຊతʹLaravelVue.jsΛ ͬͯडୗɾࣗࣾαʔϏε։ൃΛ͍ͯ͠Δ • ϦϞʔτϫʔΫɺࣗ༝ͳಇ͖ํΛਪ͍ͯ͠Δ
ࣗࣾαʔϏε։ൃத
৭Μͳػೳ࣮ͯ͠Δ νϟοτػೳผͷਓ͕୲
ؾ͚ͮνϟοτػೳʹ Firebase͕ಋೖ͞Ε͍ͯͨ
Firebase͔Βͳ͍ ↑ݱ࣮ ษڧձʹࢀՃ͢Δ ͔ΔΑ͏ʹͳΔ ↑ඪ
νϟοτػೳΛҰ͔Β ࡞ͬͨ͜ͱ͋Γ·͔͢ʁ
ϦΞϧλΠϜͳνϟοτ࡞Δ
σʔλϕʔεɾςʔϒϧઃܭ
ϓϩάϥϜ࡞ʢόοΫΤϯυʣ • APIΛ࣮ߦ͢ΔͨΊͷॲཧΛॻ͘ • APIܦ༝ͰϝοηʔδΛऔಘ͢ΔॲཧΛॻ͘ • APIܦ༝ͰϝοηʔδΛอଘ͢ΔॲཧΛॻ͘
ϦΞϧλΠϜߋ৽͢Δख๏ܾΊ • ϙʔϦϯά • ϩϯάϙʔϦϯά • WebSocket
ϙʔϦϯά
ϩϯάϙʔϦϯά
WebSocket
ϓϩάϥϜ࡞ʢϑϩϯτʣ • ϝοηʔδΛऔಘ͢ΔॲཧΛॻ͘ • ϝοηʔδΛૹ৴͢ΔॲཧΛॻ͘ • ϦΞϧλΠϜߋ৽Λߦ͏ॲཧΛॻ͘ • ϙʔϦϯάɺϩϯάϙʔϦϯάɺWebSocket •
औಘ͖ͯͨ͠ϝοηʔδΛඳը͢ΔॲཧΛॻ͘
None
όάͩΒ͚ͷνϟοτػೳ
࣮ʹखؒͱ͔͔࣌ؒΔ
FirebaseͰͬͯΈͨ
લఏ • Firebase͕Կͳͷ͔͔Βͳ͍ • FirebaseͰԿ͕Ͱ͖Δͷ͔͔Βͳ͍ • ຊΠϕϯτͷ3લʹॳΊͯFirebase৮ͬͨ
νϡʔτϦΞϧ
ਆαΠτ
Vue.js + FirebaseͰνϟοτ࡞ΔνϡʔτϦΞϧ
Firebaseίϯιʔϧ
ϓϩδΣΫτΛՃ͢Δ
ೝূํࣜʮGoogleʯΛ༗ޮԽ
DBͷΞΫηεϧʔϧΛఆٛ͢Δ
Vue.js
firebaseϞδϡʔϧΛΠϯετʔϧ ίϚϯυϥΠϯ͔Βୟ͘ main.jsϑΝΠϧͷதͰಡΈࠐΉΑ͏ʹ͢Δ
FirebaseΞΫηεใΛه͢Δ
Vue.jsΛॻ͘ • FirebaseॳظԽॲཧΛॻ͘ • ϩάΠϯɾϩάΞτͷॲཧΛॻ͘ • ϝοηʔδΛૹ৴͢ΔॲཧΛॻ͘ • ϝοηʔδΛඳը͢ΔॲཧΛॻ͘
νϟοτը໘
DBͷத
όοΫΤϯυ͕ͳ͍ ѹతʹָɺߴ͍ ※όοΫΤϯυ͖ͳͷͰσΟεͬͯΔΘ͚Ͱͳ͍
·ͱΊ
• FirebaseόοΫΤϯυͷΠϯϑϥߏஙෆཁ • FirebaseͬͨϦΞϧλΠϜॲཧͷָ࣮͕ • σʔλͷ࣋ͪํ͓͠Ζ͍ • Firebaseʹଞʹ৭Μͳػೳ͕͋ΔͷͰͬͯΈ͍ͨ ·ͱΊ
Firebaseͦͷଞͷٕज़ ใΛڞ༗͠߹͍·͠ΐ͏
ࢀߟURL • ϦΞϧλΠϜͳwebΞϓϦΛ࣮ݱ͢Δํ๏(ϙʔϦϯάɺ CometɺServer Sent EventsɺWebSocket) ‣ https://qiita.com/kimullaa/items/d49bd603be17b36f7495 • جૅ͔ΒֶͿVue.js
‣ https://cr-vue.mio3io.com