Cordova勉強会 vol.7 で発表した資料です

1. Cordovaで作る！
センサと超小型BLEモジュールを用いた
簡単IoTアプリ開発
××
慶應義塾大学 増井俊之研究室 伊藤 輝

2. About me
慶應義塾大学 増井俊之研究室所属
Freelance DesignEngineer
伊藤 輝 (@Hikaru_Itou)
1995.08.16

3. Design
Engineering
×
Webデザイン UI/UXデザイン
モバイルアプリ開発Webアプリ開発
機械学習・自然言語処理 電子工作・ハードウェア制作
3Dモデリング

4. Cordova歴 約2年半
×
Swift・Obj-C/Java でアプリ開発を経験した上で
Cordovaを推している

5. 数件のモバイルアプリ開発案件でCordovaを採用
×
ex ..
位置情報を用いたクーポンアプリ
外国語コミュニケーションSNSアプリ
ニュースアプリ

6. AppCubeの社内用プロトタイプ開発として採用
×

7. ×
最先端Web技術によるモバイルアプリの
リッチアニメーションインターフェイスの実装研究

8. これからはWeb技術が
あらゆるデバイスのGUI標準技術になっていく
Web技術の構想やしくみ・技術規格は素晴らしい
スマホはもちろん、電車のサイネージやテレビのGUIもすべて

9. 慶應義塾大学 増井俊之研究室
というよりは、なんでも研究会。
面白いと思ったことは何でもやる。
実世界インターフェイスの研究

10. 温度センサ、湿度センサ、光センサ、
振動センサ、音センサ、圧力センサ、加速度センサ…
把握できないほどある。
研究室ではあらゆるセンサが動いている

11. Lindaとは、プロセス間の共有メモリ(Tuple Space)でデータ(Tuple)を
読み書きして並列・分散処理するしくみ
Node.js + Socket.IOによるLindaのタプル空間で
センサー値や処理命令が共有されている
https://github.com/node-linda

12. Tupleの書き込みがあると、
Arduinoに繋がっているサーボモーターが回転して
ドアの鍵を回して開けてくれる
研究室ドアサーバー

13. 研究室内が盛り上がると、「わいわい」と言い出す
slackにも投稿される
わいわいセンサシステム
わいわいシステム写真

14. TupleはSlackのhubotに読ませる

15. ドアももちろん解錠できる

16. センサーなどの電子部品を利用し
インターネットやコンピュータでそれを操作する
実世界とコンピュータの融合
工夫次第で生活が圧倒的に便利に、楽しくなる
実世界コンピューティング

17. Internet of Things
モノのインターネット
IoT
リアル世界をデータ化して応用
モノとコンピュータをインターネットなどの通信で連携させる

18. センサ
センサのセンシング値をBLE通信でCordovaに送信するしくみの
簡単なおもちゃの実装例を紹介します
簡単! IoT実践入門
××
Bluetooth Low Energy Cordova

19. 圧力を加えると、抵抗値が減少する
単純にアナログ出力を得ることができる
圧力センサ
FSR402 FSR406

20. 温度（摂氏）に比例した電圧利得が得られる
温度センサ
LM35DZ

21. NJL7502L
光センサ(フォトトランジスタ)

22. KXSC7-2050
加速度センサ

23. GP2YOA21YK
距離センサ

24. TCS34725
カラーセンサ

25. センサや電子部品で電子回路を組み
マイコンで制御する
電子工作でよく用いられるマイコンボードは
ArduinoやRaspberry Piが有名

26. Arduino UNO

27. Arduino Micro

28. Arduinoに書き込む制御プログラムは
Arduino IDEなどで開発

29. Arduino IDEではC言語風にプログラムが書ける

30. スマホとマイコン間のデータ通信に使用
Bluetooth Low Energy (BLE)
超省電力！ボタン電池で動いちゃう

31. BLE通信ができるマイコン
RedBear Blendmicro RedBear BLENano
これはマジですごい！
(18.5mm x 21.0mm)

32. でBLE通信する
Bluetooth Serial Plugin for PhoneGap
https://github.com/don/BluetoothSerial
Bluetooth Low Energy (BLE) Central Plugin for Apache Cordova
https://github.com/don/cordova-plugin-ble-central

33. でBLE通信する
bluetoothSerial.list();BLEデバイス検索
bluetoothSerial.connect(uuid);BLE接続
BLEWrite bluetoothSerial. write("hello, world");
BLERead bluetoothSerial.read();
BLEデータ監視 bluetoothSerial.subscribeRawData();

34. RedBear Blendmicro
Cordova
圧力センサ

35. ペットボトルホルダー型デバイス
Cordovaアプリ
×

36. Bluetooth device
to track the amount of bottled water in the iOS App
WaterTracker

38. ペットボトルの残量表示 補給量のトラッキング

39. DEMO
https://www.youtube.com/watch?v=xRU1rNTuX4Y

40. WaterTrackerのしくみ
ペットボトルホルダーの底に圧力センサーがある。
その値を、BLEでCordovaアプリに送信

41. WaterTrackerのしくみ
より圧力を細かくとるため、接地面積を小さくする工夫をしている

42. WaterTrackerのしくみ

43. 回路図
単純にanalogReadしているだけ

44. マイコン制御プログラム
センサー値を1秒間隔で取得して送信しているだけ
なんと、たったの20行！

45. アプリ側プログラム
bluetoothSerial.list()でBlendMicroを検索しUUIDを取得
bluetoothSerial. connect()でBlendMicroに接続
bluetoothSerial. subscribeRawData()で
BlendMicroからのセンサー値を監視
センサー値が届いたら、Viewに反映

46. WaterTrackerのコード
WaterTracker BLE Central iOS/Android App
https://github.com/Hikaru-Ito/WaterTracker-App
WaterTracker BLE Peripheral Device by BlendMicro
https://github.com/Hikaru-Ito/WaterTracker-BlendMicro

47. 私の好きなCordova開発環境
× × ×

48. 赤外線LED
Geolocationを利用して駅に着いたら
エアコンを自動でONにするシステムがつくれる
IoTはアイデア次第で価値は無限大！
Cordova
×

49. 今週の金曜日・土曜日に東京ミッドタウンで
慶應大SFCの研究発表展示会が行われます！

50. もちろん出展します！
実世界型ダイナミック
家電・ディスプレイコントロールインターフェイス
モバイル向けコンテンツナビゲーション・推薦システム
増井研のブースを是非見に来てください！
などなど

51. ご静聴ありがとうございました