はじめてのIoTCentral（M5Stack＋UIFlow編）

公式サイトでIoTCentralの説明を読むとなんだか敷居が高い（エンタープライズ向けサービスに思える）ように感じるのですが私だけでしょうか。

実際にはデバイス1つからでも利用できますし、対応しているデバイスがあればごく簡単な手順で使えるようになります。

今回は初めてIoTCentralを使う方向けにIoTCentralアプリケーションの作成とデバイス（M5Stack+センサー）の接続までの手順を説明します。
デバイスとしてM5Stackを選んだ理由ですが、IoTCentral対応デバイスとしてはリストに上がってはいないのですが、最新のUIFlowでは標準でIoTCentralブロックが用意されているので、デバイス側のプログラム作成が簡単になります。サンプルではGrove-Co2センサー（SCD30）を使うためにCustomブロックを利用するので多少手順が増えています。

##準備するもの
・MSアカウント（Azureサブスクリプションを持っていなくても1週間試せます。）
・M5Stackシリーズ（今回はM5Stack Core2）　ファームウェアバージョン：1.8.4
・Grove Co2センサー（SCD30)

##手順
　１．IoTCentralアプリケーション作成
　２．デバイステンプレートの作成
　３．カスタムモデルの作成（テレメトリの設定）
　４．ビューの編集（グラフなどダッシュボードの設定）
　５．デバイステンプレートの公開
　６．デバイスの作成
以上はIoTCentralポータル上で行います。

　７．ソフトウェアのダウンロード
　８．Co2センサー用ライブラリをデバイスにアップロード
　９．Co2センサー用Customブロックの読み込み
１０．サンプルプログラム読み込み
１１．プログラム実行
以上はUIFlow上で行います。

では実際にやってみましょう。

##IoTCentralアプリケーション作成

・[IoTCentralポータルサイト](https://apps.azureiotcentral.com/)にアクセスします。

![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/6b1f5d53-d839-0cea-2ddd-0d6183cb9501.png)

・画面左の「マイアプリ」をクリックします。（サインインを求めるダイアログが出た場合はサインインを行います。）
![02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/633dd0ee-f759-a78b-883f-6c74c0245537.png)
・画面左上の「＋新しいアプリケーション」をクリックします。
![03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/28c5e426-62d2-4520-d804-6e1cdd3fcacb.png)
・カスタム アプリ タイルにある「アプリの作成」ボタンをクリックします。
![04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/e9b4942e-4fc2-0648-af13-bfab64998a14.png)
・アプリケーション名、URLを入力します。料金プランは「無料」を選択します。次に「作成」ボタンをクリックします。
・アプリケーションの作成が終わると画面はダッシュボードに切り替わります。

##デバイステンプレートの作成

![06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/439b7d52-9351-d99f-bc03-2df22d4c967e.png)
・画面左側にある「デバイステンプレート」をクリックします。
![07.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/11aefc9f-86d8-8c0e-44a6-888822748272.png)
・画面左上の「＋新規」ボタンをクリックします。
![08.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/843e8be4-4e09-22b9-d795-e9896a062836.png)
・カスタムデバイステンプレートの作成内のIoTデバイスをクリックしてから、「次へ：カスタマイズ」ボタンをクリックします。
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/b68b7619-9738-463f-c9d7-7818bdba6e7b.png)
・デバイステンプレート名を入力し、「次：レビュー」ボタンをクリックします。
![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2a30999a-74c1-9251-aa54-ac2ba5116f07.png)
・デバイステンプレートの確認画面に切り替わります。「作成」ボタンをクリックすると空のデバイステンプレートが作成されます。

##カスタムモデルの作成（テレメトリの設定）

![13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2dd7ca6a-655c-ef18-296d-df2dba5a9df6.png)
・モデルの作成の「カスタムモデル」をクリックします。
![14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/cab79e81-47ec-85f4-87a7-dc114d4f9efb.png)
・「＋機能の追加」をクリックします。
![15.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/9c0ccdf3-982a-763c-7ff6-ff0bd8badb85.png)
・機能の追加ではデバイスから受け取るデータの設定を行います。「co2」、「temperature」、「humidity」の3つのデータを受け取るように設定しました。「temperature」と「humidity」はセマンティックの種類と単位も設定します。入力が完了したら「保存」をクリックします。

##ビューの編集（グラフなどダッシュボードの設定）

![16.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/10426707-bbc5-199e-fe14-06d7086a23fe.png)
・「ビュー」をクリックしてから「デバイスの視覚化」をクリックします。
![17.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/f97589a8-daa2-ddba-7905-ba12757ed4ee.png)
・タイルの追加から「折れ線グラフ」をドラッグして配置します。配置したタイルの右下をドラッグして横に1つ分広げます。タイルの右上にあるギアボタンをクリックして設定を行います。
![18.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/dc757b7a-13e9-c4b6-5618-24722baa78bb.png)
・表示範囲を「過去12時間」、間隔を「30分」に変更します。テレメトリの下にある「＋追加」をクリックして「co2」、「temperature」、「humidity」を追加します。最後に「更新」ボタンをクリックします。
![19.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/4f2d2ac2-c20e-1e61-c9c2-a8094b2955f1.png)
・最後の既知の値タイルをドラッグして、折れ線グラフタイルの右側に配置します。ギアボタンをクリックして設定を行います。
![20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/edcea0fe-6d95-547b-ea1e-420f5a783bf3.png)
・テレメトリの下にある「＋機能」をクリックして「co2」、「temperature」、「humidity」を追加します。最後に「更新」ボタンをクリックします。
![21.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/c8d4db77-fd79-36a1-9ef7-2f185174568c.png)
・ここまででデバイステンプレートの設定が終わったので、保存を押します。そのあと戻るをクリックします。

##デバイステンプレートの公開

![22.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/0e7f0824-0606-fe8c-5b08-d2a61ece7cc8.png)
・設定が終わったデバイステンプレートは公開することで利用することができるようになります。「公開」をクリックします。変更があった場合には公開することで変更が反映されるので忘れずに公開しましょう。
![23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/0cf82461-bf2d-1ea1-04ad-05fddd56944b.png)
・「公開」ボタンをクリックします。

##デバイスの作成

![24.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/6e049fae-5825-cc26-e4b2-b07a801e404c.png)
・デバイステンプレートが出来上がったらそれを元にデバイスを登録します。画面左側のデバイスをクリックします。右側に表示されたデバイステンプレートを選択します。画面上部の「＋新規」ボタンをクリックします。
![25.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/12e90df3-a5d9-f3d4-f842-4f1a7f9ca109.png)
・デバイス名は自由に付けられます。問題なければ自動で入るデバイステンプレート名+デバイスIDのままで大丈夫です。デバイスIDも自由に付けることができますが、一意にする必要があります。「作成」ボタンをクリックしてデバイスを作成します。
![26.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/b5f342db-9f47-a46d-a2cf-8a2aa7fcca3b.png)
・登録したデバイス名をクリックします。
![27.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2e96f7b0-1688-7c77-481f-54de23a184df.png)
・デバイスから届くデータを表示する画面になりますが、現時点ではまだデバイスの接続は出来ていないので表示されません。接続に必要な情報を表示するために画面上部の「接続」をクリックします。
![28.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/5ef0c182-53db-c8c0-fb00-d48461ce5e5f.png)
・デバイス側に設定する3つの項目（IDスコープ、デバイスID、主キー）をメモします。メモができたら「閉じる」ボタンをクリックします。

ここまでがIoTCentralポータルで行う作業になります。

##ソフトウェアのダウンロード

・Co2センサー用ライブラリを[ここ](https://github.com/agners/micropython-scd30)からダウンロードして、展開しておきます。
![38.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/613fdcc9-4d43-6d7f-51ea-cddb79934296.png)
・同様にサンプルプログラムとカスタムブロックファイルを[ここ](https://github.com/linyixian/IoTCentral_M5Stack)からダウンロードして、展開しておきます。

##Co2センサー用ライブラリをデバイスにアップロード

・M5StackをPCに接続して、ブラウザで[https://flow.m5stack.com/](https://flow.m5stack.com/)を開きます。
![29.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/57ba9cfb-d403-bb2f-890e-3c56f046ab4f.png)
・画面右上の「マネージャー」アイコンをクリックします。
![30.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/ee427ead-49c5-f992-c25b-29429fb73e4c.png)
・「Add Image」ボタンをクリックします。（イメージファイル以外もデバイスにダウンロードできます。）
![31.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/22ab778f-53d3-27c2-fd21-9d9a563c77e1.png)
・ファイルの種類を「すべてのファイル(＊.＊)」に変更してから、展開したセンサーライブラリ内の「scd30.py」を選択して「開く」ボタンをクリックします。

##Co2センサー用Customブロックの読み込み

![32.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2f169f06-03de-939c-231b-c6897a607657.png)
・Customブロックから「Open ＊.m5b file」をクリックする。
![33.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/70f60633-a97e-d6ab-7f3f-6358dbe468ca.png)
・展開したサンプルフォルダから「SCD30.m5b」を選択して「開く」ボタンをクリックします。
![34.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/7e440f10-cb9d-934f-9020-29a1c7752758.png)
・Customブロックの下にSCD30ブロックが追加されます。

##サンプルプログラム読み込み

![35.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/bc0aa065-ceaf-53c6-a1a5-d9695d678abb.png)
・画面下部の「Load The m5」アイコンをクリックします。
![36.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/d79ff7cf-9fdf-6925-bf9f-7aae416c4a2b.png)
・展開したサンプルフォルダ内の「m5_iotcentral.m5f」ファイルを選択して「開く」ボタンをクリックします。
![37.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/d9d862b3-5eb6-4813-b0c3-3726e9d193ad.png)
・「Wifi」ブロックにSSID、PASSWORDを設定します。「IoTCentral」ブロックのSCOPE ID、device ID、device keyに先ほどメモした内容を入力します。入力出来たら画面右上の「RUN」アイコンをクリックしてプログラムを実行しましょう。

####注意：
Co2センサー用のCustomブロック内ではI2Cの使用ポートを固定して使っています。Groveポート（PORT A）がG32、G33以外の機種ではセンサーの値を読み取れません。その場合はCustomブロックを直接変更する必要があります。

##確認
・IoTCentralポータルで登録したデバイスを選択して「生データ」をクリックするとデータの受信状態が確認できます。
![39.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/f614143f-e1f1-4154-13dd-97df9624f1ee.png)
・「表示」をクリックするとビューで設定したグラフと最新の受信データ値が表示されます。
![40.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/cbd4d926-b6c7-fc21-0cd4-3e4fc992a499.png)

##最後に

同じようなことはIoTHubでもできるのですが、IoTCenrtalと比べて設計が複雑になったりします。（その分色々なことができるのですが）
データの視覚化とデバイスの管理を簡単に行いたい場合にはIoTCentralを利用すると手軽にシステムを作ることができるのではないでしょうか。