Tech Buzz HTML5/JavaScript勉強会用資料です。

1. HTML5/JavaScript
ではじめるIoT
MOONGIFT 中津川篤司

2. 自己紹介
2
@moongift
fb.me/moongift.fan
中津川 篤司
株式会社MOONGIFT 代表取締役
ニフティクラウド mobile backend
エヴァンジェリスト
2004年1月よりオープンソース・ソフトウェアを毎
日紹介するブログ MOONGIFT を運営。
http://www.moongift.jp/
hifive エヴァンジェリスト

4. 0x10年前
4

5. 2015年
5
・Arduino
・Raspberry PI
・Intel Edison
・mbed
・konashi

7. ネットワーク×デバイス
7

8. 何をするか？

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

10. 何を買ったではな
く、何をするか？
つまり表現大事

11. 表現に必要なモノ
• マイコン
• インプット（センサー）
• アウトプット

12. アウトプットと言えば？

13. 処理する言語と言えば？

14. なんでHTML5/JS？
• 今回のテーマだから
• CORS問題（XMLHttpRequest2）
• Canvas/WebGL
• WebSocket/WebRTC
• node.js（特にBTE系）

15. JavaScriptサポート
• Raspberry PI（node.jsサポート）
• Intel Edison（node.jsサポート）
• Pebble（CloudPebble）
• BeaconEgg（iBeacon）
• Konashi（konashi.js）→デモ
• IRKit（IRKitjs）

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

17. iOS/Androidアプリ化
• PhoneGap/Cordova/Monaca
• アプリカン
ReactNativeでブレイクするかも？

18. ポケットミク
http://otonanokagaku.net/nsx39/appli/01/
http://www6.plala.or.jp/TimeTripper/nsk39/
mikublock.html

19. WebGL
• MozVR
• Unity5 WebGLサポート（まだプレビュー）
http://mozvr.com/

20. IoTの3大要素
20
IoTデバイス
データストレージ
センサー/出力

21. センサー
• 照度
• カメラ
• 温度
• 湿度
• Felicaリーダー
• ボタン
21
正直微妙…
もっと面白いセンサーが
欲しい！

22. 出力
• LCD
• LED
• コンピュータ
• hue
22
もっと微妙

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

24. Arduino module
• ArduinoとLittleBitsを連携させるためのモジュール
↓
• LittleBitsのIOを持ったArduino互換モジュール
（Leonardo）
24
https://www.youtube.com/watch?
v=FXQ9d3qJt3Q
39.95ドル！

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

26. その他入力系/出力系

27. http://control.littlebitscloud.cc/
デモ

28. ボタンを押すとプッシュ通知
28
var pin4 = new m.Gpio(4);
pin4.read();

29. IoTの3大要素
29
IoTデバイス
データストレージ
センサー/出力

30. よくない利用
30
IoTデバイス
デスクトップ
スマートフォン
Webサーバ

31. よくない利用
31
デスクトップ
スマートフォン

32. サーバを間に挟みましょう
32
IoTデバイス
デスクトップ
スマートフォン
サーバ
SDK
REST API
IoTデバイス
もあるよ！

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

34. よくない利用
34
IoTデバイス スマートフォンAPNs/GCM
デバイストークンの管理
通信手段

35. 35
サーバを使った例
IoTデバイス スマートフォンAPNs/GCM
！
サーバ
HTTP/HTTPSアクセス
もあるよ！

36. プッシュ通知を使った例
36

37. 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. 対応プラットフォーム
38
Objective-C
（2014年12月より64bit対応）
Android
JavaScript
（2014年12月よりnodeサポート！）
Unity

39. まとめ
• マイコン、インプット、アウトプットともに材料は
既に っている
• 表現場所としてHTML5は手軽（作り手、閲覧者と
もに）。ただし高度な表現はCanvas/WebGLの習
得必須
• JavaScript（node.js含め）は必修