SlideShare a Scribd company logo
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
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
ペットボトルの残量表示 補給量のトラッキング
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の研究発表展示会が行われます!
もちろん出展します!
実世界型ダイナミック
家電・ディスプレイコントロールインターフェイス
モバイル向けコンテンツナビゲーション・推薦システム
増井研のブースを是非見に来てください!
などなど
ご静聴ありがとうございました

More Related Content

PPTX
How To Learn Programming For Beginners | How To Start Coding | Learn Programm...
PPTX
Principles of animation
PDF
Latest Trends in Computer Science
PDF
Evaluation and User Study in HCI
PPTX
History of Women in Tech
PPTX
Information Systems Action research methods
PPTX
What is Coding
PDF
Controlling a knee CPM machine using PID and iterative learning control algor...
How To Learn Programming For Beginners | How To Start Coding | Learn Programm...
Principles of animation
Latest Trends in Computer Science
Evaluation and User Study in HCI
History of Women in Tech
Information Systems Action research methods
What is Coding
Controlling a knee CPM machine using PID and iterative learning control algor...

Viewers also liked (20)

PPTX
Osc html5-monaca
PDF
IoTにおけるゲートウェイの役割、選び方 M-SOLUTIONS@ウフル/神谷町
PDF
Chrome Apps のデバイスAPI
PDF
PhoneGapでWebアプリをスマホアプリ化
PDF
20141030 html5j-firefox os-deviceapi
PDF
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
PDF
ウェブ標準デバイス系 API 総集編 2014
PDF
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
PDF
人もモノである視点から見えてくる世界
PPTX
Iotデモgoogleglass
KEY
OTOduino_iPhoneアクセサリ開発_ギークラボ6月28日_プレゼン
PDF
第4回目大垣iBeaconハッカソン
PDF
20140806 i beacon講演_愛知工業大学
PDF
20160608 iotセミナー
PPTX
Cordova×業務システム:失敗しないモバイル開発の秘訣
PPTX
Phone gap+javascriptスマホアプリ開発(入門編)
PDF
20140922 ble bootcamp
PDF
Androidとi beacon(ble)
PDF
AndroidとiOSのBLEな事情 3
PDF
HVC-C Open Fab Night HVC-CをiOSでいじってみた
Osc html5-monaca
IoTにおけるゲートウェイの役割、選び方 M-SOLUTIONS@ウフル/神谷町
Chrome Apps のデバイスAPI
PhoneGapでWebアプリをスマホアプリ化
20141030 html5j-firefox os-deviceapi
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
ウェブ標準デバイス系 API 総集編 2014
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
人もモノである視点から見えてくる世界
Iotデモgoogleglass
OTOduino_iPhoneアクセサリ開発_ギークラボ6月28日_プレゼン
第4回目大垣iBeaconハッカソン
20140806 i beacon講演_愛知工業大学
20160608 iotセミナー
Cordova×業務システム:失敗しないモバイル開発の秘訣
Phone gap+javascriptスマホアプリ開発(入門編)
20140922 ble bootcamp
Androidとi beacon(ble)
AndroidとiOSのBLEな事情 3
HVC-C Open Fab Night HVC-CをiOSでいじってみた
Ad

Similar to Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発 (20)

PDF
Node.jsとXBeeで電気回路を無線制御
PPTX
20100910 Arduino・Pachube・Sketchupを連携したローコストモニタリングの実践
PDF
IoT GatewayとNode-REDの美味しい関係 - OpenBlocks IoTへのNode-REDの実装 -
PPTX
クラウド―Arduino接続について
PDF
2016 0629 IoTLT勉強会
PDF
Python, RaspberryPi, Arduinoで作る消費電力モニタリングシステム
PDF
初心者がIoTアプリケーション開発した話
PPTX
cordova/electronの構造を知る
PPTX
Node-redでお手軽IoT
PDF
2017 0217 io tlt勉強会_発表用
PPT
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
PDF
クラウドコミュニケーションAPI Twilio&sakura.io体験ハンズオン 20180312
PPTX
Xamarin+f#で操作する Raspberry Pi Robot
PDF
Arduino実践 資料1/2 〜【html5j エンタメ技術部】第2回勉強会 公開用
PDF
JavaScriptでいいじゃなイカ
KEY
組込み技術とモバイル技術
PDF
デバイス WebAPI設計の進め方
PDF
Interactive Application using Kinect and Android
PDF
How to MAKE HVC-C Protyping Application
PDF
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
Node.jsとXBeeで電気回路を無線制御
20100910 Arduino・Pachube・Sketchupを連携したローコストモニタリングの実践
IoT GatewayとNode-REDの美味しい関係 - OpenBlocks IoTへのNode-REDの実装 -
クラウド―Arduino接続について
2016 0629 IoTLT勉強会
Python, RaspberryPi, Arduinoで作る消費電力モニタリングシステム
初心者がIoTアプリケーション開発した話
cordova/electronの構造を知る
Node-redでお手軽IoT
2017 0217 io tlt勉強会_発表用
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
クラウドコミュニケーションAPI Twilio&sakura.io体験ハンズオン 20180312
Xamarin+f#で操作する Raspberry Pi Robot
Arduino実践 資料1/2 〜【html5j エンタメ技術部】第2回勉強会 公開用
JavaScriptでいいじゃなイカ
組込み技術とモバイル技術
デバイス WebAPI設計の進め方
Interactive Application using Kinect and Android
How to MAKE HVC-C Protyping Application
続・Webエンジニアのためのスマートホームハック ~ Node.js で IoT プロトコルハック ~
Ad

Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発