アクセスカウンター、一言掲示板など昔のインターネットにあったものがどんどん失われて行っています。 そんな過去の遺物たちをVue.jsとFirebaseを使って作った話をしました。
サイト： https://teijigo-beer-ti.me/ ソースコード: https://github.com/makowis/teijigo-beer-time
ੲջ͔͍͠Πϯλʔωοτͷ෩ࢻΛ࠷ۙͷٕज़Ͱ࡞Δ2018/09/01() ߹ಉษڧձ in େձԬࢁ -2018 Summer-ҳݟ (@mako_wis)
View Slide
About MeҳݟɹʢϔϯϛɹϚίτʣTwitter: @mako_wisGitHub: makowisגࣜձࣾΫϨΦϑʔΨEngineering ManagerOkayama.rb ΠϕϯτཱͯΔɺதࠃํDBษڧձ ԬࢁελοϑझຯɿΨϯϓϥ࡞ɺϓϩάϥϛϯά
ԻָܥͷձࣾͳͷͰ
Իָ࡞ΕΔਓ͕ଟ͍
M3ʹࣾͷϝϯόʔͰԻָCDΛग़͢Β͍͠
Իָ࡞Εͳ͍ͷͰ
ϗʔϜϖʔδ࡞ͬͯΈͨ
ϓϩτλΠϓΞχϝͬΆ͍ϩΰจࣈΛ໓ͤͨ͞ΓεΫϩʔϧͤͨ͞Γ͍ͯ͠ੲջ͔͍͠ײ͡ʹ͔ͨͬͨ͠
ΘΕͯΔݹͷ෩ࢻblinkͱmarqueeϗʔϜϖʔδͷ০ͱ͍͑͜Ελάͱͯ͠ഇࢭCSSΞχϝʔγϣϯͰ࣮ಈ࡞ݟ͍ͨਓʮblinkhtmlʯʮmarquee htmlʯͰάάΖ͏
blinkΛcss animationͰ࣮@keyframes blink {75% { opacity: 0; }}.blink {animation: blink 1s step-end infinite;}
͜Ε͕ҙ֎ͱࣾͰέͯ͠·ͬͨ
ϓϩτλΠϓ৭ʑ͋Γͦ͏ͳͷͰ࡞Γͨ͠
ίϯηϓτʮੲջ͔͍͠ײ͡ʯ
https://teijigo-beer-ti.me/
։ൃϝϯόʔ
։ൃϝϯόʔࣾଞࣾͷਓଞࣾͷਓ
https://github.com/makowis/teijigo-beer-time
ݹͷ෩ࢻΞΫηεΧϯλʔҰݴܝࣔ൘ϑϨʔϜͬΆ͍σβΠϯഎܠʹը૾Λϕλஔ
ߏαΠτɿVue.js + TypescriptαʔόʔɿFirebase HostingσʔλϕʔεɿFirebase Realtime Database
ջ͔͍͠ݟͨͰ͕͢ʮγϯάϧϖʔδΞϓϦέʔγϣϯʯͰ͢
ΞΫηεΧϯλʔτοϓϖʔδʹΞΫηεͰΧϯτΞοϓϦϩʔυͰΧϯτΞοϓഉଞॲཧಛʹߟྀ͠ͳ͍ϑΝΠϧʹΧϯτ࣋ͬͯͨΞϨͳײ͡ͷ࣮
࣮ΧϯτͷอଘʹFirebase RealtimeDatabaseΛ༻
Firebase Realtime DatabaseNoSQLσʔλϕʔεσʔλJSONܗࣜͰอଘ͞ΕΔσʔλଓ͞Ε͍ͯΔΫϥΠΞϯτͱϦΞϧλΠϜʹಉظ͞ΕΔ
Firebase RealtimeDatabaseଆͷ४උ
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.jsimport firebase from 'firebase/app';import 'firebase/database';const config = {// ཧը໘Ͱ֬ೝͨ͠databaseURLΛઃఆ͢ΔdatabaseURL: "https://teijigo-beer-time.firebaseio.com",};firebase.initializeApp(config);// ࠓճdatabase͚ͩ༻͢ΔͷͰdatabaseΛexportexport default firebase.database();
ը໘ଆͷ࣮TOP͋ͳͨ{{ access }}ਓͷ๚ऀͰ͢ɻ<br/>import firebase from 'firebase';<br/>import database from '@/firebase-config';<br/>export default {<br/>name: 'Top',<br/>data() {<br/>return {<br/>access: 0,<br/>};<br/>},<br/>created() {<br/>this.countUp();<br/>},<br/>methods: {<br/>countUp() {<br/>database<br/>.ref('access_counter')<br/>.once('value')<br/>.then((snapshot: firebase.database.DataSnapshot | null) => {<br/>if (snapshot) {<br/>// σʔλϕʔε͔Βऔಘͨ͠ʹ+1Λ͢Δ<br/>const access = parseInt(snapshot.val(), 10) + 1;<br/>// σʔλϕʔεͷΛߋ৽͢Δ<br/>database.ref().update({ access_counter: access });<br/>// ը໘දࣔ༻ͷมʹ֨ೲ<br/>this.access = access;<br/>}<br/>});<br/>},<br/>},<br/>};<br/>
ΧϯτΞοϓͷॲཧ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;}});},},
ը໘ͷදࣔTOP͋ͳͨ{{ access }}ਓͷ๚ऀͰ͢ɻ<br/>import firebase from 'firebase';<br/>import database from '@/firebase-config';<br/>export default {<br/>name: 'Top',<br/>data() {<br/>return {<br/>access: 0,<br/>};<br/>},<br/>created() {<br/>this.countUp();<br/>},<br/>
ΞΫηεΧϯλʔ
؆୯Ͱ͢Ͷ
Ұݴܝࣔ൘ΩϦ൪ใࠂʹ͏ܝࣔ൘ϦΞϧλΠϜߋ৽͕؆୯ͩͬͨͷͰ͍࣮ͭੲͷܝࣔ൘ͱҧͬͯϦϩʔυඞཁ͋Γ·ͤΜ
࣮ίϝϯτͷอଘʹFirebase RealtimeDatabaseΛ༻
Realtime Databaseଆͷઃఆ
ϧʔϧʹmessagesΛՃ͠·͢
ը໘ͷදࣔҰݴܝࣔ൘HN(ϋϯυϧωʔϜ)ϝοηʔδૹ৴{{item.message}} by {{item.name}}{{item.createdAt}}<br/>import firebase from 'firebase';<br/>import database from '@/firebase-config';<br/>export default {<br/>name: 'Top',<br/>data() {<br/>return {<br/>name: '',<br/>message: '',<br/>messageList: [],<br/>};<br/>},<br/>created() {<br/>this.listen();<br/>},<br/>methods: {<br/>listen() {<br/>database<br/>.ref('messages/')<br/>.on('value', (snapshot: firebase.database.DataSnapshot | null) => {<br/>if (snapshot) {<br/>const list = snapshot.val();<br/>const keys = Object.keys(list);<br/>const values = keys.map((v) => list[v]);<br/>this.messageList = values.sort((a: Message, b: Message) => {<br/>if (a.sortKey > b.sortKey) return 1;<br/>if (a.sortKey < b.sortKey) return -1;<br/>return 0;<br/>});<br/>}<br/>});<br/>},<br/>sendMessage() {<br/>if (!this.name || !this.message) return;<br/>const message = {<br/>name: this.name,<br/>message: this.message,<br/>createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'),<br/>sortKey: -new Date(),<br/>};<br/>database.ref('messages/').push(message);<br/>this.name = '';<br/>this.message = '';<br/>}<br/>},<br/>};<br/>
ίϝϯτͷૹ৴HN(ϋϯυϧωʔϜ)ϝοηʔδૹ৴<br/>methods: {<br/>sendMessage() {<br/>if (!this.name || !this.message) return;<br/>const message = {<br/>name: this.name,<br/>message: this.message,<br/>createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'),<br/>sortKey: -new Date(),<br/>};<br/>// σʔλϕʔεʹίϝϯτΛՃ<br/>database.ref('messages/').push(message);<br/>this.name = '';<br/>this.message = '';<br/>}<br/>},<br/>};<br/>
ίϝϯτͷૹ৴<br/>methods: {<br/>sendMessage() {<br/>if (!this.name || !this.message) return;<br/>const message = {<br/>name: this.name,<br/>message: this.message,<br/>createdAt: moment(new Date()).format('YYYY/MM/DD H:mm:ss'),<br/>sortKey: -new Date(),<br/>};<br/>// σʔλϕʔεʹίϝϯτΛՃ<br/>database.ref('messages/').push(message);<br/>this.name = '';<br/>this.message = '';<br/>}<br/>},<br/>};<br/>
ίϝϯτͷදࣔ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;});}});},
ίϝϯτͷදࣔ{{item.message}} by {{item.name}}{{item.createdAt}}<br/>import firebase from 'firebase';<br/>import database from '@/firebase-config';<br/>export default {<br/>name: 'Top',<br/>data() {<br/>return {<br/>name: '',<br/>message: '',<br/>messageList: [],<br/>};<br/>},<br/>created() {<br/>this.listen();<br/>
Ұݴܝࣔ൘
·ͱΊੲͷջ͔͍͠ͷΛ࠷ۙͷٕज़Ͱ࠶࣮ͯ͠Έ·ͨ͠୯७ͳϞϊͳͷͰࢼ͠ʹ࡞ͬͯΈΔࡐͱͯ͠ஸ͍͍Firebase͜Ε͘Β͍ͷϞϊͰ͋ΕແྉͰ͑·͢Έͳ͞Μ࠶࣮ͯ͠Έ·͠ΐ͏
͓·͚
ϑϨʔϜͬΆ͍σβΠϯͬΆ͍σβΠϯͳͷͰϑϨʔϜ͍ͬͯͳ͍CSSͰͦΕͬΆ͘ݟͤͯ·͍ͭ͢͜มܗ͠·͢
ϑϨʔϜͷมܗύιίϯ εϚʔτϑΥϯ
φ໊͍લΛߟ͑ͯ͘Εͨਓ͕͍·ͨ͠
#ϨεϙϯγϒϑϨʔϜ
makowis
kojipole
umsys
tomokusaba
ogiwarat
lnit
lhespanha
lanberb
seike460
yamotuki
aethiopicuschan
stewemetal
ari_mharada
samanthasiow
sachag
morganepeng
malarkey
chriscoyier
marcduiker
keithpitt
sonatard
akmur
danielanewman
bcantrill
rocio