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

WebSocket 使ってアンケートをやってみよう! #北海道LT大会 #ゆるWeb札幌

WebSocket 使ってアンケートをやってみよう! #北海道LT大会 #ゆるWeb札幌

北海道)学生と社会人のライトニングトーク大会
https://connpass.com/event/157248/

主催者LT枠
当日のオンラインデモあり

Kihara, Takuya

January 18, 2020
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    גࣜձࣾϊʔεσΟςʔϧ
    ։ൃ%JWJTJPOٕज़ਪਐ(SPVQ
    ໦ݪ୎໵
    8FC4PDLFU࢖ͬͯ
    ΞϯέʔτΛ΍ͬͯΈΑ͏
    ೥݄೔

    View full-size slide

  2. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • ໊લ
    ໦ݪ ୎໵ / @tacck

    • ॴଐ
    גࣜձࣾϊʔεσΟςʔϧ

    ։ൃDivision ٕज़ਪਐGroup / Leader

    • ओ࠵
    • ΏΔWebษڧձ@ࡳຈ

    • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ

    • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
    εϓϨουɾΠʔάϧ

    PHP Conference Hokkaido 2019

    View full-size slide

  3. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • WebSocket Λ࢖ͬͯɺ

    ؆୯ͳΞϯέʔτγεςϜΛ࡞Γ·ͨ͠ɻ
    ࠓ೔ͷ͓࿩

    View full-size slide

  4. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ૣ଎σϞ

    View full-size slide

  5. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    σϞऴྃ

    View full-size slide

  6. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ

    View full-size slide

  7. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow

    View full-size slide

  8. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    ίϯςϯπ഑৴

    (HTML/CSS/JS)

    View full-size slide

  9. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    WebSocketͰ

    ઀ଓ

    View full-size slide

  10. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    ࣍ͷ໰୊

    View full-size slide

  11. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    ࣍ͷ໰୊
    HTTPSͰ

    ࣍ͷ໰୊ૹ৴ґཔ

    View full-size slide

  12. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    WebSocketͰ

    ໰୊৘ใૹ৴
    socket.send(…)
    ws.on(‘message’,…)
    ws.on(‘message’,…)

    View full-size slide

  13. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    WebSocketͰ

    ճ౴ฦ٫
    ws.send()
    socket.on(‘message’,…)

    View full-size slide

  14. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    WebSocketͰ

    ΈΜͳͷճ౴ฦ٫
    socket.on(‘message’,…)
    ws.send()

    View full-size slide

  15. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ࢓૊Έ
    όοΫΤϯυαʔό
    WebSocketαʔό

    Node.js (express, ws)
    / Heroku
    ϑϩϯτΤϯυαʔό
    Vue.js / Netlify
    ؅ཧऀϖʔδ
    ࢀՃऀϖʔδ
    Alexa
    / Voiceflow
    WebSocketͰ

    ूܭ݁Ռૹ৴
    socket.send(…)
    ws.on(‘message’,…)

    View full-size slide

  16. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ͸͍؆୯

    View full-size slide

  17. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    FOE

    View full-size slide

  18. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    ͱΈ͔͚ͤͯࠂ஌

    View full-size slide

  19. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • TEFಓ͞Μͱͷ߹ಉษڧձ

    • ։࠵೔: 2020೥01݄22೔ (ਫ)

    • ͨͩ͠ɺ͢Ͱʹຬ੮ɻ


    ΏΔ8FCษڧձ!ࡳຈ ͦͷ

    View full-size slide

  20. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • ࣍ճ͸ɺΠϯϑϥܥςʔϚͰ΍Δ༧ఆɻ

    • σϓϩΠ΍ߏ੒؅ཧɺ

    ΦϯϓϨ͔ΒΫϥ΢υ·Ͱɺ

    ΠϯϑϥɾωοτϫʔΫͬΆ͔ͬͨΒOKɻ

    (ॳ৺ऀɾೖ໳ऀ޲͚Ͱ͓ئ͍͠·͢ɻ)

    • ։࠵೔: 2020೥02݄15೔ (౔) or 02݄19೔ (ਫ) 

    ʹ͠Α͏͔ͳͱݕ౼தɻ (5ਓ͘Β͍ू·ΔͳΒܾߦ)
    ΏΔ8FCษڧձ!ࡳຈ ͦͷ

    View full-size slide

  21. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • εϚʔτεϐʔΧʔϛʔςΟϯά͞Μͱͷ߹ಉษڧձ

    • ։࠵೔: 2020೥01݄30೔ (౔)

    • ͨͩ͠ɺ͢Ͱʹຬ੮ɻ


    εϚʔτεϐʔΧʔͰ
    ༡΅͏ձ!ࡳຈ ͦͷ

    View full-size slide

  22. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • ΏΔWebͷલʹମݧձ࣮ࢪ༧ఆ

    • ։࠵೔: 2020೥02݄15೔ (౔) ͷ৔߹ͷΈ

    • ࠓճͷൃදΛݟͯڵຯΛ࣋ͬͨํɺ

    ͥͻ͓ؾܰʹ༡ͼʹ͖͍ͯͩ͘͞ɻ

    • य़ʹ͸ɺʮϒϥ΢β͚ͩͰ࡞ΕΔεΩϧ࡞੒ೖ໳ʯ

    ΋ܭըதɻ
    εϚʔτεϐʔΧʔͰ
    ༡΅͏ձ!ࡳຈ ͦͷ

    View full-size slide

  23. !UBDDL
    ๺ւಓʣֶੜͱࣾձਓͷ

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    5SVFFOE

    View full-size slide