HTML5/JS勉強会「HTML5/JavaScript ではじめるIoT」

HTML5/JavaScriptではじめるIoT

MOONGIFT 中津川篤司

自己紹介

2

@moongift

fb.me/moongift.fan

中津川 篤司株式会社MOONGIFT 代表取締役ニフティクラウド mobile backend

　　　　　　　　　　エヴァンジェリスト

2004年1月よりオープンソース・ソフトウェアを毎日紹介するブログ MOONGIFT を運営。

http://www.moongift.jp/

hifive エヴァンジェリスト

0x10年前

4

2015年

5

・Arduino ・Raspberry PI ・Intel Edison ・mbed ・konashi

ネットワーク×デバイス

7

何をするか？

Raspberry PI買った！　→　Lチカしてみた Arduino買った！　→　Lチカしてみた mbed買った！　→　Lチカし（ry Intel Edison買った！　→　(ry

何を買ったではなく、何をするか？

つまり表現大事

表現に必要なモノ

• マイコン

• インプット（センサー）

• アウトプット

アウトプットと言えば？

処理する言語と言えば？

なんでHTML5/JS？• 今回のテーマだから

• CORS問題（XMLHttpRequest2）

• Canvas/WebGL

• WebSocket/WebRTC

• node.js（特にBTE系）

JavaScriptサポート• Raspberry PI（node.jsサポート）

• Intel Edison（node.jsサポート）

• Pebble（CloudPebble）

• BeaconEgg（iBeacon）

• Konashi（konashi.js）→デモ

• IRKit（IRKitjs）

Canvas

https://www.youtube.com/watch?v=GGPIk8F5wOs

iOS/Androidアプリ化

• PhoneGap/Cordova/Monaca

• アプリカン

ReactNativeでブレイクするかも？

ポケットミク

http://otonanokagaku.net/nsx39/appli/01/

http://www6.plala.or.jp/TimeTripper/nsk39/mikublock.html

WebGL

• MozVR

• Unity5　　WebGLサポート（まだプレビュー）

http://mozvr.com/

IoTの3大要素

20

IoTデバイス

データストレージ

センサー/出力

センサー

•照度•カメラ•温度•湿度• Felicaリーダー•ボタン

21

正直微妙… もっと面白いセンサーが

欲しい！

出力

• LCD• LED•コンピュータ• hue

22

もっと微妙

23

https://www.youtube.com/watch?v=YUUsJSDa7PE

Arduino module

• ArduinoとLittleBitsを連携させるためのモジュール ↓• LittleBitsのIOを持ったArduino互換モジュール（Leonardo）

24

https://www.youtube.com/watch?v=FXQ9d3qJt3Q

39.95ドル！

CloudBit module

• Arch Linux搭載のモジュール•改造するとSSHができます• LittleBits Cloud Controlで外部操作可能（WebSocket）

25

59.95ドル！

その他入力系/出力系

http://control.littlebitscloud.cc/

デモ

ボタンを押すとプッシュ通知

28

var pin4 = new m.Gpio(4); pin4.read();

IoTの3大要素

29

IoTデバイス

データストレージ

センサー/出力

よくない利用

30

IoTデバイスデスクトップ スマートフォン

Webサーバ

よくない利用

31

デスクトップ スマートフォン

サーバを間に挟みましょう

32

IoTデバイス

デスクトップ スマートフォン

サーバ

SDK REST API

IoTデバイスもあるよ！

IoTの問題2

33

IoTデバイスに何かあった時、通知したい 今ならプッシュ通知がスマート 　→ APNs、GCMに接続する必要あり 　→ デバイストークンの管理

よくない利用

34

IoTデバイス スマートフォンAPNs/GCM　デバイストークンの管理

通信手段

35

サーバを使った例

IoTデバイス スマートフォンAPNs/GCM

！

サーバ

HTTP/HTTPSアクセス

もあるよ！

プッシュ通知を使った例

36

var NCMB = require("./ncmb").NCMB; NCMB.initialize(“APP_KEY”, “CLIENT_KEY"); function sendPush(high, value) { NCMB.Push.send({ "immediateDeliveryFlag": true, "message": high ? "電気がつきました" : "消灯しました", }, { success: function() { console.log("Successful!"); // 成功 }, error: function(error) { // エラー console.log("Failed"); } }); }

対応プラットフォーム

38

Objective-C（2014年12月より64bit対応）

Android

JavaScript（2014年12月よりnodeサポート！）

Unity

まとめ• マイコン、インプット、アウトプットともに材料は既に揃っている

• 表現場所としてHTML5は手軽（作り手、閲覧者ともに）。ただし高度な表現はCanvas/WebGLの習得必須

• JavaScript（node.js含め）は必修