Azure App Service の Web Apps 機能を使用して Azure IoT Hub からのリアルタイム センサー データを視覚化するVisualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

エンド ツー エンド ダイアグラム

注意

このチュートリアルを開始する前に、デバイスをセットアップしてください。 この記事では、Azure IoT デバイスと IoT ハブを設定し、デバイスで実行するサンプル アプリケーションをデプロイします。 そのアプリケーションは、収集されたセンサー データを IoT Hub に送信します。

学習内容What you learn

このチュートリアルでは、Web アプリでホストされた Web アプリケーションを実行して、IoT ハブに届いたリアルタイム センサー データを視覚化する方法について説明します。In this tutorial, you learn how to visualize real-time sensor data that your IoT hub receives by running a web application that is hosted on a web app. Power BI を使用して IoT ハブのデータを視覚化したい場合は、Power BI を使用して Azure IoT Hub からのリアルタイム センサー データを視覚化する方法に関するページを参照してください。If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

作業内容What you do

  • Azure ポータルで Web アプリを作成する。Create a web app in the Azure portal.
  • コンシューマー グループを追加して、データにアクセスできるよう IoT ハブを準備する。Get your IoT hub ready for data access by adding a consumer group.
  • IoT ハブからセンサー データを読み取る Web アプリを構成する。Configure the web app to read sensor data from your IoT hub.
  • Web アプリでホストされる Web アプリケーションをアップロードする。Upload a web application to be hosted by the web app.
  • Web アプリを開いて、IoT ハブから取得したリアルタイムの温度と湿度のデータを確認する。Open the web app to see real-time temperature and humidity data from your IoT hub.

必要なものWhat you need

  • 次の要件に対応するためのデバイスのセットアップSet up your device, which covers the following requirements:
    • 有効な Azure サブスクリプションAn active Azure subscription
    • サブスクリプションの IoT HubAn Iot hub under your subscription
    • IoT Hub にメッセージを送信するクライアント アプリケーションA client application that sends messages to your Iot hub
  • Git のダウンロードDownload Git

Web アプリを作成するCreate a web app

  1. Azure Portal で、[リソースの作成] > [Web + モバイル] > [Web アプリ] をクリックします。In the Azure portal, click Create a resource > Web + Mobile > Web App.
  2. 一意のジョブ名を入力してサブスクリプションを確認し、リソース グループと場所を指定します。次に、[ダッシュボードにピン留めする] をオンにし、[作成] をクリックします。Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.

    リソース グループと同じ場所を選択することをお勧めします。We recommend that you select the same location as that of your resource group. そうすることで、データ転送の処理を高速化してコストを抑えることができます。Doing so assists with processing speed and reduces the cost of data transfer.

    Web アプリを作成する

IoT ハブへのコンシューマー グループの追加Add a consumer group to your IoT hub

コンシューマー グループは、Azure IoT Hub からデータをプルするアプリケーションによって使用されます。Consumer groups are used by applications to pull data from Azure IoT Hub. このチュートリアルでは、IoT ハブからデータを読み取る新しい Azure サービスによって使用されるコンシューマー グループを作成します。In this tutorial, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

コンシューマー グループを IoT ハブに追加するには、次の手順に従います。To add a consumer group to your IoT hub, follow these steps:

  1. Azure Portal で、IoT ハブを開きます。In the Azure portal, open your IoT hub.
  2. 左側のウィンドウで [エンドポイント] をクリックし、中央のウィンドウで [イベント] を選択します。次に、右側のウィンドウの [コンシューマー グループ] で名前を入力し、[保存] をクリックします。In the left pane, click Endpoints, select Events on the middle pane, enter a name under Consumer groups on the right pane, and then click Save.

    IoT ハブのコンシューマー グループの作成

IoT ハブからデータを読み取る Web アプリの構成Configure the web app to read data from your IoT hub

  1. プロビジョニングしたばかりの Web アプリを開きます。Open the web app you’ve just provisioned.
  2. [アプリケーション設定] をクリックし、[アプリの設定] で次のキー/値のペアを追加します。Click Application settings, and then, under App settings, add the following key/value pairs:

    キーKey Value
    Azure.IoT.IoTHub.ConnectionStringAzure.IoT.IoTHub.ConnectionString iothub-explorer から取得Obtained from iothub-explorer
    Azure.IoT.IoTHub.ConsumerGroupAzure.IoT.IoTHub.ConsumerGroup IoT ハブに追加するコンシューマー グループの名前The name of the consumer group that you add to your IoT hub

    キー/値のペアを使用して Web アプリに設定を追加する

  3. [アプリケーション設定] をクリックし、[全般設定][Web Socket] オプションを切り替えてから [保存] をクリックします。Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Web Socket オプションを切り替える

Web アプリでホストされる Web アプリケーションのアップロードUpload a web application to be hosted by the web app

GitHub には、IoT ハブからのリアルタイム センサー データを表示するための Web アプリケーションが用意されています。On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. 必要な作業は、Git リポジトリを使用するよう Web アプリを構成し、GitHub から Web アプリケーションをダウンロードしてから、Web アプリでホストされるよう Azure にそれをアップロードすることだけです。All you need to do is configure the web app to work with a Git repository, download the web application from GitHub, and then upload it to Azure for the web app to host.

  1. Web アプリで、[デプロイ オプション] > [ソースの選択] > [ローカル Git リポジトリ] の順にクリックし、[OK] をクリックします。In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    ローカル Git リポジトリを使用するよう Web アプリのデプロイを構成する

  2. [デプロイ資格情報] をクリックし、Git リポジトリに接続するときに Azure で使用されるユーザー名とパスワードを作成し、[保存] をクリックします。Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. [概要] をクリックし、[Git クローン URL] の値を書き留めます。Click Overview, and note the value of Git clone url.

    Web アプリの Git クローン URL の取得

  4. ローカル コンピューターでコマンド ウィンドウまたはターミナル ウィンドウを開きます。Open a command or terminal window on your local computer.

  5. GitHub から Web アプリをダウンロードし、それが Web アプリでホストされるよう Azure にアップロードします。Download the web app from GitHub, and upload it to Azure for the web app to host. これを行うには、次のコマンドを実行します。To do so, run the following commands:

    git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
    cd web-apps-node-iot-hub-data-visualization
    git remote add webapp <Git clone URL>
    git push webapp master:master
    

    注意

    <Git clone URL> は、Web アプリの [概要] ページにあった Git リポジトリの URL になります。<Git clone URL> is the URL of the Git repository found on the Overview page of the web app.

Web アプリを開いて IoT ハブから取得したリアルタイムの温度と湿度のデータを確認するOpen the web app to see real-time temperature and humidity data from your IoT hub

Web アプリの [概要] ページで、URL をクリックして Web アプリを開きます。On the Overview page of your web app, click the URL to open the web app.

Web アプリの URL の取得

IoT ハブから取得したリアルタイムの温度と湿度のデータが表示されます。You should see the real-time temperature and humidity data from your IoT hub.

リアルタイムの温度と湿度を示す Web アプリのページ

注意

デバイスでサンプル アプリケーションが実行されていることを確認します。Ensure the sample application is running on your device. 実行されていない場合は、空のグラフを取得し、チュートリアルのデバイスのセットアップに関するページをご覧ください。If not, you will get a blank chart, you can refer to the tutorials under Setup your device.

次の手順Next steps

Web アプリを使用して、IoT ハブからのリアルタイム センサー データを視覚化することができました。You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Azure IoT Hub からのデータを視覚化する別の方法については、Power BI を使用して IoT Hub からのリアルタイム センサー データを視覚化するに関するページを参照してください。For an alternative way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

引き続き Azure IoT Hub の使用方法を確認すると共に、他の IoT のシナリオについて調べるには、次のページを参照してください。To continue to get started with Azure IoT Hub and to explore other IoT scenarios, see the following: