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
340
エンジニアのキャリア論
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
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
チームのテスト力を鍛える
goyoki
3
880
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
print("Hello, World")
eddie
2
530
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Testing Trophyは叫ばない
toms74209200
0
890
アセットのコンパイルについて
ojun9
0
130
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
140
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Making Projects Easy
brettharned
117
6.4k
We Have a Design System, Now What?
morganepeng
53
7.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
GitHub's CSS Performance
jonrohan
1032
460k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Code Reviewing Like a Champion
maltzj
525
40k
The Invisible Side of Design
smashingmag
301
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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/