GASとUIFlowでGoogleスプレッドシートにM5stackの情報を取得する。

商業ディベロッパー勤務の非エンジニアが試行錯誤しながらいろいろなモノを作成をしています。非エンジニア、電子工作1年生のため、とりあえずアレやコレやとやってみようを繰り返しています。

1. デバイスデータを取得する方法を模索中

前回の記事でもお話ししましたが、単身赴任中の夫とのコミュニケーションをもっと楽しくするために、色々思案中です。
前回は画面クリックでハートを飛ばすというとこまでやりましたが、
デバイス操作で画面にハートが飛ぶようになるといいなと思っています。

1-1. M5stackからHTTP POSTをしてみる

ｽﾀｯｸﾁｬﾝというスーパーカワイイロボットにハマっているため、手元にM5stackがあります。
これを使ってHTTP通信を出来るようになりたいです。

2. 実装

作ったものはこちら

初心者なのでまずはこちらの記事の再現から始めます。

2-1. コード

M5stack側はUIFLOWのコードブロックで実装します。
M5stackのボタンを押すとランダムの数字が出るようにして、それをHTTP POSTのPOSTリクエストでGAS側に送信します。

GoogleAppsScript 側で、WEBアプリでデータの受信と受信日とデータをスプレッドシートに転記するコードを書きます。

function doPost(e) {
  console.log('catch post');
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  const params = JSON.parse(e.postData.getDataAsString());
  const status = params.status;

  // データをシートに追加
  sheet.insertRows(2,1);
  sheet.getRange(2, 1).setValue(new Date());      // 受信日時を記録
  sheet.getRange(2, 2).setValue(params);          // 受信データを記録
  sheet.getRange(2, 3).setValue(status);          // 乱数値を抜き出してを記録
}

M5stackのボタンを押すと数秒遅れでスプレッドシートに転記されます。

3. 簡単に作れた

ここまではお手本記事を参考に作ることが出来ました。
UIFLOWもGASも初心者に優しい。

ここからデータの作り方と取得方法を変更してみようと思いますが、まずはここまで。