最新のWeb技術でIoTをする

179d41d0fdd38c6980de9f2ae0e4768a?s=47 kido
December 01, 2019

 最新のWeb技術でIoTをする

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

179d41d0fdd38c6980de9f2ae0e4768a?s=128

kido

December 01, 2019
Tweet

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 • 4足歩行ロボット 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ができる時代になったので ぜひ皆さんやってみてください ありがとうございました。