JavaScriptから始めるIoT入門 ~Johnny-Fiveとnpmでお手軽IoT~ / JavaScript IoT on Johnny-Five

2016.10.15
秋のJavaScript祭 in mixi 〜秋のJavaScript収穫祭〜
https://javascript-fes.doorkeeper.jp/events/52089

Transcript

1. JavaScript͔Β࢝ΊΔIoTೖ໳
   ~Johnny-FiveͱnpmͰ͓खܰIoT~
   @shanonim
   

   View Slide

2. who?
   ࣰݪ ߂ޫ ( @shanonim )
   - Android
   - IoT
   - Anime
   

   View Slide

3. View Slide

4. ࠓ೔͸
   JavaScriptͰIoTΛ΍ͬͯΈͨࣄྫΛ
   ͝঺հ͠·͢
   

   View Slide

5. IoT
   

   View Slide

6. ͳΜ͔ΊͬͪΌྲྀߦͬͯΔ
   

   View Slide

7. “ϞϊͷΠϯλʔωοτʢInternet of ThingsɺIoTʣ͸ɺ
   ҰҙʹࣝผՄೳͳʮ΋ͷʯ͕Πϯλʔωοτ/Ϋϥ΢υʹ઀ଓ͞Εɺ
   ৘ใަ׵͢Δ͜ͱʹΑΓ૬ޓʹ੍ޚ͢Δ࢓૊ΈͰ͋Δɻ”
   ग़యɿWikipediaʢhttps://ja.wikipedia.org/wiki/ϞϊͷΠϯλʔωοτʣ
   

   View Slide

8. ෺ମ ۭؒ
   

   View Slide

9. ۭؒ
   ෺ମ
   

   View Slide

10. ۩ମతͳϏδωε
    

    View Slide

11. IoTϏδωε #ͱ͸
    - ϨΠϠʔ5: Ϣʔβ૚
    - IoTΛ࢖ͬͨαʔϏεΛར༻͢Δاۀɾݸਓ
    - ϨΠϠʔ4: ৘ใॲཧ૚
    - ৘ใΛ෼ੳͯ͠ɺϢʔβʹ੡඼΍αʔϏεΛఏڙ͢Δ
    - ϨΠϠʔ3: ωοτϫʔΫ૚
    - ௨৴ΩϟϦΞɾ෼ࢄॲཧٕज़
    - ϨΠϠʔ2: ੍ޚ૚
    - ηϯαʔ΍੍ޚ૷ஔΛ։ൃ͢Δاۀ
    - ϨΠϠʔ1: ػث૚
    - ػث΍σόΠεΛ੡଄͢Δاۀ
    ग़యɿIoTϏδωε͕ͨͬͨ1ຕͰΘ͔Δνϟʔτɺ5ͭͷ֊૚ʹ෼͚Ε͹੔ཧͰ͖Δ
    ʢhttp://www.sbbit.jp/article/cont1/32758ʣ
    

    View Slide

12. ݸਓͰ΋IoT͸Ͱ͖Δ
    

    View Slide

13. ࠓ೔࿩͢͜ͱ
    - IoT is Կ
    - IoTࣄ࢝Ί
    - JavaScript IoT ͷ঺հ
    - ΍ͬͯΈͨࣄྫ
    - ·ͱΊ
    

    View Slide

14. IoTࣄ࢝Ί
    

    View Slide

15. ʰڵຯ͸͋Δ͚Ͳ
    Կ͔Β΍Ε͹͍͍͔Θ͔Βͳ͍…ʱ
    

    View Slide

16. View Slide

17. IoTࣄ࢝Ί
    - σόΠεΛ༻ҙ͢Δ
    - ͱΓ͋͑ͣʮLνΧʯ
    

    View Slide

18. σόΠεΛ༻ҙ͢Δ
    

    View Slide

19. IoTͰΑ͘࢖ΘΕΔσόΠε
    - Arduino
    - RaspberryPi
    

    View Slide

20. ArduinoͰLνΧ
    

    View Slide

21. 13൪ϐϯ͔Βग़ྗ
    LED
    

    View Slide

22. ҰൠతͳIoTίʔσΟϯάࣄ৘
    - CݴޠͰॻ͘
    - Arduino IDEΛ࢖͏
    

    View Slide

23. WebΤϯδχΞʹ͸
    ͪΐͬͱܟԕ͞Ε͕ͪ…
    

    View Slide

24. JavaScript IoT
    

    View Slide

25. View Slide

26. ܅ͷ໊͸ɺJohnny-Fiveɻ
    - http://johnny-five.io/
    - JavaScript Robotics & IoT Platform
    - Released in 2012
    - npm install johnny-five
    

    View Slide

27. Firmata
    

    View Slide

28. ArduinoͰLνΧ (Johnny-Five ver.)
    

    View Slide

29. ࠓ೔࿩͢͜ͱ
    - IoT is Կ
    - IoTࣄ࢝Ί
    - JavaScript IoT ͷ঺հ
    - ΍ͬͯΈͨࣄྫ
    - ·ͱΊ
    

    View Slide

30. JavaScript IoTͷࣄྫ
    

    View Slide

31. ίʔώʔϞχλϦϯά☕
    

    View Slide

32. ☕ x IoT
    - ίʔώʔ͕ҿΈࠒʹͳͬͨΒڭ͑ͯ͘ΕΔIoT
    - Slack௨஌
    - SlackBotͱձ࿩ͯ͠ઃఆԹ౓Λௐ੔Ͱ͖Δ
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. - Slack௨஌
    - npm install slackNode
    - SlackBotͱձ࿩ͯ͠ઃఆԹ౓Λௐ੔Ͱ͖Δ
    - npm install slack-client
    ☕ x IoT x npm
    

    View Slide

37. View Slide

38. - Slack௨஌
    - SlackBotͱձ࿩ͯ͠Թ౓ௐ੔
    

    View Slide

39. ϥϯνʹߦ͖͍ͨ࣌ʹڍ͛Δࡳ
    

    View Slide

40. x IoT
    - ϥϯνʹߦ͖͍ͨҙࢥද໌
    - Slack௨஌
    ʢݩωλ༷ʣ
    

    View Slide

41. View Slide

42. - ηϯα
    - 3࣠Ճ଎౓/δϟΠϩϞδϡʔϧ (ATD6050)
    - ࡳͷޙΖʹઃஔɾࡳͷ্͛ԼΖ͠Λݕ஌
    - Slack௨஌
    - npm install slackNode
    - ࡳΛڍ͛Δ
    - #lunch ʹ @channel Ͱʮϥϯνʹߦ͖͍ͨʯ
    x IoT
    

    View Slide

43. ΄ͱΜͲͷطଘͷηϯαʔ͸
    Johnny-Five্Ͱಈ࡞Մೳ
    

    View Slide

44. !! APIଆͷखް͍αϙʔτ !!
    

    View Slide

45. ʢ൪֎ฤʣ
    mBaaSΛ࢖ͬͯΈΔ
    

    View Slide

46. - IoTσόΠεಛԽmBaaS
    - ηϯαʔσʔλͷϦΞϧλΠϜอଘɾߋ৽ɾऔಘ
    - JavaScriptΛ਺ߦॻ͚ͩ͘Ͱಋೖ
    - npm install milkcocoa
    

    View Slide

47. Johnny-Fiveͱͷ਌࿨ੑ͕
    ΊͪΌͪ͘Όྑ͍
    

    View Slide

48. ྫʣηϯαʔσʔλΛ࢖ͬͯ
    WebϖʔδΛૢ࡞͢Δ
    

    View Slide

49. ੺֎ઢηϯαʔʢਓײηϯαʔʣͷ஋͕
    0Ҏ֎ʢʹਓΛݕ஌ͨ͠ʣ৔߹ɺ
    Milkcocoaʹ {detect : “true”} Λpush͢Δ
    

    View Slide

50. View Slide

51. Milkcocoaʹtrue͕push͞ΕͨΒɺ
    ϒϥ΢βͷbackground-colorΛมߋ͢Δ
    

    View Slide

52. ੺֎ઢηϯαʔ
    

    View Slide

53. View Slide

54. View Slide

55. ·ͱΊ
    

    View Slide

56. - IoTʹڵຯͷ͋ΔWebΤϯδχΞ
    - ·ͣ͸JavaScript IoTͰࣄ࢝Ί
    - Johnny-Five͸͍͍ͧɻ
    - IoTϏδωε < Personal IoT
    - ·ͣ͸਎ͷपΓͷϋοΫ͔Β
    ·ͱΊ
    

    View Slide

57. ༨ஊ
    

    View Slide

58. View Slide

59. CEATEC
    - ITٕज़ͷࠃࡍలࣔձ
    - ࠓ೥ͷςʔϚ
    - CPS (Cyber Physical System)
    - IoT (Internet of Things)
    - ৽نٕज़ࡇΓ
    - େاۀͷϒʔε͕ଟ͍
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. େاۀͱϕϯνϟʔͷίϥϘ
    - Panasonic x Cerevo
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. Happy IoTing!!
    

    View Slide