最新のWeb技術でIoTをする

by kido

Slide 1

Slide 1 text

株式会社CambrianRobotics 最新のWEB技術でIOT開発をする

Slide 2

Slide 2 text

木戸康平（Kohei Kido） JavaScriptでIoTができるプラットフォーム obniz(オブナイズ)作ってます CambrianRobotics inc. Co-Founder & Engineer 9wick kohei.kido

Slide 3

Slide 3 text

ターゲット • IoTをやってみたいけどやってない人 • JavaScriptでIoTがやりたい人 • C言語でIoTをやるのに疲れた人

Slide 4

Slide 4 text

今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは

Slide 5

Slide 5 text

今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは

Slide 6

Slide 6 text

IoT = Internet of Things

Slide 7

Slide 7 text

IoT = Internet of Things Things Internet ThingsとInternetがつながること

Slide 8

Slide 8 text

IoT = Internet of Things Things Internet Thingsのことがよくわからなくて難しそう

Slide 9

Slide 9 text

Thingsにはいろいろなものがあるがとっても身近なThingsがある

Slide 10

Slide 10 text

Smart Phone

Slide 11

Slide 11 text

Smart Phone は • インターネットに繋がっている • センサが付いてる • JavaScriptでもかける十分にIoTといえるデバイス

Slide 12

Slide 12 text

Smart Phone は • インターネットに繋がっている • センサが付いてる • JavaScriptでもかける十分にIoTといえるデバイス ※実際のIoT案件でも使われる

Slide 13

Slide 13 text

とりあえず簡単にIoTをやりたい人はセンサを使ったスマホアプリを作りましょう

Slide 14

Slide 14 text

とりあえず簡単にIoTをやりたい人はセンサを使ったスマホアプリを作りましょう完

Slide 15

Slide 15 text

スマートフォンも十分IoT だけど、それじゃ物足りなくなってくる

Slide 16

Slide 16 text

スマートフォンも十分IoT だけど、それじゃ物足りなくなってくる • 価格が高い ex) 1台数万円してしまう • 機能が多すぎる ex) 画面はいらない • 機能が足りない ex) 物理ボタンがない／温度が取れない

Slide 17

Slide 17 text

スマートフォンじゃ物足りないそういったときに専用ハードウェアを作ろうとなる

Slide 18

Slide 18 text

専用ハードウェアといっても CPUやセンサを選ぶだけそれらをつなげて完成させることが多い

Slide 19

Slide 19 text

専用ハードウェアといっても CPUやセンサを選ぶだけそれらをつなげて完成させることが多い自作PCみたいなもの

Slide 20

Slide 20 text

これらから選んで組み合わせていく CPU Sensor Motor Communication PIC Arduino ESP32 obniz Temperature Accel Gyro GPS Button DC Motor Servo Motor Solenoid Stepper Motor 3G LTE Wi-fi

Slide 21

Slide 21 text

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アプリ作るのかぐらいの選択肢

Slide 22

Slide 22 text

CPU PIC Arduino ESP32 obniz 選ぶCPUによってプログラム言語も変わってくる Androidでswiftが使えないのと同じ

Slide 23

Slide 23 text

CPU PIC Arduino ESP32 obniz 選ぶCPUによってプログラム言語も変わってくる Androidでswiftが使えないのと同じ JavaScriptでプログラムができる C言語でしかプログラムができない

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Googleの2016年5月発表プロジェクト

Slide 26

Slide 26 text

Googleの2016年5月発表プロジェクト 2016年9月に中断

Slide 27

Slide 27 text

今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは

Slide 28

Slide 28 text

基本的にIoTで使えるCPUは C言語のみ対応

Slide 29

Slide 29 text

基本的にIoTで使えるCPUは C言語のみ対応 JavaScriptが使えるのはレア

Slide 30

Slide 30 text

基本的にIoTで使えるCPUは C言語のみ対応 JavaScriptが使えるのはレア JavaScriptが使えるぐらいパワーがあるCPUは高い

Slide 31

Slide 31 text

ESP32 obniz

Slide 32

Slide 32 text

これはどちらもJavaScriptで動かせる ESP32 obniz

Slide 33

Slide 33 text

これはどちらもJavaScriptで動かせる ESP32 obniz

Slide 34

Slide 34 text

これはどちらもJavaScriptで動かせる違いはJavaScriptを書く場所 ESP32 obniz

Slide 35

Slide 35 text

• Client Side JavaScript • Server Side JavaScript

Slide 36

Slide 36 text

• Client Side JavaScript • Server Side JavaScript

Slide 37

Slide 37 text

• Client Side JavaScript • Server Side JavaScript obniz ESP32

Slide 38

Slide 38 text

• Client Side JavaScript • Server Side JavaScript obniz ESP32 JavaScriptのランタイムが入るサーバー側JavaScriptから遠隔操作ができる

Slide 39

Slide 39 text

• Client Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコードコンパイルバイナリファイルインストール (USBケーブル利用)

Slide 40

Slide 40 text

• Client Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコードコンパイルバイナリファイルインストール (USBケーブル利用) ここで JavaScriptが動く

Slide 41

Slide 41 text

• Client Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコードコンパイルバイナリファイルインストール (USBケーブル利用) スマホアプリをJavaScriptで作ったイメージここで JavaScriptが動く

Slide 42

Slide 42 text

• Server Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコード都度連携 (wifi利用)

Slide 43

Slide 43 text

• Server Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコードここで JavaScriptが動く都度連携 (wifi利用)

Slide 44

Slide 44 text

• Server Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコード API連携をしているイメージここで JavaScriptが動く都度連携 (wifi利用)

Slide 45

Slide 45 text

• Server Side JavaScript JavaScriptランタイム自分で作ったJavaScriptコード API連携をしているイメージここで HTML/JavaScript が動く都度連携 (wifi利用)

Slide 46

Slide 46 text

• Client Side JavaScript • Server Side JavaScript obniz ESP32

Slide 47

Slide 47 text

今日の話 • IoTのはじめかた • JavaScriptでIoTするときの選択肢 • Webを活用したIoTができるobnizとは

Slide 48

Slide 48 text

サーバーサイドのJavaScriptを使うことでフル機能のJavaScriptが使える • TypeScript • Vue/React • jQuery

Slide 49

Slide 49 text

たとえばHTMLでボタンを押したらonと表示する

Slide 50

Slide 50 text

たとえばHTMLでボタンを押したらLEDをつける

Slide 51

Slide 51 text

たとえばHTMLでボタンを押したらLEDをつける LEDとCPUをつないでカスタムハードウェア作成

Slide 52

Slide 52 text

たとえばHTMLでボタンを押したらLEDをつける

Slide 53

Slide 53 text

たとえばHTMLでボタンを押したらLEDをつけるデバイスの初期設定

Slide 54

Slide 54 text

たとえばHTMLでボタンを押したらLEDをつける初期設定が終わったら普段のJavaScriptと同じデバイスの初期設定

Slide 55

Slide 55 text

ボタンを押したらモーターを回すモーターとCPUをつないでカスタムハードウェア作成

Slide 56

Slide 56 text

ボタンを押したらモーターを回す

Slide 57

Slide 57 text

ボタンを押したらモーターを回す初期設定と呼び出す関数が変わっただけ

Slide 58

Slide 58 text

デバイスで気温を取得する初期設定温度取得

Slide 59

Slide 59 text

HTMLじゃなくてNode.jsでも Expressで温度取得している例

Slide 60

Slide 60 text

JavaScriptがかければ、あとはどんなセンサやモーターがあるかの知識があればIoTができる

Slide 61

Slide 61 text

JavaScriptがかければ、あとはどんなセンサやモーターがあるかの知識があればIoTができる

Slide 62

Slide 62 text

JavaScriptがかければ、あとはどんなセンサやモーターがあるかの知識があればIoTができる事例をみて学んでいくのが早い

Slide 63

Slide 63 text

事例紹介:ビジネス系 • トイレの人の有無を確認して空き個室管理 • 機器の電池の電圧を監視して減ってきたらアラート人感センサ電圧センサ

Slide 64

Slide 64 text

事例紹介:コミュニティ系 • マリオコイン 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 音センサ+サーボモーターサーボモーターモーター

Slide 65

Slide 65 text

Obnizのアドベントカレンダーもあるのでチェックしてみてください

Slide 66

Slide 66 text

JavaScriptでもIoTができる時代になったのでぜひ皆さんやってみてくださいありがとうございました。