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+Vue.jsで作った チャットをデプロイ
Search
Takayuki
May 21, 2019
Programming
1
680
Firebase+Vue.jsで作った チャットをデプロイ
Firebase+Vue.jsで作った
チャットをデプロイ
Takayuki
May 21, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
330
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Programming
See All in Programming
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Laravel Boost 超入門
fire_arlo
3
220
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
OSS開発者という働き方
andpad
5
1.7k
アセットのコンパイルについて
ojun9
0
130
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
AIでLINEスタンプを作ってみた
eycjur
1
230
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.5k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Unsuck your backbone
ammeep
671
58k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Designing Experiences People Love
moore
142
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Music & Morning Musume
bryan
46
6.8k
Transcript
Firebase+Vue.jsで࡞ͬͨ νϟοτΛデプϩΠ
1 ձࣾհɾࣗݾհ Agenda 2 Firebase Realtime Databaseͱ 3 νϟοτͷ࡞Γํ 4
࣮ɾσϓϩΠํ๏ 5 DEMO
1 ձࣾհɾࣗݾհ
4 ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹϑϦʔϥ
ϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ ઓ ◆Twitter @kanbo0605
Copyright Re:Build.inc All Rights Reserved. 1.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 5໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
6 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru ɾγεςϜ֓ཁ Ϋϥυιʔγϯά ΫϨδοτܾࡁ ͳͲ ɾ͍ͬͯΔٕज़ ݴޠ
: PHP,JavaScript ϑϨʔϜϫʔΫ: laravel5,Nuxt.jsͳͲ
2 Firebase Realtime Databaseͱ
8 Firebase Realtime Databaseͱ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥυ σʔλϕʔεͰσʔλͷอͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻσʔλͯ͢ͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉ ظ͞ΕɺΞϓϦ͕ΦϑϥΠϯʹͳͬͯҾ͖ଓ͖༻Ͱ͖·͢ɻ
ΫϥυϗετܕσʔλϕʔεͰ͢ɻσʔλ JSON ͱͯ͠อଘ͞ Εɺଓ͞Ε͍ͯΔͯ͢ͷΫϥΠΞϯτͱϦΞϧλΠϜͰಉظ͞Ε ·͢ɻiOSɺAndroidɺJavaScript SDK Λ༻ͯ͠Ϋϩεϓϥοτ ϑΥʔϜ ΞϓϦΛߏஙͨ͠߹ɺͯ͢ͷΫϥΠΞϯτ͕ɺ1ͭͷ Realtime Database ΠϯελϯεΛڞ༗ͯ͠ɺ࠷৽ͷσʔλʹΑΔߋ ৽Λࣗಈతʹड৴͠·͢ɻ
9 Firebase Realtime Databaseͱ ֊ߏͰݟΕΔ
1 0 Firebase Realtime Databaseͱ
3 Firebase Hostingͱ
1 2 Firebase Hostingͱ https://firebase.google.com/docs/hosting/ Firebase Hosting ɺΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π͚ͷߴͰ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase
Hosting σϕϩούʔ͚ͷɺຊ൪ڥϨϕϧͷΣϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ
1 3 Firebase Hostingͱ https://firebase.google.com/docs/hosting/
4 ࣮ɾσϓϩΠํ๏
1 5 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ຊϦʔδϣϯΛબ͢Δ
1 6 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճTwiterೝূΛબ
1 7 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ
1 8 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ
1 9 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase
from ‘firebase' Ͱ ಡΈࠐΉ
2 0 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ͚Δ JSΛίϐʔ͢Δ
2 1 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html
2 2 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js
2 3 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue
2 4 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
2 5 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
5 DEMO
2 7 ߏ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB
ϝοηʔδΛૹ৴
2 8 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/