Slide 1
Slide 1 text
diffeasy. inc 1
7VF/JHIUJO'VLVPLB
W@GVLVPLB
/VYUKTͱ
'JSFCBTFͰ
8FCΞϓϦέʔγϣϯ։ൃ
Slide 2
Slide 2 text
diffeasy. inc 2
͏ͲΜ'JSFCBTF
7VF
Թઘ
ಡॻ
(PMBOH
3VCZ
($1
ϒϩοΫνΣʔϯ
إೱ͍
גࣜձࣾEJ⒎FBTZ σΟϑΟʔδʔ
औక$50
࢙ ʹ͚ͨ͠͠
!@UBLFTIJ@
EPDLFS
/VYU
Slide 3
Slide 3 text
diffeasy. inc 3
ੈքதͷlΉ͔͍ͣ͠zΛ؆୯ʹ
NBLFEJ⒏DVMUUIJOHTFBTZ
Slide 4
Slide 4 text
diffeasy. inc 4
Google͕ఏڙ͍ͯ͠Δ
BaaS(Backend as a Service)
Slide 5
Slide 5 text
diffeasy. inc 5
Slide 6
Slide 6 text
diffeasy. inc 6
7VFKT
8FCαʔόʔ
OHJOY QVNB 3BJMT
3VCZ
%#αʔόʔ
.Z42-
ϑϩϯτΤϯυ όοΫΤϯυ
Slide 7
Slide 7 text
diffeasy. inc 7
7VFKT
ϑϩϯτΤϯυ όοΫΤϯυ
Slide 8
Slide 8 text
diffeasy. inc 8
Slide 9
Slide 9 text
diffeasy. inc 9
Slide 10
Slide 10 text
diffeasy. inc 10
10cm৳ͼ͍ͨ͠ɺ
ऩ1,000ສཉ͍͠ʂʂ
Slide 11
Slide 11 text
diffeasy. inc 11
͜ΜͳWebΞϓϦ
ͭͬͯ͘ݟ·ͨ͠
Slide 12
Slide 12 text
diffeasy. inc 12
Slide 13
Slide 13 text
diffeasy. inc 13
ʔ४උ
Slide 14
Slide 14 text
diffeasy. inc 14
ʔ४උ
Slide 15
Slide 15 text
diffeasy. inc 15
ʔ४උ
Slide 16
Slide 16 text
diffeasy. inc 16
ʔ४උ
Slide 17
Slide 17 text
diffeasy. inc 17
ʔϓϩδΣΫτ࡞
OQNJOTUBMMHpSFCBTFUPPMT
pSFCBTFJOJU
Slide 18
Slide 18 text
diffeasy. inc 18
)PTUJOHΛબ
'JSFCBTFͰ࡞ͨ͠ϓϩδΣΫτΛબ
ʔϓϩδΣΫτ࡞
Slide 19
Slide 19 text
diffeasy. inc 19
º
Slide 20
Slide 20 text
diffeasy. inc 20
WVFJOJUOVYUDPNNVOJUZTUBSUFS
UFNQMBUFTBNQMF
DETBNQMF
OQNJOTUBMMpSFCBTFWVFYpSFTBWF
firebaseɺvuexfireϓϥάΠϯΛར༻
Slide 21
Slide 21 text
diffeasy. inc 21
FirebaseϓϩδΣΫτʹଓ
import firebase from 'firebase'
var config = {
apiKey: process.env.FB_API_KEY,
authDomain: process.env.FB_AUTH_DOMAIN,
databaseURL: process.env.FB_DATABASE_URL,
projectId: process.env.FB_PROJECTID,
storageBucket: process.env.FB_STORAGE_BUCKET,
messagingSenderId:
process.env.FB_MESSAGING_SENDER_ID
}
if (!firebase.apps.length) {
firebase.initializeApp(config)
}
export default firebase
Slide 22
Slide 22 text
diffeasy. inc 22
ϩάΠϯೝূ
auth.signInWithEmailAndPassword
(data['email'], data['password'])
.then((user) => {
// ϩάΠϯޭ
commit('setUser', user)})
.catch((error) => {
ɹ// Τϥʔॲཧ
})
Slide 23
Slide 23 text
diffeasy. inc 23
σʔλొ
const db = firebase.database()
const messagesRef = db.ref('messages')
export const state = () => ({
messages: [],
})
export const actions = {
addMessageRef : firebaseAction((context,
data) => {
messagesRef.push({uid: data.uid, text:
data.text, time: 9999999999999 -
Date.now()})
})
Slide 24
Slide 24 text
diffeasy. inc 24
σʔλऔಘ
const db = firebase.database()
const messagesRef = db.ref('messages')
export const state = () => ({
messages: [],
})
export const actions = {
initMessages :
firebaseAction(({ bindFirebaseRef }) => {
bindFirebaseRef('messages',
messagesRef.orderByChild('time'))
})
}
Slide 25
Slide 25 text
diffeasy. inc 25
ετϨʔδͷΞοϓϩʔυ
const storage = firebase.storage()
const storageRef = storage.ref()
export const actions = {
uploadAvatar (context, data) {
var avatarRef =
storageRef.child(data.name);
avatarRef.put(data.file)
}
}
Slide 26
Slide 26 text
diffeasy. inc 26
DETBNQMF
OQNSVOHFOFSBUF
DE
pSFCBTFEFQMPZ
HostingαʔόʔʹσϓϩΠ
{
"hosting": {
"public": "sample/dist"
}
}
pSFCBTFKTPO
Slide 27
Slide 27 text
©2018 diffeasy Corporation
ιʔεͪ͜Β
https://github.com/tkc24/firebase-simple-chat
27
2018/10/13ه
Nuxt v2ɺPWAରԠʹ͍ͭͯQiitaʹهࣄΛ͋͛·ͨ͠ɻ
ʮNuxt v2ͱFirebase(CloudFirestore)ͰPWAରԠWebΞϓ
Ϧ։ൃʯ
https://qiita.com/_takeshi_24/items/
3ee051e1db1b3e8da106
Slide 28
Slide 28 text
diffeasy. inc 28
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ