HTML5/JavaScriptではじめるIoT
MOONGIFT 中津川篤司
自己紹介
2
@moongift
fb.me/moongift.fan
中津川 篤司株式会社MOONGIFT 代表取締役ニフティクラウド mobile backend
エヴァンジェリスト
2004年1月よりオープンソース・ソフトウェアを毎日紹介するブログ MOONGIFT を運営。
http://www.moongift.jp/
hifive エヴァンジェリスト
2015年
5
・Arduino ・Raspberry PI ・Intel Edison ・mbed ・konashi
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アクセス
もあるよ!
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含め)は必修