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

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

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

Transcript

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

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

   View Slide

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

   ϥΠτχϯάτʔΫେձ
   ๺ւಓ-5େձ
   • ໊લ
   ໦ݪ ୎໵ / @tacck
   
   • ॴଐ
   גࣜձࣾϊʔεσΟςʔϧ

   ։ൃDivision ٕज़ਪਐGroup / Leader
   
   • ओ࠵
   • ΏΔWebษڧձ@ࡳຈ
   
   • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ
   
   • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
   εϓϨουɾΠʔάϧ
   ୭
   PHP Conference Hokkaido 2019
   

   View Slide

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

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

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

   View Slide

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

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

   View Slide

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

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

   View Slide

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

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

   View Slide

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

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

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

   View Slide

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

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

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

   (HTML/CSS/JS)
   

   View Slide

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

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

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

   ઀ଓ
   

   View Slide

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

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

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

    View Slide

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

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

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

    ࣍ͷ໰୊ૹ৴ґཔ
    

    View 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 Slide

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

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

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

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

    View Slide

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

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

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

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

    View Slide

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

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

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

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • TEFಓ͞Μͱͷ߹ಉษڧձ
    
    • ։࠵೔: 2020೥01݄22೔ (ਫ)
    
    • ͨͩ͠ɺ͢Ͱʹຬ੮ɻ

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

    View Slide

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

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

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

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

    (ॳ৺ऀɾೖ໳ऀ޲͚Ͱ͓ئ͍͠·͢ɻ)
    
    • ։࠵೔: 2020೥02݄15೔ (౔) or 02݄19೔ (ਫ) 

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

    View Slide

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

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • εϚʔτεϐʔΧʔϛʔςΟϯά͞Μͱͷ߹ಉษڧձ
    
    • ։࠵೔: 2020೥01݄30೔ (౔)
    
    • ͨͩ͠ɺ͢Ͱʹຬ੮ɻ

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

    View Slide

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

    ϥΠτχϯάτʔΫେձ
    ๺ւಓ-5େձ
    • ΏΔWebͷલʹମݧձ࣮ࢪ༧ఆ
    
    • ։࠵೔: 2020೥02݄15೔ (౔) ͷ৔߹ͷΈ
    
    • ࠓճͷൃදΛݟͯڵຯΛ࣋ͬͨํɺ

    ͥͻ͓ؾܰʹ༡ͼʹ͖͍ͯͩ͘͞ɻ
    
    • य़ʹ͸ɺʮϒϥ΢β͚ͩͰ࡞ΕΔεΩϧ࡞੒ೖ໳ʯ

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

    View Slide

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

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

    View Slide