Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5/JavaScript ではじめるIoT

9,403 views

Published on

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

Published in: Technology

HTML5/JavaScript ではじめるIoT

  1. 1. HTML5/JavaScript ではじめるIoT MOONGIFT 中津川篤司
  2. 2. 自己紹介 2 @moongift fb.me/moongift.fan 中津川 篤司 株式会社MOONGIFT 代表取締役 ニフティクラウド mobile backend           エヴァンジェリスト 2004年1月よりオープンソース・ソフトウェアを毎 日紹介するブログ MOONGIFT を運営。 http://www.moongift.jp/ hifive エヴァンジェリスト
  3. 3. 0x10年前 4
  4. 4. 2015年 5 ・Arduino ・Raspberry PI ・Intel Edison ・mbed ・konashi
  5. 5. ネットワーク×デバイス 7
  6. 6. 何をするか?
  7. 7. Raspberry PI買った! → Lチカしてみた Arduino買った! → Lチカしてみた mbed買った! → Lチカし(ry Intel Edison買った! → (ry
  8. 8. 何を買ったではな く、何をするか? つまり表現大事
  9. 9. 表現に必要なモノ • マイコン • インプット(センサー) • アウトプット
  10. 10. アウトプットと言えば?
  11. 11. 処理する言語と言えば?
  12. 12. なんでHTML5/JS? • 今回のテーマだから • CORS問題(XMLHttpRequest2) • Canvas/WebGL • WebSocket/WebRTC • node.js(特にBTE系)
  13. 13. JavaScriptサポート • Raspberry PI(node.jsサポート) • Intel Edison(node.jsサポート) • Pebble(CloudPebble) • BeaconEgg(iBeacon) • Konashi(konashi.js)→デモ • IRKit(IRKitjs)
  14. 14. Canvas https://www.youtube.com/watch?v=GGPIk8F5wOs
  15. 15. iOS/Androidアプリ化 • PhoneGap/Cordova/Monaca • アプリカン ReactNativeでブレイクするかも?
  16. 16. ポケットミク http://otonanokagaku.net/nsx39/appli/01/ http://www6.plala.or.jp/TimeTripper/nsk39/ mikublock.html
  17. 17. WebGL • MozVR • Unity5  WebGLサポート(まだプレビュー) http://mozvr.com/
  18. 18. IoTの3大要素 20 IoTデバイス データストレージ センサー/出力
  19. 19. センサー • 照度 • カメラ • 温度 • 湿度 • Felicaリーダー • ボタン 21 正直微妙… もっと面白いセンサーが 欲しい!
  20. 20. 出力 • LCD • LED • コンピュータ • hue 22 もっと微妙
  21. 21. 23 https://www.youtube.com/watch? v=YUUsJSDa7PE
  22. 22. Arduino module • ArduinoとLittleBitsを連携させるためのモジュール
 ↓ • LittleBitsのIOを持ったArduino互換モジュール (Leonardo) 24 https://www.youtube.com/watch? v=FXQ9d3qJt3Q 39.95ドル!
  23. 23. CloudBit module • Arch Linux搭載のモジュール • 改造するとSSHができます • LittleBits Cloud Controlで外部操作可能(WebSocket) 25 59.95ドル!
  24. 24. その他入力系/出力系
  25. 25. http://control.littlebitscloud.cc/ デモ
  26. 26. ボタンを押すとプッシュ通知 28 var pin4 = new m.Gpio(4); pin4.read();
  27. 27. IoTの3大要素 29 IoTデバイス データストレージ センサー/出力
  28. 28. よくない利用 30 IoTデバイス デスクトップ スマートフォン Webサーバ
  29. 29. よくない利用 31 デスクトップ スマートフォン
  30. 30. サーバを間に挟みましょう 32 IoTデバイス デスクトップ スマートフォン サーバ SDK REST API IoTデバイス もあるよ!
  31. 31. IoTの問題2 33 IoTデバイスに何かあった時、通知したい 今ならプッシュ通知がスマート  → APNs、GCMに接続する必要あり  → デバイストークンの管理
  32. 32. よくない利用 34 IoTデバイス スマートフォンAPNs/GCM  デバイストークンの管理 通信手段
  33. 33. 35 サーバを使った例 IoTデバイス スマートフォンAPNs/GCM ! サーバ HTTP/HTTPSアクセス もあるよ!
  34. 34. プッシュ通知を使った例 36
  35. 35. 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"); } }); }
  36. 36. 対応プラットフォーム 38 Objective-C
 (2014年12月より64bit対応) Android JavaScript
 (2014年12月よりnodeサポート!) Unity
  37. 37. まとめ • マイコン、インプット、アウトプットともに材料は 既に っている • 表現場所としてHTML5は手軽(作り手、閲覧者と もに)。ただし高度な表現はCanvas/WebGLの習 得必須 • JavaScript(node.js含め)は必修

×