M5Stackで取得したデータを、Excel Onlineに書き込む方法

# この記事で出来るようになること
M5Stackを使って、以下のことが出来るようになります。

* M5Stackで、JSONデータをHTTP送信する方法
* M5Stackで、Azure Logic Appsにデータを送信する方法
* Azure Logic Appsで、M5Stackから受け取ったJSONデータをExcel Onlineに書き込む方法

# やろうと思った動機
IoT関連では、Googleスプレッドシートにデータを送信する例は多く見かけるのですが、後々の使いやすさを考えるとExcelでやりたい場合があるかなと思い、トライアルを含めてやってみました。

#やり方
### 事前準備：Excelにテーブルを作成
まずは、収集したいデータを事前に決めて、Excelにテーブルを用意します。
今回の場合は、収集データを共有できるように Microsoft Teamsの特定のチームの中に作成しました。作成したテーブルは以下のような項目を含む形式です。

例）Excelのテーブル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/3f875674-f5e1-2ee2-d2a7-59fc4b7e73c6.png)

Excelでテーブルを作成する方法は以下のサイトを参考にしてください。

https://support.microsoft.com/ja-jp/office/excel-%E3%81%A7%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-bf0ce08b-d012-42ec-8ecf-a2259c9faf3f

### M5Stack側：JSONデータの送信
ソースコードの全体は割愛しますが、WiFiに接続して、HTTP通信が出来る環境を用意しておきます。
その上で、以下のようなコードでJSONデータをPOSTします。送信先のURLはこの後のAzure Logic Appsで生成されるものを使用します。

```sample.cpp
// インクルードしたヘッダは明記しておきます
#include <HTTPClient.h>
#include <ArduinoJson.h>

// こちらがJSONデータをPOSTする処理
void webApi(String webhook)
{
  int res;
  HTTPClient http;

  Serial.print("connect url :");
  Serial.println(webhook);

  Serial.print("[HTTP] begin...\n");
  if (http.begin(webhook))
  {
    Serial.print("[HTTP] POST...\n");
    http.addHeader("Content-Type", "application/json");

　　// JSON作成
    char json[255];
    DynamicJsonDocument json_buffer(1024);
    json_buffer["datetime"] = datetime;
    json_buffer["devicename"] = devicename;
    json_buffer["count"] = count_now;
    json_buffer["status"] = status;
    json_buffer["sec"] = tm_stop;

    serializeJson(json_buffer, json);
    Serial.println(json);

    int status_code = http.POST((uint8_t *)json, strlen(json));
    if (status_code > 0)
    {
      // HTTP header has been send and Server response header has been handled
      Serial.printf("[HTTP] POST... code: %d\n", status_code);
      Serial.println(http.getSize());

      // file found at server
      String payload;

      if (status_code == HTTP_CODE_OK)
      {
        Serial.println("HTTP_CODE_OK");
        Serial.println("");
      }
      else if (status_code == HTTP_CODE_NOT_FOUND)
      {
        Serial.println("HTTP_CODE_NOT_FOUND");
        Serial.println("");
      }
      res = 1;
 
    }
    else
    {
      Serial.printf("[HTTPS] POST... failed, error: %s\n", https.errorToString(status_code).c_str());
      res = -1;
    }
    http.end();
  }
  else
  {
    Serial.printf("[HTTPS] Unable to connect\n");
    res = -1;
  }
}
```





### Azure Logic Apps側：Excel Onlineに書き込む方法
##### 全体フロー
Webhookをトリガーとして、Excel Onlineにデータを追加します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/98d452c0-cbf5-ddec-91f6-a462363d2049.png)

##### HTTP要求の受信時
特に追加の設定は不要です。デザイナーを保存するとURLが発行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/f62da599-6ec2-dbec-48ea-956f970157d5.png)

##### 表に行を追加

[アクションの追加] より [Excel Online] を検索します。今回はSharePoint上のファイルを扱いたいので、[(Business)] の付いている方を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/9d0507f9-a069-eb06-22a4-b24c1f5040fd.png)

アクションは、 [表に行を追加] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/027ceea7-3a42-acbc-0bc1-91a8bde0cc67.png)

[場所] [ドキュメントライブラリ] [ファイル] [テーブル] は、ドロップダウンから選択できるので、手軽に接続先を選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/156c8b0d-7b20-021c-cbf1-45aec5629367.png)

テーブルの読み込みが正しく行われると、以下のようにテーブルにある項目が選択できるようになります。ここでは作ったテーブルにある内容を全て選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/1bb80cb9-085e-0dfd-cd7f-c2973e126411.png)

次にテーブルに格納するデータを取得します。
Bodyに格納されているデータを取得する為には、以下のような式でそれぞれのデータにアクセスします。

```
triggerBody()['xxxx']
```

例）例えば、[datetime] という項目を取得したい場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/a0b7189b-4706-57ae-988a-2ff3b3d04eb8.png)

それぞれの項目に式を設定して保存してデザイナを開きなおすと以下のようになります。見た目は変わっていますが、カーソルを合わせると設定した式が確認できると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/010c18ed-3b89-e359-bf1d-46badd957eb4.png)

これで、設定は完了です。
M5StackからJSONデータがポストされるたびに、Excelのテーブルにデータが格納されていきます。Excelをオンラインで開いたままでもデータが追加されるので、見てて面白いです。

# 最後に
Googleスプレッドシートと連携して、M5Stackなどからデータを書き込み方法の情報は多いのですが、Excelとの連携はあまりやられていないみたいだったので、ちょっとトライしてみました。ビジネス上ではExcelを使うことも多いと思うので、データの可視化や共有を含めて、何かと便利かと思います。

あとは、Excelにデータが入っていくので、事前にグラフを挿入しておけば、そのまま可視化されるので、とりあえずデータを取って可視化してみたいというときはかなり便利に使えるのではと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475457/6ec5bfc2-0c1c-c471-2f4b-f46054de74a2.png)