最新のWeb技術でIoTをする


この記事の内容は[JSConf JP](https://jsconf.jp/2019/)で話した内容です.
資料全体は[こちら](https://speakerdeck.com/9wick/zui-xin-falsewebji-shu-deiotwosuru)にあります。



# アジェンダ

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c824616f-59ba-95ad-55ca-4c9304f80215.png)


# IoTのはじめかた

### とりあえずIoTをやりたい人へ

IoTとはインターネットとThingsがつながることです。
ざっくりと書くとこんな構成ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7b36bdeb-57fa-dc87-cf2d-0f1d2678ac73.png)

この右側のアイコンは皆さんよく知ってるサービスだったりシステムだったりするのではないでしょうか。
メールもslackもよく使いますよね。

逆に左側のセンサ／アクチュエーターはほとんど知らないのではないでしょうか。
直線距離を図る距離センサや、人の有無がわかる人感センサ、物を動かすことができるモーターなどがあります。

IoTをやろう！(というか何かしらハードウェアを作って物理世界に関わろう)とすると、ここのThingsの知識がなくてなかなか難しいことが多いと思います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/0d26381b-d855-f9d3-e547-88c7a6c716e5.png)


でもじつは**<font color="red">とっても身近なThingsがあります</font>**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/46d2f82d-07c9-3569-4359-249193aeeded.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/09e81f5e-b752-4f5f-8a04-8885a7fcaab8.png)


というわけで、JavaScriptでIoTをしたいな！とおもってる人はSmartPhoneのプログラムを書いてみるとIoTをすることができます。


**完**




・・・というのも寂しいので、もう少しお話しします。


### カスタムハードウェアを作りたくなるとき

スマートフォンも十分IoTですが、それじゃ**<font color="red">物足りなくなってくる</font>**ときがあります

- 価格が高い<br/>ex) 1台数万円してしまう
- 機能が多すぎる<br/>ex) 画面はいらない
- 機能が足りない<br/>ex) 物理ボタンがない／温度が取れない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/b7bdb5d9-98ed-ddb1-b682-3deb999917c1.png)

 

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


パーツのカテゴリもだいたい決まっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c46a2014-b122-fb75-4522-9c627586fe73.png)

この中からCPUはどれ、センサはどれ、通信方式はどれ・・・といった形で選んでいきます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/897da629-c718-b60a-d28b-f2669e6650b1.png)

重要なのはCPUで、他のところは後から変更がききやすいですが、ここだけは最初に決めたものから変更するのはおお仕事になります。

# JavaScriptでIoTするときの選択肢

そのCPUを選んだときにJavaScriptができるCPUなのかどうかが決まります。
基本的にはC言語しか使えないCPUが多い（メモリ容量とかの問題）ですが、
最近はJavaScriptでもかけるCPUが出てきています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c9a63b02-955e-ba2e-79ec-87e3948cbd4d.png)


JavaScriptでかけるCPUとしてはESP32とobnizというものになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/63ee0d4a-9ff6-d407-7cc4-d133d6aa4864.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/bc5af05e-6d3a-d5b6-e327-c255245adf85.png)

この２つはどちらもJavaScirptでプログラムを書くことができますが、
JavaScriptが動作する場所が違います。

・・・動作する場所がちがうというと、普段でもなにか似たようなことを言ってるのがありますよね

- Server Side JavaScript
- Client Side JavaScript

この２つの違いも、Server Side / Client Side と同じ概念で、稼働場所が違います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/af0472d6-30f0-9d2b-03a5-a8e77963e4d0.png)




### ESP32 はクライアントサイドJavaScript 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2f8cb6fa-7c04-3e37-e476-43fbc9f2e1f4.png)

CPU上でJavaScriptが動くのがESP32です。
クライアント側で動いている分、高速な応答(マイクロ秒単位での反応とか)ができる代わりに、
プログラムの更新や高いCPUスペックを求めるなどのデメリットがあります。

このブラウザだとこの関数が動かない・・・！みたいなこともあります。


### obniz はサーバーサイドJavaScript 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2df57c2b-7631-f85b-4ce9-224ff36be7c1.png)

サーバー側で動くのがobnizです。
サーバーで動くのでサーバーのJavaScriptバージョンに依存してできることが変動します。
都度通信が発生するので応答性が少々悪くなる(ミリ秒単位での反応)になりますが、自由でフレキシブルなプログラムが可能です。


サーバーと言っていますが、スマートフォンをサーバーにしてHTMLで動かす、ということもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e99cf332-df50-4e95-596b-4c050b0688ec.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/f3899be2-e429-4e63-57ae-cc80c37d4bbb.png)



# Webを活用したIoTができるobnizとは

ここではサーバーサイドJavaScriptのobnizでIoTをやる方法を説明します。

手順は
1. カスタムハードウェアを作成する
2. HTML/JavaScriptプログラムを書く
です。


いくつか具体例を書いていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/2c4e8795-5110-0122-bae8-3c04d4437ca6.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/28a368ff-ddf9-0cb3-2a05-ceb83e145332.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/63cd2d60-b822-94c0-ca53-872950744fc4.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/baa33da4-53f8-2e07-4e96-c2c43b4a1cf9.png)


温度取得やLED点灯が１関数で終わるので、あとはセンサやアクチュエーターがどんな物があるかわかれば作れそうですよね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/dd05c95d-f5c7-ddb9-0e6f-d86f15e2d936.png)


### センサの知識

センサ／アクチュエーターの知識は、事例を見ながら学ぶのがわかりやすいかなと思います、

- トイレの人の有無を確認して空き個室管理
人感センサという人の動きを検知するセンサーを使って、空いているかどうか判定しています。
あくまで"動き"なので、ずっと止まっている人がいても、いない判定をします


- [マリオコイン](https://twitter.com/qurihara/status/1014656354978447360)
ゲームをやって、ゲーム内でコインが出てきたら実際に５００円玉が出てくる！というものです。
コインを押し出すためにサーボモーターというモーターを使っています

- ４足歩行ロボット<Br/>[その１](https://twitter.com/google_homer_/status/1047069186214846465)<Br/>[その２](https://twitter.com/google_homer_/status/1048485487113986048)
こちらのサーボモーターというものを使っています。
4つの足を4つのサーボモーターで作り、うまく足を動かすことで歩行しています

- [鉄道模型](https://www.youtube.com/watch?v=B2rlsFWa5a8&feature=youtu.be)
ミニ四駆でおなじみのDCモーターをつかって動かしています。


ほかにもQiita内をIoTとかで検索するとたくさん事例が出てくるので、見てみてください。


# まとめ

JavaScriptでIoTをやりたいならスマートフォンがおすすめ！
スマホで物足りなくなってきたらobnizかESP32。
obnizはサーバーサイドJavaScript的に、簡単にかけるからおすすめ