ibm bluemix を使ってモバイルのセンサーデータ …...node-redの特徴...

© 2015 IBM Corporation1

IBM Bluemix を使ってモバイルのセンサーデータを利用する

2015年8月27日


IoTの時代が到来

家電や車、ビルや工場、橋など、世界中の様々なモノがインターネットにつ

ながり始めています。

Smart Scales Connected car

Mobile Heating and Air

Conditioning

Building

Security

Smart Deliveries

Smart MeterVending

Machine

HealthCare Container

Tracking


2020年にネット接続するデバイスは、500億を超える


クラウドサービスを使ったIoT アプリの構成例

クラウド・サービスセンサデバイス

iBeacon

(BLEデバイス)OpenBlocks

(BLE検知デバイス)

検知デバイス

DB 分析

モバイル通知

接続バックエンド連携

Cloudant

IBM Bluemix

IoT Foundation

Bluetooth

例: ビーコンを活用した、新しい顧客体験

最適な接客・クーポン


IoTを支える次世代の通信プロトコル、MQTTとは？

M2MやIoTの実現に適したシンプルで軽量なプロトコル

• 双方向、1対Nの通信

• プロトコルヘッダーは最小2バイト（HTTPだと50バイト～、HTTPの1/10のトラフィック）

• 省電力

• Publish/Subscribe型であり、同期処理が必要となるHTTPより、処理が高速

• 不安定な環境での通信に強い

Topicに投稿購読者に配信 Topicを購読


Bluemix上で利用出来るMQTT関連サービス

IoT Foundation Bluemix IoT Service

IoT Foundation

• クラウド上で提供される、「MQTTサーバーサービス」（MQTT Broker）

• 認証なしで、誰でも使用出来る「Quick Start Service」が使える！

Bluemix IoT Service

• MQTTサーバー上へのデータへのアクセスサービス（MQTT Subscriber）


ハンズオンで作成するアプリケーション

IBM IoTFoundation

デバイス

IBM Bluemix

アプリケーション

スマホのセンサーで計測した位置情報をMQTT BrokerにPublish

MQTT Broker

位置情報をSubscribeし、Google Map上に表示

IoT Foundationサービスはセンサーデータを仲介

スマホをセンサとみなし、スマホからMQTTで送信される位置情報をリアルタイムでGoogle Mapに表示する


最終形のイメージ1 : スマホのセンサーデータの取得

http://goo.gl/DkFQvM

下記のQRコードから、「センサーデータ取得 & MQTT送信」を行うWebページにアクセスし、Device ID / 位置情報 / 傾きのデータがリアルタイムで取得されていることを確認

Geo Location APIで位置情報を取得（Javascript）

MQTTで位置情報をMQTTサーバに送信（Javascript）

Bluemix上で稼働


最終形のイメージ2 : Node-Red アプリケーション

MQTT Subscribe（センサデータ取得）

位置情報を抽出

Web Socketで位置情報をリアルタイム通信

HTTP GET Requestの待ち受け。

ResponseするHTMLGoogle Map API使用

Http Response


最終形のイメージ3 : Google Mapでスマホの位置を表示

スマホの位置情報がリアルタイムに反映

動くと追随する


1. スマホセンサデータ取得ページの作成


Webアプリケーション・サーバー作成（Node-RED Starter）

スマホセンサーを取得するWebページをホストするサーバーを作成

• 単純なHTML + Javascriptであり、どのランタイム（言語）でも良い

• 今回はMQTT SubscribeするアプリをNode-Redで作成するため、Node-RED Starterを使用することとする

①カタログから、Node-RED Starterを選択

②アプリ名を指定して「Create」※Bluemix上でユニークな名前とする


Node-RED スターターコードのダウンロード

Node-REDを含むWebアプリケーションのひな形をLocal PCにダウンロードします。

• ひな形に、スマホのセンサーデータを取得するHTML / Javascriptを加え、再度Bluemixにデプロイします。


スターターコードを作業フォルダに配置

作業フォルダを作成し、スターターコードをフォルダごとCopy

• フォルダ名や場所は任意


Githubからソースコードを取得

1. Githubにアクセスし、ソースコードをダウンロード

• https://github.com/MasayaFujita/Phone_Sensor

2. ファイルを解凍し、スターターコードの「public」フォルダの中にCopy

ダウンロード

解凍した中身のsensor_mqtt_htmlとjs フォルダを、スターターコードのpublic下にCopy

https://github.com/MasayaFujita/Phone_Sensor


ソースコードの概要

sensor_mqtt.html

• スマホからアクセスすると、位置情報や傾き等のセンサーデータを取得し、表示するHTML

js/sensor_mqtt.js

• Geolocation API等を用いて、センサー情報を取得

• MQTT Broker（IoT Foundation)にデータを送信

js/mqttws31.js

• Paho MQTT Javascript client library

• JavascriptでMQTT Client（Publisher, Subscriber）を構成する際に必要なLibrary


HTML : sensor_mqtt.htmlhead要素でPaho MQTT Javascript ClientのJS Fileを読み込む

jQuery

センサ値取得 & MQTT送信を行うJavascript


Geolocation API

Geolocation API

• javascriptでユーザーの位置情報を扱うためのAPI。主要ブラウザでサポートされている。

• 無線LAN・WiFi・携帯電話基地局・GPS・IPアドレスなどから位置情報を取得

位置情報を含むpositionオブジェクトが渡され、コールバック関数が実施される

position オブジェクトから、緯度・経度等の値を取得。jQueryでHTMLに表示

https://developer.mozilla.org/ja/docs/WebAPI/Using_geolocation


Paho MQTT Javascript client: 概要

Paho MQTT Javascript Client

• WebsocketでMQTT Brokerとデータを双方向通信するためのJavascript Library

http://git.eclipse.org/c/paho/org.eclipse.paho.mqtt.javascript.git/plain/src/mqttws31.js

• データはJSON形式で送受信する。

MQTT Broker情報を指定し、接続用Objectを生成

User情報

MQTTサーバへ接続

Topic: /WorldをSubscribe

データをTopic: /WorldへPublish

※上記はPahoのホームページのガイドより抜粋

https://www.eclipse.org/paho/clients/js/


Paho MQTT Javascript client: コード説明

デバイスを識別するID

IoT FoundationのQuickstart(MQTTサーバ）のアドレス

接続Object作成

送信データObjectの作成。JSONに変換して送信

MQTT Publish


cf コマンドのインストール

Local PC上のソースコードをBluemixにデプロイするツールである「cf コマンド」をインストールする。

1. Githubにアクセス（https://github.com/cloudfoundry/cli）し、ダウンロード

2. コマンドプロンプト（OS Xではターミナル）で動作確認：cf -v

バージョンが無事表示されればOK

※ Macで、「開発元が未確認のため開けません」と表示される場合は、「システム環境設定」 >> セキュリティーとプライバシーにて、「ダウンロードしたアプリケーションの実行許可」にて、「すべてのアプリケーションを許可」するように設定を変更して下さい

https://github.com/cloudfoundry/cli


cf コマンドでBluemixへログイン

1. コマンドプロンプトでルートフォルダへ移動（package.jsonが存在するフォルダ）

2. cf login コマンドでBluemix環境へログイン

• > cf login -a https://api.ng.bluemix.net

Bluemix IDとPass


Bluemixにアプリケーションをデプロイ

1. cf push コマンドでBluemixにアプリケーションをPush

• > cf push (アプリケーション名）


スマホセンサーの稼働確認

スマートフォンからデプロイしたWebページにアクセス

• http://(アプリ名).mybluemix.net/sensor_mqtt.html


2. 位置情報をGoogle Mapに表示するアプリをNode-

REDで作成する


Node-RED について

IBM 英国Hursley 研究所の Emerging Technology Teamで開発されたソフトウェア

• 2013年、社内ハッカソンで堂々一位、GitHub に登録

• 2014年 Qcon で発表

オープンソースプロジェクトとして提供


Node-REDの特徴

ブラウザベース UI

node.js で動作

• 軽量

機能をカプセル化してNodeとして利用

独自Nodeを作成・追加可能

Bluemixの様々なサービスを簡単に利用可能

ハードウェアデバイス，API，オンラインサービスが画期的な方法で結合された"仮想環境をブラウザ上で実現

Bluemixでなくても使用可能です


Node-RED 画面

Node Infomation またはデバッグコンソール

デプロイ実行

シート

ノード

ノードパレット

表示情報の切り替え実装UI

処理フロー


①ノードを選択しドラッグ&ドロップ

Node-RED実装方法

②ノード間を接続

④Deployを選択Node-RED画面

③ノードプロパティ設定


Node分類機能

Input イベントの起動条件の設定

Output 外部アプリへの送信

Function イベント分岐、受信データの変換、一時停止等

Social Twitter/Mail/ircの送受信

Storage DBへの保存、DB検索

Analysis 分析

Advanced RSS/atomの更新受信時にイベント起動

コネクタが右側に存在⇒①イベントの起動イベント起動条件を満たしたとき、その情報を送信する

コネクタが左右に存在⇒②データ変換/分岐左からデータ受信。それを変換/分岐させ、右側に結果を返す

コネクタが左側に存在⇒③外部アプリ起動/DB保存左からデータを受信し、それを送信/保存

Node-RED搭載ノードの紹介 (代表的なもの)


①イベントの起動

Node名称イベント開始条件後続フローに送信する内容

Inject 定期起動orノードのクリック指定文字列or現在時刻or情報なし(起動のみ)デバック向けの機能。

http http://[xxxxxxx].mybluemix.net/[ノードのURL]リクエスト送信時

リクエスト情報

Mail メール受信時、または未読メール存在時定期起動

メール本文(text/plain)

Twitter 指定メッセージのTweet時に自動起動

Tweet情報(本文、発言場所、国…)

Feedparse RSS/atomの更新受信時 -

コネクタが右側に存在するもの


Node名称機能後続フローに送信する内容

Function 受領データの更新更新済データ

Switch 条件に応じて、フローを分岐させる受信データ

Delay フローを待機受信データ

http request 指定サイトに接続接続サイトのソース

Cloudant DB検索 DBの検索結果

Sentiment 受信データをセンチメント分析評価情報を追加した受信データ

Html HTMLソースのうち、指定タグをすべて取得

指定したタグの情報

コネクタが左右に存在するもの

②データ変換/分岐


Node名称機能

Debug フロー上に流れている情報を画面表示

http response http requestを返す

Cloudant DBへのデータ保存

Mail メール送信

コネクタが左側に存在するもの

③外部アプリ起動/DB保存


プログラミング

JavaScriptで記述します

• 簡易エディターが付属

• 非同期処理も可能

※より複雑な処理は node の作成をお勧めします。

詳細ドキュメント：

http://nodered.org/docs/writing-functions.htmlfunction は最後に return msg; をいれると次のnode に送信してくれます。


覚えておくNode-RED固有変数

“msg”

“msg” オブジェクト： node 間を流れるメッセージを表す JSON オブジェクト。msg.payload はかならず存在する。msg.<string> で新しい属性を追加できる。

“context” オブジェクト： node 内部で保存される任意の JSON オブジェクト

“context.global” オブジェクト： node 間で共有されるグローバルオブジェクト

“context”

“context.global”


Node-REDの起動

Bluemixのダッシュボードに記載されているLinkより、Node-REDを起動


IoT Foundation（MQTTサーバー）からのデータ取り出し

「ibmiot」ノードをドラッグ & ドロップ

• MQTTサーバー上のDevice IDに紐づくデータをSubscribeする

• MQTTサーバー上にスマホの位置情報が届いたら、取り出す。

「ibmiot」ノードの設定

1. ノードをダブルクリック

2. Quickstartを選択

3. スマホの画面に表示されているDevice IDを入力

ドラッグ＆ドロップ

スマホに表示されているDevice ID


データ受信ができているかどうかの確認

debugウィンドウに受信データを表示

1. 「debug」ノードを「ibmiot」と接続

2. 「Deploy」ボタンをを押し、Node-REDアプリケーションをDeploy

3. debugウィンドウにJSON形式でセンサーデータが流れてきていればOK


データの絞り込み

1秒に1Messageのみ処理する

1. 「delay」ノードを接続

2. Actionを「Limit rate to」に設定

3. Rateを「1」 msg(s) per Secondに設定

4. drop intermediate messageをチェック (余計なデータを廃棄する）

5. Deploy

6. 1秒間でdebugウィンドウにメッセージが流れてくることを確認


緯度・経度情報の抜き出し

var latitude = msg.payload.d.location.lat;

var longitude = msg.payload.d.location.lng;

msg.payload = '[{"lat":"' + latitude +

'","lng":"' + longitude + '"}]';

return msg;

「function」ノードで、センサーデータから、緯度・経度データのみを抜き出す

1. 「function」ノードを接続

2. 「function」に下記のjavascript コードを記載

• msg.payloadに、MQTTサーバーから取得したJSONデータが含まれる

• 緯度・経度のみをmsg.payloadに設定し、次のノードに流す

3. Deployし、結果を確認


Google Map APIを使った位置情報の可視化 1

WebSocketの通信チャネルの構成位置情報をリアルタイムで送信

/locationにて、HTTP GET リクエストを待ち受け

Google Mapを表示するHTML。位置情報はWebSocketで受け取る。

HTTPレスポンスを返す



NodeフローのImport

1. 次のページのJSON形式のデータをクリップボードにCopy

2. 右上のMenuボタンからImport画面を表示

3. 入力ボックスにペーストしてImport

4. 既存のNodeと接続する

JSON形式のNodeフローをペースト

接続する


ImportするNodeフローの情報

[{"id":"9457624.f6ba8a","type":"websocket-

listener","path":"/ws/phone_location","wholemsg":"false"},{"id":"e0e0edd5.1f1f1","type":"function","name":"function 1","func":"// The received message is

stored in 'msg'¥n// It will have at least a 'payload' property:¥n// console.log(msg.payload);¥n// The 'context' object is available to store state¥n// between

invocations of the function¥n// context = {};¥ncontext.global.location = msg.payload;¥n¥nreturn

msg;","outputs":1,"noerr":0,"x":460,"y":178,"z":"b92fcfc3.46d03","wires":[["79854d92.867ab4"]]},{"id":"e2cc9f01.1d336","type":"function","name":"function

2","func":"// The received message is stored in 'msg'¥n// It will have at least a 'payload' property:¥n// console.log(msg.payload);¥n// The 'context' object is

available to store state¥n// between invocations of the function¥n// context = {};¥n¥nmsg.payload = context.global.location;¥n¥nreturn

msg;","outputs":1,"noerr":0,"x":446.9999694824219,"y":239,"z":"b92fcfc3.46d03","wires":[["79854d92.867ab4"]]},{"id":"79854d92.867ab4","type":"websock

et out","name":"","server":"9457624.f6ba8a","client":"","x":662.9999847412109,"y":239,"z":"b92fcfc3.46d03","wires":[]},{"id":"d38b4a94.2c74b8","type":"http

response","name":"","x":648.9999847412109,"y":315,"z":"b92fcfc3.46d03","wires":[]},{"id":"9280276.f6d7fd8","type":"template","name":"Google Map

HTML","field":"","template":"<!DOCTYPE html>¥n<html>¥n<head>¥n <title>Phone Location</title>¥n <script type=¥"text/javascript¥"

src=¥"http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js¥"></script>¥n <script type=¥"text/javascript¥"

src=¥"http://maps.google.com/maps/api/js?sensor=true¥"></script>¥n <script type=¥"text/javascript¥"

src=¥"http://yourjavascript.com/4594301102/gmaps.js¥"></script>¥n ¥n <style type=¥"text/css¥" media=¥"screen¥">¥n #map {¥n

position:absolute;¥n top: 0; bottom: 0; left: 0; right: 0;¥n }¥n </style>¥n</head>¥n<body>¥n ¥n <div id=¥"map¥"></div>¥n <script

type=¥"text/javascript¥">¥n var socketaddy = ¥"ws://phonefujita.mybluemix.net/ws/phone_location¥";¥n var map;¥n var sock;¥n

$(document).ready(function(){¥n map = new GMaps({¥n div: '#map',¥n lat: -12.043333,¥n lng: -77.028333¥n });¥n sock = new

WebSocket(socketaddy);¥n sock.onopen = function(){ console.log(¥"Connected websocket¥");¥n console.log(¥"Sending ping..¥");¥n

sock.send(¥"Ping!¥");¥n console.log(¥"Ping sent..¥");¥n };¥n sock.onerror = function(){ console.log(¥"Websocket error¥"); };¥n

sock.onmessage = function(evt){¥n var latlng = JSON.parse(evt.data);¥n var array = $.map(latlng, function(el) {¥n return [[el.lat, el.lng]];¥n

});¥n ¥n map.removeMarkers();¥n map.removePolylines();¥n console.log(¥"Got marker at ¥" + latlng[0].lat + ¥", ¥" + latlng[0].lng,

latlng);¥n map.setZoom(17);¥n map.setCenter(latlng[0].lat, latlng[0].lng);¥n map.addMarkers(latlng);¥n map.drawPolyline({¥n path:

array,¥n strokeColor: '#131540',¥n strokeOpacity: 0.6,¥n strokeWeight: 6¥n });¥n }¥n });¥n

</script>¥n</body>¥n</html>","x":431,"y":316,"z":"b92fcfc3.46d03","wires":[["d38b4a94.2c74b8"]]},{"id":"19638c78.e69c74","type":"http

in","name":"","url":"/location","method":"get","swaggerDoc":"","x":207.99998474121094,"y":315,"z":"b92fcfc3.46d03","wires":[["9280276.f6d7fd8"]]},{"id":"fd

0f1e9b.02f0e","type":"websocket

in","name":"","server":"9457624.f6ba8a","client":"","x":239.99998474121094,"y":239,"z":"b92fcfc3.46d03","wires":[["e2cc9f01.1d336"]]}]



WebSocketサーバーのアドレスの変更

1. Google Map HTMLと書かれたNodeをダブルクリック

2. HTML Fileをテキストエディタにコピー

3. WebSocketのアドレスを修正

• ws://(アプリ名).mybluemix.net/ws/phone_location

4. HTMLが記載されたNodeに修正後のHTMLをCopy

5. Deploy


稼働確認

スマホの位置情報が、MQTTサーバーに送付され、それがGoogle Map上にプロットされていることを確認

1. Debugウィンドウに、位置情報が一秒に1回の頻度で流れてくることを確認

2. ブラウザで、Google Mapを表示するWeb Pageにアクセス（/LocationにHTTP GET Request）

• http://(アプリ名).mybluemix.net/location

3. 正しい位置情報がGoogle Mapに反映されていることを確認

4. Chromeの場合は、「要素の検証」 ⇒ 「Console」で、位置情報が1秒毎にブラウザで処理されていることが確認できます。


まとめ

IoTアプリケーションを構築する際には、IoTでデファクトスタンダードとなりつつある通信プロトコルであるMQTTの知識・スキルが必要

IBMはクラウドサービスとしてMQTTサーバーを提供（IoT Foundation）

Node-REDは直感的な操作で、簡単にIoTアプリケーションを作成することが可能

Javascriptが動く環境でMQTTサーバーにデータをリアルタイムに送信する場合、WebSocketを利用してMQTTサーバーに接続するライブラリであるPahoが便利


一般のWEBサービスの呼び出し

“http request” node を利用する

事前に呼び出しパラメータを設定する

• msg.url : WEBサービスURL

• msg.method: ‘GET’, ‘PUT’ 等

• msg.header: 必要があればヘッダーセット

• msg.payload: リクエストの body

• msg.topic: URL の <url>?<params> ? 以下のパラメータ


例：楽天トラベル施設検索API

https://webservice.rakuten.co.jp/api/simplehotelsearch/


Node-REDでは作成したフローを別 Node-RED 環境に簡単に移すことができます。

別 Node-RED 環境に処理記述を移す手順

①画面右上からExportを選択 ②ポップアップのコードをコピー⇒Node-REDでは実装内容をText形式で保持

③画面右上からImportを選択 ④ ②でコピーしたTextを貼り付ける

【参考】フローのImport/Export


Appendix - Nodeの追加独自Nodeの追加

• 既存のノードでは機能が不足する場合、独自のノードも容易に追加可能

• 記述ルールに従い、nodesディレクトリ配下にHTMLファイルとjsファイル作成しデプロイ

HTMLファイル：Nodeの体裁を定義（色やアイコン、入力項目など）

jsファイル：Nodeでの処理内容を記述

• 記述ルールやサンプル

http://nodered.org/docs/creating-nodes/first-node.html

作成、デプロイ


（参考）lower-case.html, lower-case.js

lower-case.html

lower-case.js

http://nodered.org/docs/creating-nodes/first-node.html


https://github.com/node-redhttp://flows.nodered.org

様々な node や flow が公開されています

https://github.com/node-red

ibm bluemix を使って モバイルのセンサーデータ …...node-redの特徴...

Documents

ibm bluemix を使ってモバイルのセンサーデータ …...node-redの特徴...