最新のWeb技術でIoTをする

JavaScriptはクライアントサイドでHTMLを動的に動かしたり、サーバーサイドとして様々な処理をしたりすることができますが、リアルサイドとして現実世界のモーターやセンサなどの"もの"を制御することもできます。リアルサイドでもJavaScriptを使うことで、ディスプレイの枠にとらわれない表現方法が可能になったり、部屋に人がいるかなどの現実の状態を取得する事が可能になったりと、できることがまた一段と広がります。 本セッションではJavaScriptでのリアルサイドについて、どんな技術選択肢があるかから扱う方法、どういったものが作れるか等についてお話します。

Transcript

1. 株式会社CambrianRobotics 最新のWEB技術でIOT開発をする
2. 木戸 康平（Kohei Kido） JavaScriptでIoTができるプラットフォーム obniz(オブナイズ)作ってます CambrianRobotics inc. Co-Founder & Engineer 9wick kohei.kido
3. ターゲット • IoTをやってみたいけどやってない人 • JavaScriptでIoTがやりたい人 • C言語でIoTをやるのに疲れた人
4. 今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは
5. 今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは
6. IoT = Internet of Things
7. IoT = Internet of Things Things Internet ThingsとInternetがつながること
8. IoT = Internet of Things Things Internet Thingsのことがよくわからなくて難しそう
9. Thingsにはいろいろなものがあるが とっても身近なThingsがある
10. Smart Phone
11. Smart Phone は • インターネットに繋がっている • センサが付いてる • JavaScriptでもかける 十分にIoTといえるデバイス
12. Smart Phone は • インターネットに繋がっている • センサが付いてる • JavaScriptでもかける 十分にIoTといえるデバイス ※実際のIoT案件でも使われる
13. とりあえず簡単にIoTをやりたい人は センサを使ったスマホアプリを作りましょう
14. とりあえず簡単にIoTをやりたい人は センサを使ったスマホアプリを作りましょう 完
15. スマートフォンも十分IoT だけど、それじゃ物足りなくなってくる
16. スマートフォンも十分IoT だけど、それじゃ物足りなくなってくる • 価格が高い ex) 1台数万円してしまう • 機能が多すぎる ex) 画面はいらない • 機能が足りない ex) 物理ボタンがない／温度が取れない
17. スマートフォンじゃ物足りない そういったときに 専用ハードウェアを作ろうとなる
18. 専用ハードウェアといっても CPUやセンサを選ぶだけ それらをつなげて完成させることが多い
19. 専用ハードウェアといっても CPUやセンサを選ぶだけ それらをつなげて完成させることが多い 自作PCみたいなもの
20. これらから選んで組み合わせていく CPU Sensor Motor Communication PIC Arduino ESP32 obniz Temperature Accel Gyro GPS Button DC Motor Servo Motor Solenoid Stepper Motor 3G LTE Wi-fi
21. CPU Sensor Motor Communication PIC Arduino ESP32 obniz Temperature Accel Gyro GPS Button DC Motor Servo Motor Solenoid Stepper Motor 3G LTE Wi-fi これらから選んで組み合わせていく いちばん重要なのはCPU Androidアプリ作るのか、iPhoneアプリ作るのか Windowsアプリ作るのか、Webアプリ作るのかぐらいの選択肢
22. CPU PIC Arduino ESP32 obniz 選ぶCPUによってプログラム言語も変わってくる Androidでswiftが使えないのと同じ
23. CPU PIC Arduino ESP32 obniz 選ぶCPUによってプログラム言語も変わってくる Androidでswiftが使えないのと同じ JavaScriptでプログラムができる C言語でしかプログラムができない
24. CPUを決めてしまえば必要なものを追加するだけ 気持ちはカスタムスマホ作成 CPU Sensor Motor Communication PIC Arduino ESP32 obniz Temperature Accel Gyro GPS Button DC Motor Servo Motor Solenoid Stepper Motor 3G LTE Wi-fi
25. Googleの2016年5月発表プロジェクト
26. Googleの2016年5月発表プロジェクト 2016年9月に中断
27. 今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは
28. 基本的にIoTで使えるCPUは C言語のみ対応
29. 基本的にIoTで使えるCPUは C言語のみ対応 JavaScriptが使えるのはレア
30. 基本的にIoTで使えるCPUは C言語のみ対応 JavaScriptが使えるのはレア JavaScriptが使えるぐらい パワーがあるCPUは高い
31. ESP32 obniz
32. これはどちらもJavaScriptで動かせる ESP32 obniz
33. これはどちらもJavaScriptで動かせる ESP32 obniz
34. これはどちらもJavaScriptで動かせる 違いはJavaScriptを書く場所 ESP32 obniz
35. • Client Side JavaScript • Server Side JavaScript
36. • Client Side JavaScript • Server Side JavaScript
37. • Client Side JavaScript • Server Side JavaScript obniz ESP32
38. • Client Side JavaScript • Server Side JavaScript obniz ESP32 JavaScriptのランタイムが入る サーバー側JavaScriptから 遠隔操作ができる
39. • Client Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード コンパイル バイナリファイル インストール (USBケーブル利用)
40. • Client Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード コンパイル バイナリファイル インストール (USBケーブル利用) ここで JavaScriptが 動く
41. • Client Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード コンパイル バイナリファイル インストール (USBケーブル利用) スマホアプリをJavaScriptで 作ったイメージ ここで JavaScriptが 動く
42. • Server Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード 都度連携 (wifi利用)
43. • Server Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード ここで JavaScriptが 動く 都度連携 (wifi利用)
44. • Server Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード API連携をしているイメージ ここで JavaScriptが 動く 都度連携 (wifi利用)
45. • Server Side JavaScript JavaScriptランタイム 自分で作ったJavaScriptコード API連携をしているイメージ ここで HTML/JavaScript が動く 都度連携 (wifi利用)
46. • Client Side JavaScript • Server Side JavaScript obniz ESP32
47. 今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは
48. サーバーサイドのJavaScriptを使うことで フル機能のJavaScriptが使える • TypeScript • Vue/React • jQuery
49. たとえばHTMLで ボタンを押したらonと表示する
50. たとえばHTMLで ボタンを押したらLEDをつける
51. たとえばHTMLで ボタンを押したらLEDをつける LEDとCPUをつないで カスタムハードウェア作成
52. たとえばHTMLで ボタンを押したらLEDをつける
53. たとえばHTMLで ボタンを押したらLEDをつける デバイスの初期設定
54. たとえばHTMLで ボタンを押したらLEDをつける 初期設定が終わったら普段のJavaScriptと同じ デバイスの初期設定
55. ボタンを押したらモーターを回す モーターとCPUをつないで カスタムハードウェア作成
56. ボタンを押したらモーターを回す
57. ボタンを押したらモーターを回す 初期設定と 呼び出す関数が変わっただけ
58. デバイスで気温を取得する 初期設定 温度取得
59. HTMLじゃなくてNode.jsでも Expressで温度取得している例
60. JavaScriptがかければ、 あとはどんなセンサやモーターがあるかの 知識があればIoTができる
61. JavaScriptがかければ、 あとはどんなセンサやモーターがあるかの 知識があればIoTができる
62. JavaScriptがかければ、 あとはどんなセンサやモーターがあるかの 知識があればIoTができる 事例をみて学んでいくのが早い
63. 事例紹介:ビジネス系 • トイレの人の有無を確認して空き個室管理 • 機器の電池の電圧を監視して 減ってきたらアラート 人感センサ 電圧センサ
64. 事例紹介:コミュニティ系 • マリオコイン https://twitter.com/qurihara/status/1014656354978447360 • ４足歩行ロボット https://twitter.com/google_homer_/status/1047069186214846465 https://twitter.com/google_homer_/status/1048485487113986048 • 鉄道模型 https://www.youtube.com/watch?v=B2rlsFWa5a8&feature=youtu.be 音センサ+サーボモーター サーボモーター モーター
65. Obnizのアドベントカレンダーもあるので チェックしてみてください
66. JavaScriptでもIoTができる時代になったので ぜひ皆さんやってみてください ありがとうございました。