M5Stack UIFlowとGoogleスプレッドシートでかんたんな打刻システムを作ってみる

M5Stack Core2にUIFlow環境でプログラムを組んで、Googleスプレッドシート (Google Apps Script) へログを記録するシステムを作ってみました。
「かんたん打刻システム」としていますが、M5Stackに接続するUnitを変えれば、いろんなログを手軽にとるシステムが組めると思います。

I've built a system with M5Stack UIFlow and Google Apps Script that can send a log over HTTP POST request.

この記事は、以下の動画の補足記事です。プログラムはこの記事にすべて載せてあります。
しかしながらVTuberとしても活動しておりまして、なにとぞなにとぞ、動画も見てください！！！
動作している様子は 4:23 付近からです！！
This article is supplement for the following video. Please watch it!

ここに動画が表示されます

ハードウェア

M5Stack Core2
RFID 2 Unit

クラウドサービス

Google スプレッドシート
- Google Apps Scriptで受信マクロを書く

HTTPのPOSTで、JSON形式でGoogle Apps Scriptへ送信します。
※最小限のプログラムなので、エラーハンドリングなどは無いです。

追加修正箇所：

Setupで、WiFiへ接続するブロックを最初に配置してください。
カードのIDの読み取り失敗がしばしばあるので、空文字列の場合は再試行するなどしてください。

マクロはdoPost()でPOSTリクエストを待ち受ける仕様になっているので、その中に処理を書きます。

レスポンスは HtmlService.createHtmlOutput() で生成する必要があります。それ以外だとリダイレクトが発生しますが、UIFlowはリダイレクトを自動で追いかけないので、200レスポンスでないものとしてエラー処理に(SuccessではなくFailの枝に)分岐してしまいます。


function doPost(e) {
  const postDataString = e.postData.getDataAsString();
  let postData = JSON.parse(postDataString);

  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];

  const newRow = [];
  const now = new Date();
  let datetimeString = now.toLocaleDateString() + " " + now.toLocaleString();
  if (postData["datetime"] != undefined) {
    datetimeString = postData["datetime"];
  }
  newRow.push(datetimeString);
  newRow.push(postData["devicename"]);
  newRow.push(postData["action"]);
  newRow.push(postData["cardid"]);

  sheet.appendRow(newRow);

  const res = HtmlService.createHtmlOutput("OK");

  return res;
}

2022年ごろの記事を見ると、ふつうにUIFlowからGoogle Apps Scriptへ送信できていたようなのですが、今回試した範囲では、「PSRAM必須」でした。ここに気が付くまでにちょっと時間をくってしまいました。
（MicroPythonのコンソールでリクエストを投げて、メモリ不測の例外を見てようやく気が付いた）

挙動を細かく追いかけてはいないのですが、1回の送信につき5秒ほどかかるようなので、高頻度な更新には向かないかもしれませんね。