チュートリアル:Azure IoT Central でのダッシュボードのカスタマイズと、デバイスの管理

  • [アーティクル]

このチュートリアルでは、Azure IoT Central のストア内分析アプリケーションでダッシュボードをカスタマイズする方法について説明します。 アプリケーションのオペレーターは、カスタマイズされたダッシュボードを使用して、アプリケーションを実行し、接続されているデバイスを管理できます。

このチュートリアルでは、以下の内容を学習します。

  • ダッシュボード上のイメージ タイルをカスタマイズする
  • タイルを配置してレイアウトを変更する
  • テレメトリ タイルを追加して条件を表示する
  • プロパティ タイルを追加してデバイスの詳細を表示する
  • コマンド タイルを追加してコマンドを実行する

前提条件

開始する前に、Azure IoT Central でのストア内分析アプリケーションの作成チュートリアルを完了してください。

ダッシュボード名を変更する

既定のダッシュボードは、条件監視アプリケーションを作成した後に編集できるようになります。 また、さらに多くのダッシュボードを作成することもできます。

アプリケーション ダッシュボードをカスタマイズする最初のステップは、名前を変更することです。

  1. Azure IoT Central マイ アプリ ページに移動します。

  2. 作成した条件監視アプリケーションを開きます。

  3. [ダッシュボードの設定] を選択し、ダッシュボードの名前を入力したら [保存] を選択します。

ストア内分析アプリケーション ダッシュボードのスクリーンショット。

ダッシュボード上のイメージ タイルをカスタマイズする

Azure IoT Central のアプリケーション ダッシュボードは、1 つまたは複数のタイルで構成されます。 タイルは、ダッシュボードにコンテンツを表示するための四角形のコンテナーです。 さまざまな種類のコンテンツをタイルに関連付け、タイルをドラッグ、ドロップ、サイズ変更することで、ダッシュボードのレイアウトをカスタマイズできます。

コンテンツを表示するためのタイルには、いくつかの種類があります。

  • 画像タイルには画像が含まれ、画像を選択するための URL を追加できます。
  • ラベル タイルにはプレーン テキストが表示されます。
  • Markdown タイルには書式設定されたコンテンツが含まれ、画像、URL、タイトル、HTML として表示される Markdown コードを設定できます。
  • テレメトリ、プロパティ、またはコマンドの各タイルには、デバイス固有のデータが表示されます。

このセクションでは、ダッシュボード上のイメージ タイルをカスタマイズします。

ダッシュボードでブランド イメージを表示するイメージ タイルをカスタマイズするには、次のようにします。

  1. ダッシュボード ツール バーの [編集] を選択します。

  2. Northwind Traders のブランド画像が表示されている画像タイル上で [編集] を選択します。

  3. [タイトル] を変更します。 タイトルは、画像にカーソルを置くと表示されます。

  4. [画像] を選択します。 カスタム イメージをアップロードするか、必要に応じてイメージの URL を指定できるウィンドウが開きます。

  5. [更新] を選択します。

    ストア内分析アプリケーション ダッシュボードのブランド画像のタイルを示すスクリーンショット。

  6. 必要に応じて、[ドキュメント] タイルで [構成] を選択し、サポート コンテンツへの URL を指定します。

店内のセンサー ゾーンのマップを表示するイメージ タイルをカスタマイズするには、次のようにします。

  1. 既定のストア ゾーン マップを表示する画像タイル上で [構成] を選択します。

  2. [画像] を選択し、ストア ゾーン マップのカスタム画像をアップロードします。

  3. [更新] を選択します。

ストア内分析アプリケーション ダッシュボードのストア マップ タイルを示すスクリーンショット。

Contoso ストア マップの例では、4 つのゾーン (2 つのレジ ゾーン、アパレルとヘルスケアのゾーン、食料雑貨とデリのゾーン) が示されています。

このチュートリアルでは、これらのゾーンにセンサーを関連付けて、テレメトリを提供します。

タイルを配置してレイアウトを変更する

ダッシュボードをカスタマイズするための重要な手順は、タイルを再配置して便利なビューを作成することです。 アプリケーションのオペレーターは、ダッシュボードを使用してデバイス テレメトリを視覚化し、デバイスを管理し、店内の状態を監視します。

Azure IoT Central を使用することで、ダッシュボードを作成するアプリケーションの作成者のタスクを簡略化できます。 ダッシュボードの編集モードを使用すると、タイルの追加、移動、サイズ変更、削除を簡単に行うことができます。

また、 [ストア内の分析 - チェックアウト] アプリケーション テンプレートを使用することで、ダッシュボードを作成するタスクを簡略化することもできます。 このテンプレートには、接続されているセンサーにより、レジの順番待ちの人数と環境の状態が表示できるようになっているタイルが配置された、実際に動作するダッシュボード レイアウトが用意されています。

このセクションでは、[ストア内の分析 - チェックアウト] アプリケーション テンプレートのダッシュボード タイルを再配置して、カスタム レイアウトを作成します。

アプリケーションで使用する予定がないタイルを削除するには、次のようにします。

  1. ダッシュボード ツール バーの [編集] を選択します。

  2. Contoso ストア ダッシュボードで使用されていない次の各タイルの省略記号 (...) を選択し、[削除] を選択します。

    • Back to all zones (すべてのゾーンに戻る)
    • Visit store dashboard (ストア ダッシュボードにアクセスする)
    • Warm-up checkout zone (レジがあるエリアの温度を上げる)
    • Cool-down checkout zone (レジがあるエリアの温度を下げる)
    • Occupancy sensor settings (混雑状況センサーの設定)
    • Thermostat settings (温度計の設定)
    • 待機時間
    • Environment conditions (環境の状態)
    • Checkout 3 (レジ 3): 関連付けられている 3 つのタイルすべて

  3. [保存] を選択します。 使用しないタイルを削除することで編集ページにより広いスペースを確保できるため、オペレーターが見るべきダッシュボードの見た目をシンプルにできます。

使用しないタイルを削除した後、残りのタイルを再配置して、整理されたレイアウトを作成します。 新しいレイアウトには、後で追加するタイル用のスペースが含まれています。

残りのタイルを再配置するには次のようにします。

  1. [編集] を選択します。

  2. [Occupancy firmware](混雑状況のファームウェア) タイルを、[Occupancy](混雑状況) のバッテリーのタイルの右側にドラッグします。

  3. [Thermostat firmware](温度計のファームウェア) タイルを、[Thermostat](温度計) のバッテリーのタイルの右側にドラッグします。

  4. [保存] を選択します。

  5. レイアウトの変更を表示します。

ストア内分析アプリケーション ダッシュボードのレイアウトを示すスクリーンショット。

テレメトリ タイルを追加して条件を表示する

ダッシュボードのレイアウトをカスタマイズしたら、テレメトリを表示するタイルを追加できます。 テレメトリ タイルを作成するには、デバイス テンプレートとデバイス インスタンスを選択し、タイルに表示するデバイス固有のテレメトリを選択します。 [In-store analytics - checkout](ストア内の分析 - レジ) アプリケーション テンプレートのダッシュボードには、複数のテレメトリ タイルが含まれています。 2 つのレジ ゾーン内の 4 つのタイルには、シミュレートされた混雑状況センサーからのテレメトリが表示されます。 [People traffic](人の量) タイルには、2 つのレジ ゾーンのカウントが表示されます。

このセクションでは、さらに 2 つのテレメトリ タイルを追加して、「Azure IoT Central でストア内分析アプリケーションを作成する」チュートリアルで追加した RuuviTag センサーの環境テレメトリを表示します。

RuuviTag センサーの環境データを表示するためのタイルを追加するには、次のようにします。

  1. [編集] を選択します。

  2. [デバイス テンプレート] の一覧から [RuuviTag] を選択します。

  3. 2 つの RuuviTag センサーのいずれかのデバイス インスタンスを選択します。 Contoso ストアの例では、[ゾーン 1 Ruuvi] を選択してゾーン 1 のテレメトリ タイルを作成します。

  4. [テレメトリ] リストから、タイルの各ゾーンに表示されるテレメトリ項目である [Relative humidity](相対湿度) と [Temperatire](温度) を選択します。

  5. [タイルの追加] を選択します。 この新しいタイルには、選択したセンサーの湿度と温度のテレメトリが合わせて表示されます。

  6. RuuviTag センサーの新しいタイルで [構成] を選択します。

  7. タイトル を「Zone 1 environment (ゾーン 1 環境) 」に変更します。

  8. [更新] を選択します。

  9. 手順 1 から 8 までを繰り返して、2 つ目のセンサー インスタンスのタイルを作成します。 タイトルを「Zone 2 environment (ゾーン 2 環境)」に設定し、[構成の更新] を選択します。

  10. 「Zone 2 environment (ゾーン 2 環境)」というタイトルのタイルを [Thermostat firmware](温度計のファームウェア) タイルの下にドラッグします。

  11. 「Zone 1 environment (ゾーン 1 環境)」というタイトルのタイルを [People traffic](人の量) タイルの下にドラッグします。

  12. [保存] を選択します。 ダッシュボードで、2 つの新しいタイルにゾーンのテレメトリが表示されます。

ストア内分析アプリケーション ダッシュボードの RuuviTag タイルを示すスクリーンショット。

[People traffic](人の量) タイルを編集して、2 つのレジ ゾーンのみのテレメトリを表示するには、次のようにします。

  1. [編集] を選択します。

  2. [People traffic](人の量) タイルの [編集] を選択します。

  3. count3 テレメトリを削除します。

  4. [更新] を選択します。

  5. [保存] を選択します。 更新されたダッシュボードには、シミュレートされた混雑状況センサーに基づく 2 つのレジ ゾーンのカウントのみが表示されます。

ストア内分析アプリケーション ダッシュボードの [People traffic]\(人の量)\ タイルを示すスクリーンショット。

コマンド タイルを追加してコマンドを実行する

アプリケーションのオペレーターは、コマンドを実行してデバイスを管理するためにもダッシュボードを使用します。 事前に定義されたコマンドをデバイス上で実行するコマンド タイルをダッシュボードに追加できます。 このセクションでは、コマンド タイルを追加して、オペレーターが Rigado ゲートウェイを再起動できるようにします。

ゲートウェイを再起動するためのコマンド タイルを追加するには、次のようにします。

  1. [編集] を選択します。

  2. [デバイス テンプレート] の一覧から [C500] を選択します。 これは、Rigado C500 ゲートウェイのテンプレートです。

  3. [デバイス インスタンス] でゲートウェイ インスタンスを選択します。

  4. [再起動] コマンドを選択します。

  5. [タイルの追加] を選択します。

  6. [保存] を選択します。

  7. 完成した Contoso ダッシュボードを表示します。

    完了したストア内分析アプリケーション ダッシュボードを示すスクリーンショット。

  8. 必要に応じて、 [Reboot](再起動) タイルを選択して、ゲートウェイで再起動コマンドを実行します。

リソースをクリーンアップする

今後 IoT Central のクイックスタートやチュートリアルに取り組む予定がなければ、ここで使用した IoT Central アプリケーションは次の手順で削除してください。

  1. IoT Central アプリケーションで、[アプリケーション] > [管理]に移動します。
  2. [削除] を選択して操作を確定します。

次のステップ

データをエクスポートして分析情報を視覚化する