Upgrade to Pro — share decks privately, control downloads, hide ads and more …

昔懐かしいインターネットの風物詩を最近の技術で作る話

Makoto Henmi
September 01, 2018

 昔懐かしいインターネットの風物詩を最近の技術で作る話

アクセスカウンター、一言掲示板など昔のインターネットにあったものがどんどん失われて行っています。
そんな過去の遺物たちをVue.jsとFirebaseを使って作った話をしました。

サイト: https://teijigo-beer-ti.me/
ソースコード: https://github.com/makowis/teijigo-beer-time

Makoto Henmi

September 01, 2018
Tweet

More Decks by Makoto Henmi

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. View Slide

  4. ԻָܥͷձࣾͳͷͰ

    View Slide

  5. Իָ࡞ΕΔਓ͕ଟ͍

    View Slide

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

    View Slide

  7. ๻͸Իָ࡞Εͳ͍ͷͰ

    View Slide

  8. ϗʔϜϖʔδ࡞ͬͯΈͨ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. View Slide

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

    View Slide

  17. ։ൃϝϯόʔ

    View Slide

  18. ։ൃϝϯόʔ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. View Slide

  28. Firebase Realtime
    Databaseଆͷ४උ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. ઀ଓ৘ใͷ֬ೝ

    View Slide

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

    View Slide

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

    View Slide

  37. Vue.jsଆͷ࣮૷

    View Slide

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

    View Slide

  39. 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();

    View Slide

  40. ը໘ଆͷ࣮૷


    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/>

    View Slide

  41. Χ΢ϯτΞοϓͷॲཧ
    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;
    }
    });
    },
    },

    View Slide

  42. ը໘΁ͷදࣔ


    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/>

    View Slide

  43. ΞΫηεΧ΢ϯλʔ׬੒

    View Slide

  44. ؆୯Ͱ͢Ͷ

    View Slide

  45. Ұݴܝࣔ൘
    ΩϦ൪ใࠂ౳ʹ࢖͏ܝࣔ

    ϦΞϧλΠ
    Ϝߋ৽͕؆୯ͩͬ
    ͨͷͰ͍࣮ͭ૷
    ੲͷܝࣔ൘ͱҧͬͯϦϩʔ
    υඞཁ͋Γ·ͤΜ

    View Slide

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

    View Slide

  47. Realtime Databaseଆͷ
    ઃఆ

    View Slide

  48. ϧʔϧʹmessagesΛ௥Ճ͠·͢

    View Slide

  49. Vue.jsଆͷ࣮૷

    View Slide

  50. ը໘΁ͷදࣔ


    Ұݴܝࣔ൘


    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/>

    View Slide

  51. ίϝϯτͷૹ৴



    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/>

    View Slide

  52. ίϝϯτͷૹ৴
    <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/>

    View Slide

  53. ίϝϯτͷදࣔ
    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;
    });
    }
    });
    },

    View Slide

  54. ίϝϯτͷදࣔ





    {{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/>

    View Slide

  55. Ұݴܝࣔ൘׬੒

    View Slide

  56. ؆୯Ͱ͢Ͷ

    View Slide

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

    View Slide

  58. ͓·͚

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. View Slide

  63. #ϨεϙϯγϒϑϨʔϜ

    View Slide