★【 My Biz Blog 】★

興味のあるビジネス情報を伝えていきます♪
(IoT,Azure,Windows 10, etc...)

HoloLensの日本発売

2016-12-05 08:00:00 | IoTデバイス
AR/MR機器として注目を集めているMicrosoft社のHoloLensですが、
ついに日本での発売が決まりましたね。

12/2からプレオーダーが始まっています。
1/18から順次提供開始とのこと。
Microsoft HoloLens のプレオーダーを 12 月 2 日(金)より開始
 Microsoft HoloLens のプレオーダーを本日より開始。2017 年 1 月 18 日(水)より順次提供


IoTの分野では、人をネットワークにつなぐために、スマホやウェアラブルデバイス等が使われていますが、
このHoloLensもその性能の高さ・アプリ開発の容易さから、活用検討が進んでいます。
まだ価格が高い、視野角が狭いという点もありますが、
コンセプトデモやPoC(Proof of Concept:概念実証)ではどんどん使われていきそうです。
コメント
この記事をはてなブックマークに追加

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

2016-11-27 23:03:10 | IoT,M2M
前々回の記事で、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に送る方法

2016-11-15 06:50:44 | IoT,M2M
日本でも来年からSigFoxのサービスがスタートします。
京セラ、IoTネットワーク「SIGFOX」を日本で展開し、LPWAネットワーク事業へ参入


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

これ、早く試してみたい!
コメント
この記事をはてなブックマークに追加

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

2016-11-13 02:16:37 | IoT,M2M
前回の記事では、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)

2016-11-12 23:13:50 | IoT,M2M
前回の記事では、ビルドしたアプリをエミュレータで起動してみました。
今回は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は大きなサイズになるため、ロードに少し時間がかかります。
 エミュレータで実行する際、ロードが一定時間以上かかるとアプリが強制終了させられる場合があります。





コメント
この記事をはてなブックマークに追加

Azure(Web Apps)でNode-RED(再チャレンジ)

2016-10-27 00:58:13 | Azure
去年の記事で、AzureのApp Service(Web Apps)でNode-REDをデプロイする(そして失敗する)話を書きましたが、
ローカル(Windows PC)にNodeの環境を作ったこともあり、再度デプロイにチャレンジ。

今回はAzure App Service での Node.js Web アプリの使用を参考に、
ローカルに作ったNode-REDをAzureのWeb Appsにデプロイする方法でチャレンジ。
※Azure CLIのインストールが必要です。


1. Node-RED日本ユーザ会の記事を参考に、まずはNode-RED最新版のZIPファイルを取得し、ローカルフォルダに展開
2. コマンドプロンプトを起動し、カレントディレクトリを展開先にする。
3. 以下のコマンドを実行
  npm install --production
4. Azure App Service での Node.js Web アプリの使用
  「単純な Node.js Web アプリの作成とデプロイ」8項以降に従って、コマンド実行
  git add .
  git commit -m "{your commit message}"
  git push azure master

Azureへのログイン処理やデプロイ先のリージョンの選択、デプロイの際の認証処理など行いますが、
途中でエラーが・・・。
デプロイ自体は完了するので、以下のコマンドを実行しサイトを確認すると、Node-REDが起動していることがわかります。
  azure site browse

ただ、以前の記事「AzureでNode-RED」と同じ現象が出ているので、
HTTPSの対応がいるのかな・・・。


エラー内容の解析とか課題は山盛りあるけど、
Azureの仮想マシンじゃなくてPaaSで動かせそうなことが分かったのはいいことかな。
⇒PaaSの方がやれることは制限されるけど、管理が楽だし。




コメント
この記事をはてなブックマークに追加

Azure IoT Hubと接続するアプリを作ってみる(6)

2016-10-23 22:50:15 | IoT,M2M
前回の記事では、Androidエミュレータの設定まで行いました。
今回は、ビルドしたアプリをエミュレータ上で実行させます。

VSCodeの左側にあるデバッグアイコンをクリックします。
上部に表示されたリストボックスで、「Run Android on emulator」を選択します。


続いて、上部にあるデバッグ実行のアイコンをクリックします。
そうすると、デバッグコンソールにメッセージが表示され始めます。


こんな画面やコンソールが起動します。



しばらく待つと、Androidエミュレータが起動してきます。



さらにしばらく待つと、エミュレータにアプリがデプロイされ、起動します。
⇒何も改造していないので、テンプレートのアプリのままですが・・・。



※Androidエミュレータが起動してこない場合。
 VSCodeが管理者権限で起動しているか確認してください。


VSCode側のデバッグ出力には、以下のように表示されていると思います。



コメント
この記事をはてなブックマークに追加

Azure IoT Hubと接続するアプリを作ってみる(5)

2016-10-21 23:22:23 | IoT,M2M
前回の記事では、プロジェクトの生成とビルドまで行いました。
今回は、Androidエミュレータの設定を行います。

スタートメニューの「Android SDK Tools」にある「SDK Manager」を管理者権限で立ち上げます。
⇒アイコンを右クリックして、メニューの「その他」⇒「管理者として実行」をクリックします。


様々なバージョン向けのツールが表示されているかと思いますが、
まずはターゲットとするバージョンのSystem Imageを選択し、「Install ...」ボタンをクリックします。
ここでは、Android 6.0用の「Intel x86 Atom_64 System Image」を選択しました(起動速度等の関係で)。



以下のような画面が表示されるので、「Accept License」を選択したのち、「Install」ボタンをクリックしてください。
自動的にインストールが実行されます。



次に、ハードウェアアクセラレータをインストールします(x86系のSystem Imageの実行に必要な模様)。
SDK Managerのツリーの下のほうに、「Intel x86 Emulator Accelerator(HAXM installer)」を選択し、「Install ...」ボタンをクリックします。
上記のように、また画面が表示されるので、「Accept License」を選択して「Install」ボタンをクリックしてください。


上記の手順でInstallerはインストールされますが、実際のツールはインストールされないようなので、
以下のフォルダを開いてインストーラー(intelhaxm-android.exe)を実行します。




インストールが完了したら、次にAVDを作成します。
スタートメニューの「Android SDK Tools」にある「AVD Manager」を管理者権限で立ち上げます。
まだ一つもVirtual Deviceが生成されていないはずです。「Create」ボタンをクリックして、Virtual Deviceを生成します。
以下のようなダイアログが表示されるので、適宜入力してOKをクリックしてください。



以上でAndroid Emulatorの設定は完了です。
コメント
この記事をはてなブックマークに追加

Azure IoT Hubと接続するアプリを作ってみる(4)

2016-10-19 01:21:22 | IoT,M2M
前回の記事では、環境変数の設定等まで行いました。
今回からは、Cordovaアプリのプロジェクトを作成し、ビルドまで行います。

まず、適当な作業用フォルダを作成します。
(例えば、C:\work\CordovaApps)


そして、コマンドプロンプト(またはターミナル)を起動してください。
以下のようなコマンドを実行し、カレントディレクトリを上記のフォルダにします。

>cd C:\work\CordovaApps


続いて、以下のようなコマンドを実行し、プロジェクトを作成します。
>cordova create (プロジェクトフォルダ名) (パッケージ名) (プロジェクト名)

cordova createはCordovaアプリの新規プロジェクトを作成するコマンドです。
パッケージ名はAndroid版アプリに必要です(Javaのパッケージ命名規則に従う必要があります)。
プロジェクト用のフォルダ名をapp_001、パッケージ名をcom.yossihard.TestApp001、プロジェクト名をTestApp001とすると、
コマンドは以下のようになります。
>cordova create app_001 com.yossi.TestApp001 TestApp001


上記のコマンドが終わったら、試しにdirコマンドを実行し、
指定したフォルダ(app_001)が作成されていることを確認してください。
そして、カレントフォルダをこのフォルダに設定します。
>cd app_001


続いて、各種ターゲットデバイス用のファイルをプロジェクトに追加します。
■Android用ファイルの追加
>cordova platform add android

■iPhone/iPad(iOS)用ファイルの追加
>cordova platform add iOS

■Windows用ファイルの追加
>cordova platform add windows

プロジェクトの作成は以上で終わりです。
続いて、アプリをビルドします。
エクスプローラで上記のプロジェクト用フォルダを選択し、
右クリックメニューから「Open with Code」を選択してください。
VSCodeが起動し、下図のような画面が表示されます。


この状態で、キーボードの「F6」を押すと、ビルドが開始されます。
以下のような表示が出れば、ビルド完了です。



コメント
この記事をはてなブックマークに追加

Azure IoT Hubと接続するアプリを作ってみる(3)

2016-10-18 21:53:50 | IoT,M2M
前回の記事では、Visual Studio Codeのインストールを行いました。
今回は、Visual Studio Codeの設定、環境変数の設定まで行います。

まず、Cordova Tools Extension のインストールを行います。
Visual Studio Codeを起動し、左側の四角いアイコンをクリックします。
検索枠を一旦クリアし、cordovaと入力すると、下に「Cordova Tools」が表示されるので、
「インストール」をクリックします。


インストールが完了すると、下記のような表示に変わるので、「有効」をクリックします。


以下のようなダイアログが表示されるので、OKをクリックして下さい。



これでCordova Tools Extensionのインストールは完了です。
続いて、環境変数の設定を行います。
システムのプロパティを開きます。
以下は、システムのプロパティの開き方の一例。

スタートボタン(画面左下端にあるWindowsボタン)を右クリック。
以下のようなメニューが表示されるので、「システム」を選択してください。


以下のような画面が表示されるので、左側にある「システムの詳細設定」をクリック。


以下のようなダイアログが表示されるので、ダイアログ下部にある「環境変数」をクリック


上部の各ユーザの環境変数設定グループに新規追加します。
「新規」ボタンをクリックしてください。


新しいユーザー変数として、ANDROID_HOMEを追加します。
変数値にAndroid用SDKのインストールフォルダを指定し、「OK」ボタンをクリックして下さい。


次にPATH変数に、値(Android SDKのツールのディレクトリパス)を追加します
上部の各ユーザの環境変数設定グループのリストで「Path」を選択し、「編集」をクリックしてください。


下記のような画面が表示されるので、「新規」をクリックしてください。
リストに以下の二つのパスを登録します。
 ・C:\Program Files (x86)\Android\android-sdk\platform-tools
 ・C:\Program Files (x86)\Android\android-sdk\tools


OKボタンをクリックし、ダイアログを閉じてください。
VSCodeやコマンドプロンプトを立ち上げていたら、一旦閉じてください。

コメント
この記事をはてなブックマークに追加