Cordovaで作る！

センサと超小型BLEモジュールを用いた

簡単IoTアプリ開発

××

慶應義塾大学 増井俊之研究室　伊藤 輝

About me

慶應義塾大学　増井俊之研究室所属

Freelance DesignEngineer

伊藤 輝 (@Hikaru_Itou)

1995.08.16

Design

Engineering ×

Webデザイン UI/UXデザイン

モバイルアプリ開発Webアプリ開発

機械学習・自然言語処理 電子工作・ハードウェア制作

3Dモデリング

Cordova歴 約2年半

×

Swift・Obj-C/Java でアプリ開発を経験した上で

Cordovaを推している

数件のモバイルアプリ開発案件でCordovaを採用

×

ex ..

位置情報を用いたクーポンアプリ

外国語コミュニケーションSNSアプリ

ニュースアプリ

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

×

×

最先端Web技術によるモバイルアプリの

リッチアニメーションインターフェイスの実装研究

これからはWeb技術が

あらゆるデバイスのGUI標準技術になっていく

Web技術の構想やしくみ・技術規格は素晴らしい

スマホはもちろん、電車のサイネージやテレビのGUIもすべて

慶應義塾大学 増井俊之研究室

というよりは、なんでも研究会。

面白いと思ったことは何でもやる。

実世界インターフェイスの研究

温度センサ、湿度センサ、光センサ、

振動センサ、音センサ、圧力センサ、加速度センサ…

把握できないほどある。

研究室ではあらゆるセンサが動いている

Lindaとは、プロセス間の共有メモリ(Tuple Space)でデータ(Tuple)を

読み書きして並列・分散処理するしくみ

Node.js + Socket.IOによるLindaのタプル空間で

センサー値や処理命令が共有されている

https://github.com/node-linda

Tupleの書き込みがあると、

Arduinoに繋がっているサーボモーターが回転して

ドアの鍵を回して開けてくれる

研究室ドアサーバー

研究室内が盛り上がると、「わいわい」と言い出す

slackにも投稿される

わいわいセンサシステム

わいわいシステム写真

TupleはSlackのhubotに読ませる

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

センサーなどの電子部品を利用し

インターネットやコンピュータでそれを操作する

実世界とコンピュータの融合

工夫次第で生活が圧倒的に便利に、楽しくなる

実世界コンピューティング

Internet of Thingsモノのインターネット

IoT

リアル世界をデータ化して応用

モノとコンピュータをインターネットなどの通信で連携させる

センサ

センサのセンシング値をBLE通信でCordovaに送信するしくみの

簡単なおもちゃの実装例を紹介します

簡単! IoT実践入門

××

Bluetooth Low Energy Cordova

圧力を加えると、抵抗値が減少する

単純にアナログ出力を得ることができる

圧力センサFSR402 FSR406

温度（摂氏）に比例した電圧利得が得られる

温度センサLM35DZ

NJL7502L

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

KXSC7-2050

加速度センサ

GP2YOA21YK

距離センサ

TCS34725

カラーセンサ

センサや電子部品で電子回路を組み

マイコンで制御する

電子工作でよく用いられるマイコンボードは

ArduinoやRaspberry Piが有名

Arduino UNO

Arduino Micro

Arduinoに書き込む制御プログラムは

Arduino IDEなどで開発

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

スマホとマイコン間のデータ通信に使用

Bluetooth Low Energy (BLE)

超省電力！ボタン電池で動いちゃう

BLE通信ができるマイコン

RedBear Blendmicro RedBear BLENano

これはマジですごい！

(18.5mm x 21.0mm)

で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

でBLE通信する

bluetoothSerial.list();BLEデバイス検索

bluetoothSerial.connect(uuid);BLE接続

BLEWrite bluetoothSerial. write("hello, world");

BLERead bluetoothSerial.read();

BLEデータ監視 bluetoothSerial.subscribeRawData();

RedBear Blendmicro

Cordova

圧力センサ

ペットボトルホルダー型デバイス

Cordovaアプリ

×

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

WaterTracker

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

DEMO

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

WaterTrackerのしくみ

ペットボトルホルダーの底に圧力センサーがある。

その値を、BLEでCordovaアプリに送信

WaterTrackerのしくみ

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

WaterTrackerのしくみ

回路図

単純にanalogReadしているだけ

マイコン制御プログラム

センサー値を1秒間隔で取得して送信しているだけ

なんと、たったの20行！

アプリ側プログラム

bluetoothSerial.list()でBlendMicroを検索しUUIDを取得

bluetoothSerial. connect()でBlendMicroに接続

bluetoothSerial. subscribeRawData()で

BlendMicroからのセンサー値を監視

センサー値が届いたら、Viewに反映

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

私の好きなCordova開発環境

× × ×

赤外線LED

Geolocationを利用して駅に着いたら

エアコンを自動でONにするシステムがつくれる

IoTはアイデア次第で価値は無限大！

Cordova

×

今週の金曜日・土曜日に東京ミッドタウンで

慶應大SFCの研究発表展示会が行われます！

もちろん出展します！

実世界型ダイナミック

家電・ディスプレイコントロールインターフェイス

モバイル向けコンテンツナビゲーション・推薦システム

増井研のブースを是非見に来てください！

などなど

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