html5/javascript ではじめるiot
TRANSCRIPT
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）
iOS/Androidアプリ化
• PhoneGap/Cordova/Monaca
• アプリカン
ReactNativeでブレイクするかも？
ポケットミク
http://otonanokagaku.net/nsx39/appli/01/
http://www6.plala.or.jp/TimeTripper/nsk39/mikublock.html
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含め）は必修