M5StickCとAzure IoT Centralを連携してデータを可視化する②　～Azure IoT Central環境構築編～

# はじめに
この記事はシリーズになっています。
目標は、「M5StickCとAzure IoT Centralを連携してデータを可視化すること」です。必要な人が必要な記事を読んでもらうことで、ゴールまでたどり着けることを意識しています。
構築するシステム構成は、以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/17c632b7-2be7-a3ee-ae60-9933db7fac4c.png)

1. [M5StickCとAzure IoT Centralを連携してデータを可視化する① ～M5StickC開発環境準備編～](https://qiita.com/yukimatsu/items/52c6b8435cc81d1c9dfa)
1. [M5StickCとAzure IoT Centralを連携してデータを可視化する② ～Azure IoT Central環境構築編～](https://qiita.com/yukimatsu/items/e35542e16792e7818720)
1. [M5StickCとAzure IoT Centralを連携してデータを可視化する③ ～M5StickCとAzure IoT Central接続編～](https://qiita.com/yukimatsu/items/c72ee84fb64cb4ba5118)

# この記事で出来るようになること
* Azure IoT Centralの環境準備
* M5StickCから上がってくるデータを受信する準備
* M5StickCとAzure IoT Centralを接続するために必要な情報の取得

# 対象
* M5Stack関連などデバイス側は比較的に得意だけど、Azureをあまり触ったことがない人や少し苦手な人
* Azure IoT Centralを初めて使ってみる人
* [M5StickCとAzure IoT Centralを連携してデータを可視化する①　～M5StickC開発環境準備編～](https://qiita.com/yukimatsu/items/52c6b8435cc81d1c9dfa)　を読んで、次の手順に進んできた人

# 手順
## １．Azure Portalにサインイン

Azure Portal からサインインします。

https://azure.microsoft.com/ja-jp/features/azure-portal/

## ２．Azure IoT Centralのサービスを作成
[リソースの作成] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/80ca1af8-e2af-03f2-a7bd-3a24203aac84.png)

[モノのインターネット(IoT)] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/c30ecf02-819b-a253-8d3c-e86de765952d.png)

[IoT Central application] を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/8596f134-9c8f-6d46-5d04-851f0eb2c512.png)

必要な情報を記入します。
リソース名：任意（例：iotc-m5stickc-test-001）※一意である必要があります
アプリケーションULR：任意（例：iotc-m5stickc-test-001）
サブスクリプション：デフォルト
リソースグループ：任意（例：rg-test）
料金プラン：任意（Standard0）
テンプレート：カスタム アプリケーション
場所：東日本

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/e3c6181d-33c4-6123-2534-b2463a94023d.png)

作成ボタンを押すと、以下のように環境構築が進みます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/6e093211-363d-1c6b-f85c-b4fb6cc727b1.png)

デプロイが完了しました。
「リソースに移動」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/1c092f5d-e1ab-7e6a-6704-a90fa0e5be02.png)

Azure IoT Central の画面に移動し、[IoT Central アプリケーション]をクリックして、IoT Centralの画面に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/d17594b7-eaf2-e6e1-b8fb-71dc3cba6a19.png)

Azure Portal 上での設定は、以上です。

## ３．デバイステンプレートを作成（Azure IoT Central の画面で操作）

デフォルトでは、このような画面になっていると思います。
デバイステンプレートから、受信するデータなどを定義したテンプレートを作成します。
ここで設定した内容と、ゆくゆくM5StickCから送信するデータは一致させる必要があります（詳しくは手順通り進めることで大丈夫です）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/dd99df64-e749-0482-1415-c7a3986134ed.png)

デバイステンプレートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/e3935fb0-3a10-0ce5-fd0c-7778450ca921.png)

[デバイステンプレートの作成] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/5721522d-e720-0320-e5ef-9e71ecd4b5b0.png)

[IoTデバイス] を選択し、[次へ] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/91dfa77a-be38-a187-e2e7-244b063582e1.png)

デバイステンプレートの名前を入力（例：m5stickc_sensor）。
[これはゲートウェイデバイスです。] にはチェックは入れません。
[次] をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/1317aa53-a9ee-8eb7-addf-164e12213dc5.png)

確認画面が出てきますので、確認して、[作成]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/761c0538-6ca5-ec26-a9e2-8f2dddb2f6d7.png)

## ４．デバイステンプレートのモデルを作成

「モデルの作成」を行います。
デバイスからアップロードされるデータの定義を決めます。
今回はここで、データの定義を手動で決めるので、「カスタムモデル」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/6de58dd0-52bd-bbb1-4ff7-7a759be04b82.png)

ここで、M5StickCからアップロードされるデータを定義します。

例）
温度：temperature
湿度：humidity
気圧：pressure
照度：light
**ここで定義した名前とM5StickCからデータをアップロードするときの名前を一致させる必要があるので、ここの作業は大切です**

それぞれの内容を記入したら、[保存] します。
M5StickCに、温度センサ、湿度センサ、気圧センサ、光センサを取り付けてあるので、以下のような設定としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/bc2cd3cb-84c4-ab4c-ecac-2edb8939807f.png)

これで、デバイスのテンプレートの作成は完了です。
また、次にこのテンプレートを元に、個別のデバイスを作成していくのですが、その為に、[公開] をクリックします。
[公開] をすることで、このデバイステンプレートが使用できるようになったり、既にデバイステンプレートを使って作成されたデバイスがあれば、そのデバイスの情報を更新することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/9e89d5ce-6447-c291-9cd9-a7cfae956b39.png)

## ５．デバイスを作成
先ほどまでで、デバイスのテンプレートを作成したので、次からは個別のデバイスを作成します。
イメージとしては、雛形を１つ作っておいて、その雛形を元に個別のデバイスをたくさん作っていくイメージです（今回は１つだけです）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/71431fb7-26db-6906-d8b5-def51025f011.png)

[デバイスの作成] からデバイスを作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/0f6fc992-e668-d933-d2f5-74c5a3c456d8.png)

[デバイス名]：任意（固有になるように名前を付けます）
[デバイスID]：デフォルトのものを使用します
[デバイステンプレート]：テンプレートで作成したものを選択します
[このデバイスをシミュレートしますか？]：いいえ
※シミュレートを選択すると、実際にアップロードされたデータではなく、内部で自動生成されたダミーデータが入る為、データがアップロードされた場合のシミュレーションを行うことができます（今回は、「いいえ」のままで）。

必要な情報を入力したら、[作成] をクリックして、作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/c65b9a33-5f2d-a221-a851-0de2629e900a.png)

これで、デバイスが作成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/fe58ad58-da8c-afe9-d14b-e1959ff982bf.png)


## ６．M5StickCからの接続に必要な情報を取得

上記で作成した [デバイス名] をクリックし、以下の画面で、[接続] をクリックします。
M5StickCからAzure IoT Centralに接続する為に必要な情報になります。ここ、大切です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/50fafa29-64cf-3420-7204-d363972d2b55.png)

デバイス接続の画面が表示されるので、
**[IDスコープ]**
**[デバイスID]**
**[主キー]**
をメモしておきます。
これらの情報がM5StickCからAzure IoT Centralに接続する際に必要な情報になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/bfd5ebbc-7bd1-c8eb-fb55-b9f106092101.png)

以上で、以下の内容が出来るようになりました。

* Azure IoT Centralの環境準備
* M5StickCから上がってくるデータを受信する準備
* M5StickCとAzure IoT Centralを接続するために必要な情報の取得

# 次の手順
次は、いよいよM5StickCとAzure IoT Central を連携させて、データをAzureにアップします。
次の記事までしばらくお待ちください！

# おまけ
本記事は、以下のキャンペーンに参加しています。

https://qiita.com/official-events/b7811ce1542be54e6efe