さあ！Javascriptでデバイスとやりとりするよ！

さあ！Javascriptでデバイスとやりとりするよ！

1. 1. 2015年末JavaScript祭ゆく年くる年 さあ！JavaScriptで デバイスとやりとりするよ！ ワンフットシーバス 田中正吾
2. 2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 3. 自己紹介
4. 4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い 現在に至る。 最近は、JavaScriptやHTML5アニメーション、 スマートフォン演出制作のワークフロー改善に 関わったりしていました。 デジタルサイネージやアプリ制作もやります。
5. 5. デバイスとやりとりするネタですと 最近ウォンバットとIoTの話をしました
6. 6. さっそくはじめましょう
7. 7. 今回のタイトル
8. 8. さあ！
9. 9. JavaScriptと
10. 10. デバイスとやりとりするよ！
11. 11. ということで
12. 12. まずブラウザ上で JavaScriptボタン
13. 13. まずブラウザ上で JavaScriptボタン $(dom).on(“click”,function(){ // なにか起きるよ!! })
14. 14. ブラウザ （表示側） このようにJavaScriptは はじめはブラウザ表示上が主戦場
15. 15. まずNodeJSの登場で サーバーサイドもできるように！ ブラウザ （表示側） サーバー (NodeJS) NodeJS
16. 16. なんと最近では
17. 17. NodeJSからハードウェアの デバイスもつながるようになってきた！ ブラウザ （表示側） サーバー (NodeJS) デバイス (NodeJS) NodeJS
18. 18. デバイスとは。 引用：
19. 19. デバイス＝リアルの何か 引用：
20. 20. つまり リアルの ボタン
21. 21. つまり リアルの何かと
22. 22. つまり リアルの何かとやりとりできる！
23. 23. JavaScriptでのデバイス連携の しくみをお伝えしていきます ！
24. 24. デバイス連携する JavaScriptでのしくみ
25. 25. 今日お伝えするJavaScriptでの デバイス連携のしくみ
26. 26. まず、デバイスがPCと会話しやすくする Arduino（あるでぃーの）というしくみがある ♪
27. 27. ArduinoだけはJavaScriptでなく C++風の独自の言語
28. 28. ArduinoはUSB（シリアルポート）経由で NodeJSのserialportライブラリと会話ができる
29. 29. PCと、こういう風に会話できる！
30. 30. node-searialportのコードの雰囲気
31. 31. Arduino側から特定の文字が来たら 動作するようにしています
32. 32. さらに、サーバーとしてのNodeJS(express)も 加わるとWEBとの相性がとてもよくなります NodeJS
33. 33. 加えて、リアルタイムに強いSocket通信が NodeJS(socket.io)で扱いやすい NodeJSの 司令塔サーバー
34. 34. デバイスの動きをすぐに反映できる。 WEBの反応をすぐに伝えられる。 NodeJSの 司令塔サーバー
35. 35. 司令塔サーバー側の NodeJSコードの雰囲気
36. 36. 司令塔サーバーで中継して WEBとデバイスでいろいろやりとりできる！ NodeJSの 司令塔サーバー
37. 37. たくさんつくれば、 いろいろ測れる、うごかせる！
38. 38. 余談：おのおのの接続ポイントでの実装は 見通しやすくするためメリハリをつけてます （ローカルサーバー→司令塔に実装多めにしてる） local 実装小 実装小 実装中 実装大
39. 39. 私のブログに今回の話に関連しそうな記事を ピックアップしました。よろしければ。 URL : http://www.1ft-seabass.jp/memo/
40. 40. デバイスの動き
41. 41. さて今回のデバイス①
42. 42. デバイス1号（でばいすいちごう）
43. 43. デバイス1号（でばいすいちごう）
44. 44. 光ったりする！
45. 45. ボタン押せたりする！
46. 46. 中身はこんな感じ
47. 47. littleBitsという磁石でつないで 電子工作できるデバイスで構成
48. 48. カラーごとの役割を意識して つなげて磁石でパチパチつなげて設計できる 電源が流れて POWER スイッチを押すと INPUT ライトがつくよ OUTPUT
49. 49. そんなlittleBitsには ArduinoもあるのでPCと連携しやすい
50. 50. さきほどの連携図と照らし合わせると デバイス＋Arduino部分は以下になります
51. 51. PCの役割のところは、今回は Raspberry PiというミニPCにやってもらう
52. 52. さきほどの連携図と照らし合わせると PC部分がRaspberry Piになります
53. 53. そして、SORACOMがLTE/3G接続を担当
54. 54. Raspberry Pi FS01BU + SORACOM Air (通信をする) Raspberry Pi (サーバー) SORACOMで少ない初期コストで デバイスの「つながる」を実現
55. 55. これを箱を組み立てて
56. 56. これを箱を組み立てて
57. 57. 実装してGO!!!
58. 58. いよいよデモ
59. 59. デバイス1号
60. 60. ボタンでWEBと連携して
61. 61. 画面がしゃべります (CreateJS＋Web Speech API)
62. 62. 画面がしゃべります (CreateJS＋Web Speech API)
63. 63. デモ
64. 64. littleBitsはこんなやりとり
65. 65. IFTTT(Maker Channel)を利用し スマホ連携で光ります
66. 66. デモ
67. 67. littleBitsはこんなやりとり
68. 68. うまくいってほしい
69. 69. ちょっと準備しまーす ON
70. 70. デバイス②
71. 71. デバイス2号（でばいすにごう）
72. 72. 組み立てる
73. 73. サーボ矢印と赤外線センサの構成
74. 74. サーボ矢印が私のTwitter投稿と反応
75. 75. 今からのみんなの#jsfes投稿にも 反応するかどうか！？
76. 76. デモ
77. 77. 赤外線リモコンともやりとり
78. 78. 画面がしゃべります (CreateJS＋Web Speech API)
79. 79. 画面がしゃべります (CreateJS＋Web Speech API)
80. 80. デモ
81. 81. 実は操作したものはSlackにもログ連携
82. 82. うまくいってほしい
83. 83. まとめ
84. 84. このようにやりとりできると いろいろおもしろい！
85. 85. 今まで見たデモから 発展させてみる
86. 86. デバイス→JavaScript→WEBの例
87. 87. 自分の知りたい現実のデータ貯めて 遠くでいつでも見ることができる！ 家の温度
88. 88. 自分の知りたい現実のデータ貯めて 遠くでいつでも見ることができる！ 家の温度 WEBのよいところ 自動・蓄積・遠隔
89. 89. WEB→JavaScript→デバイスの例
90. 90. WEBの情報をデバイスに 反応させることもできる！ デバイス 盛り上がってるよ SNSなど
91. 91. WEBの情報をデバイスに 反応させることもできる！ デバイス 盛り上がってるよ SNSなど WEBのよいところ 収集・通知・見える化
92. 92. ➔JavaScriptでデバイスとWEBが連携しやすく なってきた。サーバーや表示も絡めて、いろ いろ楽しい！ ➔JavaScriptでWEBのよいところ（自動・蓄 積・遠隔・収集・見える化など）をデバイス やセンサーと絡めると新しい可能性が！ まとめ
93. 93. 2016年ぜひJavaScriptで デバイスとやりとりしてみてください！
94. 94. ご清聴いただきまして ありがとうございました！