トップ > App Service > Raspberry PiからのデータをMicrosoft Azure IoT HubとMicrosoft Azure App Serviceでリアルタイム可視化 3

Raspberry PiからのデータをMicrosoft Azure IoT HubとMicrosoft Azure App Serviceでリアルタイム可視化 3

App Service Azure IoT Hub IoT Python RaspberryPi

本記事シリーズでは、Raspberry Piに繋がっているセンサーから取得したデータをAzure IoT Hubに送信し、Azure App Serviceを使ってリアルタイムで可視化する方法について紹介します。

この記事シリーズでできることは以下の通りです。

  • 記事1：Azure IoT Hubの作成やデバイス登録
    • Azure Iot Hubの紹介、Azure IoT Hubの作成、デバイス登録について
  • 記事2：Raspberry Piでデータを読み鋳込んでIoT Hubに送信
    • Raspberry Piとセンサーの紹介、センサー連結、Azure IoT Hubにメッセージ送信について
  • 記事3：IoT Hubで受信したデータを可視化するWeb AppをAzure App Serviceでリリース　（本記事）
    • リアルタイム可視化、Azure App ServiceのWeb Appでリリスについて

ソースコード

Microsoft Docsからソースコードのサンプルを入手

今回は、Microsoft Docsの「チュートリアル: Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化する」に記載のサンプルコードを、一部修正して利用します。

Web アプリでの IoT Hub データのリアルタイム データの視覚化 | Microsoft Docs

ソースコードの分析

  • chart-device-data.js
    • Web ソケットでリッスンし、各 DeviceId を 追跡し、各デバイスの受信データの最後の50個を格納するクライアント側のスクリプトです。
    • 選択したデバイス データをグラフオブジェクトにバインドします。
  • Index.html
    • Web ページの UI レイアウトを処理し、クライアント側のロジックのために必要なスクリプトを参照します。
  • Event-hub-reader.js
    • 指定された接続文字列とコンシューマー グループを使用して IoT Hub の組み込みエンドポイントに接続するサービス側のスクリプトです。
    • 受信メッセージのメタデータから DeviceId と EnqueuedTimeUtc を抽出し、次に server.js によって登録されたコールバック メソッドを使用してメッセージをリレーします。
  • Server.js
    • Web ソケットとイベント Hub のラッパー クラスを初期化するサービス側のスクリプトです。
    • クラスが受信メッセージを Web ソケットにブロードキャストするために使用するイベント Hub ラッパー クラスへのコールバックを提供します。

ソースコードの修正

chart-device-data.js
  • DeviceData クラスに照度と赤外線センサーのデータを追加します。
    1. class DeviceData {
    2.      constructor(deviceId) {
    3.          this.deviceId = deviceId;
    4.          this.maxLen = 50;
    5.          this.timeData = new Array(this.maxLen);
    6.          this.temperatureData = new Array(this.maxLen);
    7.          this.humidityData = new Array(this.maxLen);
    8.          this.brightnessData = new Array(this.maxLen);
    9.          this.existpeopleData = new Array(this.maxLen);
    10.      }
    11.  
    12.      addData(time, temperature, humidity, light, person) {
    13.          this.timeData.push(time);
    14.          this.temperatureData.push(temperature);
    15.          this.humidityData.push(humidity || null);
    16.          this.brightnessData.push(light);
    17.          this.existpeopleData.push(person);
    18.          if (this.timeData.length > this.maxLen) {
    19.              this.timeData.shift();
    20.              this.temperatureData.shift();
    21.              this.humidityData.shift();
    22.              this.brightnessData.shift();
    23.              this.existpeopleData.shift();
    24.          }
    25.      }
    26.  }

 

  • 受信したデータがある場合にDeviceIdをみて、Datasetにデータを追加する部分も修正します。
    1. // find or add device to list of tracked devices
    2. const existingDeviceData = trackedDevices.findDevice(messageData.DeviceId);
    3.  
    4. if (existingDeviceData) {existingDeviceData.addData(messageData.MessageDate, messageData.IotData.temperature, messageData.IotData.humidity, messageData.IotData.light, messageData.IotData.person);
    5.    } else {
    6.       const newDeviceData = new DeviceData(messageData.DeviceId);
    7.       trackedDevices.devices.push(newDeviceData);
    8.       const numDevices = trackedDevices.getDevicesCount();
    9.       deviceCount.innerText = numDevices === 1 ? `${numDevices} device` : `${numDevices} devices`;
    10.       newDeviceData.addData(messageData.MessageDate, messageData.IotData.temperature, messageData.IotData.humidity, messageData.IotData.light, messageData.IotData.person);
    11. ...(省略)

     

  • 赤外線センサーと照度センサーのデータによって、在室なのか電気をつけたのかなどを表示する部分を追加します。
    1. myLineChart.update();
    2. if (messageData.IotData.light < 300) {
    3.    document.querySelector('li1').innerHTML = "YES";
    4. }
    5. else {
    6.    document.querySelector('li1').innerHTML = "NO";
    7. }
    8.  
    9. if (messageData.IotData.person == 1) {
    10.    document.querySelector('li2').innerHTML = "YES";
    11. }
    12. else {
    13.    document.querySelector('li2').innerHTML = "NO";
    14. }

     

    条件 数値の範囲

    スマートフォンライト

    		 X<100
    昼の部屋(カーテン×、部屋ライト×) 100<X<150
    昼の部屋(カーテン〇、部屋ライト〇) 200<X<300
    昼の部屋(カーテン〇、部屋ライト×) 400<X<450
    夕方の部屋(カーテン×、部屋ライト×) 900<X<1100
    手で隠れたとき 1500<X<1800
index.html
  • Web Appで照度と在室を表示する機能を追加します。
    1. <body>
    2.     <h1 class="flexHeader">
    3.         <span>
    4.             <span id="deviceCount">0 devices</span>
    5.             <select id="listOfDevices" class="select_box"></select>
    6.         </span>
    7.         <span>Temperature & Humidity Real-time Data</span>
    8.     </h1>
    9.  
    10.     <div>
    11.         <table border="1" , class="cellfontsize">
    12.             <tr>
    13.                 <td width="100" , height="50">照度</td>
    14.                 <td width="200">
    15.                     <li1></li1>
    16.                 </td>
    17.             </tr>
    18.             <tr>
    19.                 <td height="50">在室</td>
    20.                 <td>
    21.                     <li2></li2>
    22.                 </td>
    23.             </tr>
    24.  
    25.         </table>
    26.     </div>
    27.     <div>
    28.         <canvas id="iotChart"></canvas>
    29.     </div>
    30. </body>

デスクトップ実行

Azure IoT Hub コンシューマーグループ作成

  1. IoT Hubの左のメニューから「組み込みのエンドポイント」をクリックします。

  2. 「新しいコンシューマーグループを作成する」にコンシューマーグループ名を入れて、新しい「コンシューマーグループ」を作成します。

Azure IoT Hub プライマリ接続文字列の取得

  1. IoT Hubの左のメニューから「共有アクセス ポリシー」をクリックします。

  2. 「共有アクセス ポリシーの管理」から「iothubowner」ポリシーをクリックします。

  3. 画面の右にキーが表示されると「プライマリ接続文字列」をコピーして、メモしておきます。

Web Appの環境変数構成

  1. Visual Studioの「ツール」 - 「コマンドライン」 - 「開発者コマンドプロンプト」を開きます。

  2. 以下のコマンドをコマンドプロンプトで入力します。

    set IotHubConnectionString={IoT Hubのプライマリ接続文字列}
    set EventHubConsumerGroup={コンシューマーグループ名}

Web App 実行

  1. 以下のコマンドを入力して、実行します。

    npm install
    npm start

  2. Chromeなどのウェブブラウザーを開いて、「http://localhost:3000」に接続します。

  3. Web Appで可視化したデータを確認します。

※ npm エラーが発生したら

  • PCにNode.jsがインストールされていないため、エラーが発生します。
  • 以下のページからNode.jsをインストールしてください。
    Node.js — Download (nodejs.org)

Azure App Serviceリリース

Azure App Service 登録

  1. Azure Portalで「app service」を検索し、「App Service」をクリックします。

  2. 「＋作成」をクリックして、新しいApp Serviceを作成します。

  3. サブスクリプションとリソースグループを選択します。

  4. App Serviceの名前を記載し、以下のように設定します。

    • ランタイムスタック：Node 16 LTS
    • オペレーティングシステム：Windows
    • 地域：Japan EastApp Service
    • プラン：無料のF1

  5. 「確認および作成」をクリックして、作成します。

  6. 作成したApp Serviceの左のメニューから「構成」をクリックします。

  7. 「＋新しいアプリケーション設定」をクリックして、アプリケーション設定を追加します。

    名前 値 デプロイ スロットの設定
    EventHubConsumerGroup 作成したコンシューマー
    グループ名    		 空欄
    IotHubConnectionString IoT Hubの接続文字列 空欄

  8. 「EventHubConsumerGroup」と「IotHubConnectionString」が追加されたのを確認します。

  9. 「全般設定」タブをクリックします。

  10. 「HTTP バージョン」を「2.0」、「Web ソケット」を「オン」に変更して保存します。

  11. 左のメニューから「デプロイ センター」をクリックします。

  12. ソースを「ローカル Git」を選択して、保存をクリックします。

  13. 「Git Clone URI」をメモします。

  14. 「ローカル Git または FTPSの資格情報」をクリックします。

  15. 「ユーザースコープ」でユーザー名やパスワードを設定します。

    ユーザー名やパスワードはWeb Appを配布するときに使います。

Git インストール

  1. Windows用のGitをインストールします。公式のホームページからインストールします。

    Git for Windows

Web Appのデプロイ

  1. Visual Studioのメニューから「ターミナル」を開きます。

  2. 以下のコマンドを入力してGitにコミットします。

    git add .
    git commit –m ‘メッセージ’

  3. 以下のコマンドを入力して、Web Appにpushします。

    git remote add webapp <Git Clone URI>
    git push webapp master:master

    もし、「git push webapp master:master」でできなかった場合は「git push webapp ブランチ名:master」にして実行してください。

  4. Git Credential Mangerログイン画面が出たら、「ローカル Git または FTPSの資格情報」で設定したユーザー名とパスワードを入力します。

  5. Azure IoT Hubのデプロイセンターのログを確認するとWeb AppのPushが反映されていることを確認できます。

  6. 「概要」から「開始」をクリックして、Web Appを開始します。

  7. URLをクリックして、リリースしたWeb Appを確認します。

おわりに

今回の記事では、Azure IoT HubがRaspberry Piから受け取ったセンサーの値を、Azure App Serviceを使ってウェブページで可視化する方法について紹介しました。

自作で作ったIoTデバイスを管理したり、受け取ったデータを可視化したりする際に活用してみてください。

執筆担当者プロフィール
Lee Byungju

Lee Byungju（日本ビジネスシステムズ株式会社）

Microsoft Azure関係の開発, Power Platformが担当領域。

担当記事一覧