verylowfreqのアイコン画像
verylowfreq 2023年06月19日作成 (2023年06月19日更新)
製作品 製作品 閲覧数 1452
verylowfreq 2023年06月19日作成 (2023年06月19日更新) 製作品 製作品 閲覧数 1452

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

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!

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

システム構成 / System

ハードウェア

  • M5Stack Core2
  • RFID 2 Unit

クラウドサービス

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

UIFlowのプログラム / Programming in UIFlow

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

追加修正箇所:

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

UIFlowプログラム

Google Apps Scriptのコード / Code for Google Apps Script

マクロは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秒ほどかかるようなので、高頻度な更新には向かないかもしれませんね。

verylowfreqのアイコン画像
"verylowfreq" あるいは 「三峰スズ」(VTuber 2023年2月より) です。趣味で電子工作や3Dプリンターを楽しんでいます!
ログインしてコメントを投稿する