★【 My Biz Blog 】★

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

Power BI Embeddedを試す

2017-02-17 02:08:50 | IoT,M2M
Power BIはIoTのデータの可視化ツールとして非常に期待しているサービスの一つなのですが、
そのPower BIを自社Webサービスに組み込むための方法として、Power BI Embeddedがあります。

個人的に、Embeddedとついていると、ハードウェアな感じがしてたまらないのですが、今回は組込機器とは無関係です(笑)。


まず、Power BI Embeddedの概要が以下のページに書いてあるのですが、なんだかよくわからない・・・。
Microsoft Power BI Embedded とは何ですか?

自分なりに理解した内容を書いておきます。
・開発したWebアプリやモバイルアプリにPower BI Desktopで作成したレポートを統合することができる。
・Power BI Embeddedは、いわばREST APIのサービス。
・ワークスペースコレクションとワークスペースという概念がある。
 Power BI Desktopで作成したレポート一つ一つがワークスペース。それを束ねたものがワークスペースコレクションの模様。
・2017/2/16現在、Power BI Embeddedのサンプルコードとdocs.microsoft.comに掲載されている説明にミスマッチがあるので注意。
 サンプルコード:https://github.com/Azure-Samples/power-bi-embedded-integrate-report-into-web-app/
 説明:Power BI Embedded の使用を開始するためのサンプル
  例えば、説明内の「サンプル アプリの構成」以降に張られている画面キャプチャと実際のサンプルアプリのメニューにかなり差があります。
  現在のどのメニューになるかの読み替えが、パッとわからないです。
  ProvisioningSample.exeの起動時の画面は
   1 Collection management
   2 Report management
   3 Misc.
   4 Settings
  となっています。

  説明内の[Provision a new workspace in an existing workspace collection]は
  「1 Collection management」を選択後に表示される「6 Provision a new Workspace」です。

  説明内の[6.Import PBIX Desktop file into an existing workspace]は
  「2 Report management」を選択後に表示される「2 Import PBIX Desktop file into a workspace」です。

  
サンプルプログラムでは、本当に簡単にPower BI Desktopで作成したビジュアルがWebアプリに組み込まれます。
すでにASP .NET MVCでWebサービスを構築しているのであれば、サンプルプログラムを参考にすれば、
比較的簡単にPower BI機能を組み込めそうですね。


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

HoloLensでBeacon検知

2017-02-08 11:21:48 | HoloLens
HoloLensのアプリ開発中ですが、これまでやってきたBluetoothのBeaconを検知するアプリを作ってみようと思い、チャレンジしてみました。

UWPでBLE Beaconを検知するアプリは、既出ですが以下のサンプルが非常に役に立ちます。
Bluetooth advertisement sample

同じようなことをチャレンジされている方が既にいて、Unity側の実装は以下のページが参考になります。
GPS on the Microsoft Hololens

上記ページで、BLE Watcher in UWP C#の章の
「First, the role of the event dispatcher gameobject that ・・・」と記載されている箇所のサンプルコードと
「Now the Unity GPS Watcher class:」と記載されている箇所のサンプルコードを実装して下さい。

で、 変数BEACON_IDの値を検知したいBeaconに合わせて変更してください。
iBeaconであれば、0x004Cです。

あ、Package.appmanifestの機能(Capability)でBluetoothにチェックを入れておくことと、
HoloLensのBluetoothを有効にしておくことをお忘れなく(笑)。


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

Windows Holographic対応デバイスの情報

2017-01-08 18:03:19 | IoTデバイス
アメリカで開催されている展示会CESで、Windows Holographicに対応したヘッドマウントディスプレイがお目見えしているそうです。
Windows Holographic対応ヘッドセット5社(HP、Dell、3Glasses、Acer、Lenovo)のデザインが明らかに。スペック等詳細は不明

次のWindows 10の大型アップデートで対応が噂されているWindows Holographic。
デバイスも着々と準備が進んでいるようなので、チェックしておかねば・・・。
コメント
この記事をはてなブックマークに追加

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側のデバッグ出力には、以下のように表示されていると思います。



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