ੲջ͔͍͠Πϯλʔωοτͷ෩෺ࢻΛ ࠷ۙͷٕज़Ͱ࡞Δ࿩ 2018/09/01(౔) ߹ಉษڧձ in େ౎ձԬࢁ -2018 Summer- ҳݟ੣ (@mako_wis) 

About Me ҳݟɹ੣ʢϔϯϛɹϚίτʣ T witter: @mako_wis GitHub: makowis גࣜձࣾΫϨΦϑʔΨ Engineering Manager Okayama.rb ΠϕϯτཱͯΔ܎ɺதࠃ஍ํDBษڧձ Ԭࢁελοϑ झຯɿΨϯϓϥ੡࡞ɺϓϩάϥϛϯά 

No content

ԻָܥͷձࣾͳͷͰ 

Իָ࡞ΕΔਓ͕ଟ͍ 

M3ʹࣾ಺ͷϝϯόʔͰ ԻָCDΛग़͢Β͍͠ 

๻͸Իָ࡞Εͳ͍ͷͰ 

ϗʔϜϖʔδ࡞ͬͯΈͨ 

ϓϩτλΠϓ ๭ΞχϝͬΆ͍ϩΰ จࣈΛ఺໓ͤͨ͞ΓεΫ ϩʔϧͤͨ͞Γ͍ͯ͠ ੲջ͔͍͠ײ͡ʹ͔ͨͬ͠ ͨ 

࢖ΘΕͯΔݹͷ෩෺ࢻ blinkͱmarquee ϗʔϜϖʔδͷ૷০ͱ͍͑ ͹͜Ε λάͱͯ͠͸ഇࢭ CSSΞχϝʔγϣϯͰ࣮૷ ಈ࡞ݟ͍ͨਓ͸ʮblink htmlʯ΍ʮmarquee htmlʯ ͰάάΖ͏ 

blinkΛcss animationͰ࣮૷ @keyframes blink { 75% { opacity: 0; } } .blink { animation: blink 1s step-end infinite; } 

͜Ε͕ҙ֎ͱࣾ಺Ͱ ΢έͯ͠·ͬͨ 

ϓϩτλΠϓ৭ʑ໰୊ ͋Γͦ͏ͳͷͰ࡞Γ௚ͨ͠ 

ίϯηϓτ ʮੲջ͔͍͠ײ͡ʯ 

No content

https://teijigo-beer-ti.me/ 

։ൃϝϯόʔ 

։ൃϝϯόʔ 

։ൃϝϯόʔ ࣾ௕ ଞࣾͷਓ ଞࣾͷਓ 

https://github.com/ makowis/teijigo-beer-time 

ݹͷ෩෺ࢻ ΞΫηεΧ΢ϯλʔ Ұݴܝࣔ൘ ϑϨʔϜͬΆ͍σβΠϯ എܠʹը૾Λϕλ഑ஔ 

ߏ੒ αΠτɿVue.js + T ypescript αʔόʔɿFirebase Hosting σʔλϕʔεɿFirebase Realtime Database 

ջ͔͍͠ݟͨ໨Ͱ͕͢ ʮγϯάϧϖʔδΞϓϦέʔγϣϯʯ Ͱ͢ 

ΞΫηεΧ΢ϯλʔ τοϓϖʔδʹΞΫηεͰ Χ΢ϯτΞοϓ ϦϩʔυͰ΋Χ΢ϯτΞο ϓ ഉଞॲཧ͸ಛʹߟྀ͠ͳ ͍ ϑΝΠϧʹΧ΢ϯτ਺࣋ͬ ͯͨΞϨͳײ͡ͷ࣮૷ 

࣮૷ Χ΢ϯτͷอଘʹ͸Firebase Realtime DatabaseΛ࢖༻ 

Firebase Realtime Database NoSQLσʔλϕʔε σʔλ͸JSONܗࣜͰอଘ͞ΕΔ σʔλ͸઀ଓ͞Ε͍ͯΔΫϥΠΞϯτͱϦΞ ϧλΠϜʹಉظ͞ΕΔ 

No content

Firebase Realtime Databaseଆͷ४උ 

Firebase΁ͷొ࿥͸ Ͱ͖͍ͯΔલఏͰ͍͖·͢ 

ίϯιʔϧͷDatabase͔Β Realtime DatabaseΛ࡞੒ 

ϩοΫϞʔυͰ։࢝ʢޙͰઃఆม͑·͢ʣ 

access_counterͷϑΟʔϧυΛ௥Ճ͢Δ 

ϧʔϧʹaccess_counter΁ͷΞΫηεݖΛઃఆ 

઀ଓ৘ใͷ֬ೝ 

ઃఆը໘ͷ ΢ΣϒΞϓϦʹFirebaseΛ௥ՃΛΫϦοΫ 

઀ଓʹ࢖༻͢Δ৘ใΛ֬ೝͯ͠ϝϞ͓ͯ͘͠ 

Vue.jsଆͷ࣮૷ 

firebaseͷϥΠϒϥϦΛ௥Ճ // npmͷ৔߹ $ npm install firebase —save // yarnͷ৔߹ $ yarn add firebase 

firebase-configΛ௥Ճ // src/firebase-config.js import firebase from 'firebase/app'; import 'firebase/database'; const config = { // ؅ཧը໘Ͱ֬ೝͨ͠databaseURLΛઃఆ͢Δ databaseURL: "https://teijigo-beer-time.firebaseio.com", }; firebase.initializeApp(config); // ࠓճ͸database͚ͩ࢖༻͢ΔͷͰdatabaseΛexport export default firebase.database(); 

ը໘ଆͷ࣮૷ import firebase from 'firebase'; import database from '@/firebase-config'; export default { name: 'Top', data() { return { access: 0, }; }, created() { this.countUp(); }, methods: { countUp() { database .ref('access_counter') .once('value') .then((snapshot: firebase.database.DataSnapshot | null) => { if (snapshot) { // σʔλϕʔε͔Βऔಘͨ͠஋ʹ+1Λ͢Δ const access = parseInt(snapshot.val(), 10) + 1; // σʔλϕʔεͷ஋Λߋ৽͢Δ database.ref().update({ access_counter: access }); // ը໘දࣔ༻ͷม਺ʹ֨ೲ this.access = access; } }); }, }, }; 

Χ΢ϯτΞοϓͷॲཧ methods: { countUp() { database .ref('access_counter') .once('value') .then((snapshot: firebase.database.DataSnapshot | null) => { if (snapshot) { // σʔλϕʔε͔Βऔಘͨ͠஋ʹ+1Λ͢Δ const access = parseInt(snapshot.val(), 10) + 1; // σʔλϕʔεͷ஋Λߋ৽͢Δ database.ref().update({ access_counter: access }); // ը໘දࣔ༻ͷม਺ʹ֨ೲ this.access = access; } }); }, }, 

ը໘΁ͷදࣔ import firebase from 'firebase'; import database from '@/firebase-config'; export default { name: 'Top', data() { return { access: 0, }; }, created() { this.countUp(); }, 

ΞΫηεΧ΢ϯλʔ׬੒ 

؆୯Ͱ͢Ͷ 

Ұݴܝࣔ൘ ΩϦ൪ใࠂ౳ʹ࢖͏ܝࣔ ൘ ϦΞϧλΠ Ϝߋ৽͕؆୯ͩͬ ͨͷͰ͍࣮ͭ૷ ੲͷܝࣔ൘ͱҧͬͯϦϩʔ υඞཁ͋Γ·ͤΜ 

࣮૷ ίϝϯτͷอଘʹ͸Firebase Realtime DatabaseΛ࢖༻ 

Realtime Databaseଆͷ ઃఆ 

ϧʔϧʹmessagesΛ௥Ճ͠·͢ 

Vue.jsଆͷ࣮૷ 

ը໘΁ͷදࣔ import firebase from 'firebase'; import database from '@/firebase-config'; export default { name: 'Top', data() { return { name: '', message: '', messageList: [], }; }, created() { this.listen(); }, methods: { listen() { database .ref('messages/') .on('value', (snapshot: firebase.database.DataSnapshot | null) => { if (snapshot) { const list = snapshot.val(); const keys = Object.keys(list); const values = keys.map((v) => list[v]); this.messageList = values.sort((a: Message, b: Message) => { if (a.sortKey > b.sortKey) return 1; if (a.sortKey < b.sortKey) return -1; return 0; }); } }); }, sendMessage() { if (!this.name || !this.message) return; const message = { name: this.name, message: this.message, createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'), sortKey: -new Date(), }; database.ref('messages/').push(message); this.name = ''; this.message = ''; } }, }; 

ίϝϯτͷૹ৴ methods: { sendMessage() { if (!this.name || !this.message) return; const message = { name: this.name, message: this.message, createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'), sortKey: -new Date(), }; // σʔλϕʔεʹίϝϯτΛ௥Ճ database.ref('messages/').push(message); this.name = ''; this.message = ''; } }, }; 

ίϝϯτͷૹ৴ methods: { sendMessage() { if (!this.name || !this.message) return; const message = { name: this.name, message: this.message, createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'), sortKey: -new Date(), }; // σʔλϕʔεʹίϝϯτΛ௥Ճ database.ref('messages/').push(message); this.name = ''; this.message = ''; } }, }; 

ίϝϯτͷදࣔ listen() { database .ref('messages/') .on('value', (snapshot: firebase.database.DataSnapshot | null) => { if (snapshot) { const list = snapshot.val(); const keys = Object.keys(list); const values = keys.map((v) => list[v]); this.messageList = values.sort((a: Message, b: Message) => { if (a.sortKey > b.sortKey) return 1; if (a.sortKey < b.sortKey) return -1; return 0; }); } }); }, 

ίϝϯτͷදࣔ import firebase from 'firebase'; import database from '@/firebase-config'; export default { name: 'Top', data() { return { name: '', message: '', messageList: [], }; }, created() { this.listen(); 

Ұݴܝࣔ൘׬੒ 

؆୯Ͱ͢Ͷ 

·ͱΊ ੲͷջ͔͍͠΋ͷΛ࠷ۙͷٕज़Ͱ࠶࣮૷ͯ͠Έ· ͨ͠ ୯७ͳϞϊͳͷͰࢼ͠ʹ࡞ͬͯΈΔ୊ࡐͱͯ͠͸ ஸ౓͍͍ Firebase͜Ε͘Β͍ͷϞϊͰ͋Ε͹ແྉͰ࢖͑· ͢ Έͳ͞Μ΋࠶࣮૷ͯ͠Έ·͠ΐ͏ 

͓·͚ 

ϑϨʔϜͬΆ͍σβΠϯ ͬΆ͍σβΠϯͳͷͰϑ ϨʔϜ͸࢖͍ͬͯͳ͍ CSSͰͦΕͬΆ͘ݟͤͯ ·͢ ͍ͭ͜มܗ͠·͢ 

ϑϨʔϜͷมܗ ύιίϯ εϚʔτϑΥϯ 

φ΢໊͍લΛ ߟ͑ͯ͘Εͨਓ͕͍·ͨ͠ 

No content

#ϨεϙϯγϒϑϨʔϜ