Azure IoT Hubと接続するアプリを作ってみる（9）

前々回の記事で、CordovaアプリからIoT Hubにデータを送信してみました。
今回は、スマホでBLE Beaconを検知して、情報をIoT Hubに上げる処理を作ってみます。

BLE Beaconには、Aplix社のUSB型のMy Beaconを使っています。
アプリを実行する実機は、Androidの場合はバージョンが4.4以上、ハードウェアがBluetooth 4.0以上に対応している必要があります。

1.CordovaアプリでBLE Beaconを検知させるために、プラグインを追加します。
　プラグインはこちらのサイトのものを使用します。
　コマンドプロンプトを起動し、カレントディレクトリをCordovaアプリのプロジェクト用フォルダに移動後、以下のコマンドを実行します。
　　cordova plugin add https://github.com/petermetz/cordova-plugin-ibeacon.git
　プラグインの追加が完了するまで少しお待ちください。

2.プラグインの追加が完了したら、次はiBeacon検知用のコードを作成します。
　今回は、前々回作成したデータ送信用ボタンの処理を変更し、
　Beaconの検知用コードに変更します。

　wwwフォルダ内のindex.html


　作業用フォルダ（ここではtempフォルダ）内のindex.js
　　onDeviceReady関数内で、ボタンクリック時に呼び出す処理を変更します。
　　id名は上記のindex.htmlでの変更内容に合わせます。


　　startBeaconFind関数は、プラグインのサイトのサンプルコードを参考に、以下のコードを実装。
　　※スペースが全角になっているので、コピペする場合は注意してください。
　　　BeaconRegion関数の引数で[]で表記している個所は、各自で設定ください。

　　　startBeaconFind: function() {
　　　　　window.locationManager = cordova.plugins.locationManager;
　　　　　var delegate = new cordova.plugins.locationManager.Delegate()

　　　　　delegate.didDetermineStateForRegion = function(pluginResult)
　　　　　{
　　　　　　　console.log('didDetermineStateForRegion:' + JSON.stringify(pluginResult));
　　　　　}

　　　　　delegate.didStartMonitoringForRegion = function(pluginResult)
　　　　　{
　　　　　　　console.log('didStartMonitoringForRegion:' + JSON.stringify(pluginResult));
　　　　　}

　　　　　delegate.didRangeBeaconsInRegion = function(pluginResult)
　　　　　{
　　　　　　　var resultJson = JSON.stringify(pluginResult);
　　　　　　　console.log('didRangeBeaconsInRegion: ' + resultJson);
　　　　　　　app.sendData(resultJson);
　　　　　}

　　　　　var br1 = new cordova.plugins.locationManager.BeaconRegion('[任意の文字列]', '[検知したいBeaconのUUID]', [検知したいBeaconのMajor番号], [検知したいBeaconのMajor番号]);

　　　　　locationManager.setDelegate(delegate);

　　　　　cordova.plugins.locationManager.requestWhenInUseAuthorization();

　　　　　cordova.plugins.locationManager.startMonitoringForRegion(br1)
　　　　　　　.fail(function(e) { console.error(e); })
　　　　　　　.done();

　　　　　cordova.plugins.locationManager.startRangingBeaconsInRegion(br1)
　　　　　　　.fail(function(e) { console.error(e); })
　　　　　　　.done();

　　　},


　　sendData関数は、Beaconが検知された時の情報（JSONデータ）を受け取れるよう引数を追加し、
　　その引数内のデータをそのままIoT Hubに送信するようにします。

　　sendData: function(resultJson) {
　　　　var connectionString = '[IoT Hub device connection string]';

　　　　var clientFromConnectionString = require('azure-iot-device-http').clientFromConnectionString;

　　　　var client = clientFromConnectionString(connectionString);

　　　　var Message = require('azure-iot-device').Message;

　　　　var connectCallback = function (err) {
　　　　　　if (err) {
　　　　　　　　console.error('Could not connect: ' + err);
　　　　　　} else {
　　　　　　　　console.log('Client connected');
　　　　　　　　var msg = new Message(resultJson);

　　　　　　　　client.sendEvent(msg, function (err) {
　　　　　　　　　　if (err) {
　　　　　　　　　　　　console.log(err.toString());
　　　　　　　　　　} else {
　　　　　　　　　　　　console.log('Message sent');
　　　　　　　　　　};
　　　　　　　　});
　　　　　　};
　　　　};

　　　　client.open(connectCallback);
　　}

3.コードの変更後、前々回同様の手順でビルドします。
　コマンドプロンプトでカレントディレクトリを作業用フォルダ（ここではtemp）に移動し、以下のコマンドを実行
　　browserify index.js -o ../www/js/index.js

　Visual Studio Codeでプロジェクトをビルドし、実機で実行してみてください。




4.Device ExplorerのDataタブを開き、Monitoringをクリックし、IoT Hubのデータを観察できるようにしておきます。
　実機のBluetoothデバイス機能を有効にしたあと、アプリの「START BEACON SEARCH」ボタンをクリックしてください。
　Device Explorerには以下のようなデータが送信されているはず。


　RSSIが電波強度ですね。1秒周期程度でBeaconのデータを受信してIoT Hubに送信していることがわかります。
　⇒Beaconの検知周期って、どこで設定しているんだろう・・・（汗）。

SigFoxのデータをAzure IoT Hubに送る方法

日本でも来年からSigFoxのサービスがスタートします。
京セラ、IoTネットワーク「SIGFOX」を日本で展開し、LPWAネットワーク事業へ参入


これに向けていろいろと調べものをしていますが、
SigFoxからAzure IoT Hubにデータを送信するしかけが、
すでにSigFox側に入っているとのこと。
Push your Sigfox devices data to Azure IoT Hub

これ、早く試してみたい！

Azure IoT Hubと接続するアプリを作ってみる（8）

前回の記事では、CordovaアプリからIoT Hubにデータを送信してみました。
今回はちょっと余談で、Node.jsのアップデートの話。

前回の記事を試している最中でいろんな問題があって調査してたんですが、
その過程でVisual Studio 2015 CommunityでインストールしたNode.jsのバージョンが結構古いことがわかり、
最新版で試そうと思ってバージョンを上げてみました。

1.Node.jsのポータルサイトから、「32-bit」版のインストーラーをダウンロードしてインストールする。

2.JAVAのSDK（Ver1.8以降）もダウンロードしてインストールする。

3.環境変数を設定する。
　JAVA_HOME：
　　SDKのインストール先（たぶんC:\Program Files (x86)\Java\jdk1.8.0_XXX的なフォルダのはず）

　_JAVA_OPTIONS：
　　この環境変数自体はJAVAコマンド実行時のオプション。
　　環境によってはいらないかもですが、JDK8になってヒープサイズが足りないというようなエラーが出ました。
　　-Xmx1024mなどヒープサイズを指定する値を指定しました。


ユーザーフォルダ配下のAppData\Roaming内にあるnpmおよびnpm-cacheフォルダを事前に削除しておいたほうがいいかも。
⇒npm installでパラメータに-gを指定した時の格納先？

Azure IoT Hubと接続するアプリを作ってみる（7）

前回の記事では、ビルドしたアプリをエミュレータで起動してみました。
今回はIoT Hubへのデータ送信にチャレンジしたいと思います。

といっても、2016/10/29現在、IoT Hub SDKではNode.js用のパッケージは提供されていますが、
Cordova用プラグインはリリースされていません。
IoT Hub用の処理を一から作成するのは大変だし、Node.js用パッケージからプラグインを作成するのも手間なので、
browserifyを利用して、Node.js用パッケージをJavaScriptとして取り込んで使えるようにしてみたいと思います。

私自身がNode.jsやCordovaについて詳しくないため、
今回かなり力技的な感じがします(-_-;)
もっとスマートな方法がありましたら、ぜひ紹介頂けると幸いです！

0.まず、IoT Hubを準備します。
　方法は他のサイトなどでもいろいろと解説されているので、ここでは割愛します。
　Azure上でIoT Hubを生成したら、Device Explorerなどにより接続文字列を生成してください。

1.プロジェクト用フォルダ直下に作業用フォルダを作成します。
　ここでは、フォルダ名を「temp」として説明を行います。

2.wwwフォルダのjsフォルダ内にあるindex.jsをtempフォルダに移動します。

3.画面にデータ送信用のボタンを追加します。
　wwwフォルダ内のindex.htmlをVSCodeで開き、下記のようなコードを追加します。
　
　また、CSSフォルダ内のindex.CSSにsendingクラスの定義を作成し、お好みのスタイルを記述してください。

4.tempフォルダ内にあるindex.jsを変更します。
　3で追加したデータ送信用ボタンがクリックされた時の処理を追記します。
　まずはクリックイベントの登録処理から。
　onDeviceReady関数内に、以下のような処理を追加します。
　　document.getElementById('sendbutton').addEventListener('click', app.sendData);

　次にイベント処理を記述します。
　今回は以下のサイトに記載のコードを参考に、HTTPでの通信処理を実装しています。
　https://github.com/Azure/azure-iot-sdks/blob/master/node/device/core/readme.md

　　sendData: function() {
　　　　var connectionString = '[IoT Hub device connection string]';

　　　　var clientFromConnectionString = require('azure-iot-device-http').clientFromConnectionString;

　　　　var client = clientFromConnectionString(connectionString);

　　　　var Message = require('azure-iot-device').Message;

　　　　var connectCallback = function (err) {
　　　　　　if (err) {
　　　　　　　　console.error('Could not connect: ' + err);
　　　　　　} else {
　　　　　　　　console.log('Client connected');
　　　　　　　　var msg = new Message('some data from my device');

　　　　　　　　client.sendEvent(msg, function (err) {
　　　　　　　　　　if (err) {
　　　　　　　　　　　　console.log(err.toString());
　　　　　　　　　　} else {
　　　　　　　　　　　　console.log('Message sent');
　　　　　　　　　　};
　　　　　　　　});
　　　　　　};
　　　　};

　　　　client.open(connectCallback);
　　}


　「IoT Hub device connection string」には、0番で生成した接続文字列を入れてください。


5.browserifyをインストールします（すでにインストール済みならこの作業は不要です。）
　コマンドプロンプトを起動し、以下のコマンドを実行してください。
　　npm install -g browserify

6.コマンドプロンプトのカレントフォルダを1番で作成した作業用フォルダにします。

7.Node.js版のIoT Hub用パッケージを取得します（この作業も基本一回でいいです）。
　　npm install azure-iot-device@latest
　　npm install azure-iot-device-http@latest
ここでは、「-g」オプションを追加しないでください。
　※パッケージをカレントフォルダ内に取得させるため。

8.browserifyを使って、index.jsにIoT Hub用パッケージを組み込んだJSファイルを生成します。
　　browserify index.js -o ../www/js/index.js

9.index.htmlに記載されているContent-Security-Policyのmetaタグに、
　IoT Hub用のセキュリティ設定を追加します。
　具体的には、contentパラメータの末尾に以下の文字列を追加します。
　　connect-src https://example.com/ https://(IoTHubの名前).azure-devices.net/ ;
　なお、もともとのcontentパラメータの終端にセミコロンがついてなければ、
　セミコロンをつけてから上記の文字列を追加してください。


10.Visual Studio Codeでプロジェクトをビルドし、（エミュレータ等で）実行してみてください。

私の環境だと、以下のような感じです。
「SEND DATA TO IOT HUB」ボタンをクリックすると、IoT Hubにデータが送信されます。


デバッグログにはこんな感じに表示されます。


Device ExplorerのDataタブをクリックし、Monitorボタンをクリックしておくと、
アプリの「SEND DATA TO IOT HUB」ボタンクリックのタイミングでデータが送信されることがわかります。



ここで少し注意点を。
・実行環境の設定日時が正しいことを確認してください。
　エミュレータ等でタイムゾーンがおかしかったりすると、
　HTTPS通信において「401 Unauthorized」エラーが発生します。
　⇒ログに以下のようなメッセージが表示されます。
　　Failed to load resource: the server responded with a status of 401 (Unauthorized) (https://(IoTHubの名前).azure-devices.net/devices/(デバイス名)/messages/events?api-version=2016-04-30)
　　UnauthorizedError: Could not send message: Unauthorized

　おそらくSASの生成にタイムスタンプを利用しているからなんでしょう。

・エミュレータ実行時は開発環境のスペックにも気を付けてください。
　IoT Hubを取り込んだindex.jsは大きなサイズになるため、ロードに少し時間がかかります。
　エミュレータで実行する際、ロードが一定時間以上かかるとアプリが強制終了させられる場合があります。