airpocketのアイコン画像
airpocket 2022年09月28日作成 (2022年09月28日更新) © MIT
セットアップや使用方法 セットアップや使用方法 閲覧数 523
airpocket 2022年09月28日作成 (2022年09月28日更新) © MIT セットアップや使用方法 セットアップや使用方法 閲覧数 523

M5Stack + UIFlow から google スプレッドシート + GAS にデータ送信する

M5Stack + UIFlow から google スプレッドシート + GAS にデータ送信する

はじめに

Spresenseコンテストで、ウェブアプリっぽいことに手を出してみたんですが、もう少し使えるととても便利そうだなーと感じていました。でもって先日お詳しい方とお話しする機会があり、GASでHTTPのPOSTを受けると便利だよー、と教えていただいたのでM5Stackで集めたデータをgoogleスプレッドシートに送信・保存する方法を試してみた覚書です。

作ったもの

M5Stackで作ったデータをスプレッドシートに追記していく最小構成のプログラムです。

M5Stackのボタンを押したら1から6の乱数を生成

作った乱数をHttp Request の POSTメソッドでGASに送信

GASのウェブアプリでデータ受信

受信時刻とデータをスプレッドシートに追記する

GAS側のコードと設定方法は@siroitori0413さんのこの記事を、M5StackのUIFlowは@tatsuya1970さんのこの記事を参考にさせていただきました。ありがとうございます(というかほぼそのままですmm)。

M5Stack + UIFlow

とりあえず、送信側をUIFlowでサクッと作ってしまいます。
ボタンAを押すとHttp RequestをPOSTします。
POST部分の処理をメインループに入れてるのは、ボタンAの割り込み処理内で実行すると画面表示のタイミングが遅くなってしまうから。(なんで?)

UIFlowのプログラムは次の通りです。赤枠の中には、GASで作ったウェブアプリのアドレスを入力します。
キャプションを入力できます

google スプレッドシート + GAS

google スプレッドシート

google スプレッドシートで、受信したデータを保存するスプレッドシートを作成します。
ファイル名は「受信テスト」としました。1行目にはデータタイトルを記入しておきます。
「時間」にはGASの受信時間、「受信データ」にはPOSTで受けたデータ部分、「ステータス」には受信データから乱数値だけを抜き出して記録します。

キャプションを入力できます

GAS

GASを使うには、スプレッドシートの上部メニューから、拡張機能>App Scriptを選択します。
キャプションを入力できます

プロジェクトが立ち上がるとこのような画面になります。
キャプションを入力できます

プロジェクト名を書き換えてコードを書きます。
キャプションを入力できます

function doPost(e) {
  console.log('catch post')
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var params = JSON.parse(e.postData.getDataAsString());
  var 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);          // 乱数値を抜き出してを記録
}

プログラムが書けたら、プログラムをデプロイして使える状態にします。
デプロイ>新しいデプロイ を選択。
キャプションを入力できます

種類の選択>ウェブアプリ を選択。
キャプションを入力できます

「新しい説明文」に任意のコメントを記入、「アクセスできるユーザー」を「全員」にして「デプロイ」を押す。
キャプションを入力できます

「アクセスを承認」する
キャプションを入力できます

グーグルスプレッドシートを作っているアカウントにログインする。
キャプションを入力できます

「Advanced」をクリック
キャプションを入力できます

「Go to POSTの受信テスト(unsafe)」をクリック
キャプションを入力できます

「Allow」をクリック
キャプションを入力できます

ウェブアプリのアドレスをコピーして「完了」
キャプションを入力できます

コピーしたウェブアプリのURLをUIFlowのHttp RequestブロックのURL欄に入力
キャプションを入力できます

動作テスト

M5StackのAボタンを押すと、数秒後にスプレッドシートにデータが追記されました!
キャプションを入力できます

表示形式を変えると秒単位まで記録されていますね。
キャプションを入力できます

おまけ Node-REDから投げてみる

Node-REDからも GAS 宛てに POST してみます。
フローはこれだけ。
キャプションを入力できます

injectノードの中身
msg.payload をJSON形式にして {"status":"from Node-RED"} とします。
キャプションを入力できます

http requestノードの中身
「メソッド」は「POST」、「URL」にGAS のウェブアプリの URL を記入します。
キャプションを入力できます

デバッグコンソールには「お返事がこないよ~」ってメッセージがでてますが、
キャプションを入力できます

スプレッドシートには Node-RED からのデータが追記されてます。
キャプションを入力できます

まとめ

IoTするとき、データの保存先をどこにしようか悩むこともあるかと思いますが、これくらい簡単ならグーグルスプレッドシートもアリな気がしました。
JavaScriptは知らないのでGASは敬遠していましたが、これくらいならなんとかなりそうです。
Node-REDからも簡単にデータを送れましたので、なるべくローコードで済ませたい人はNode-REDで処理フローを作って結果をスプレッドシートに保存することもできますね。

airpocketのアイコン画像
電子工作、プログラミング、AI、DIY、XR、IoT M5Stack / Raspberry Pi / Arduino / spresense / K210 / ESP32 / Maix / maicro:bit / oculus / Jetson Nano / minipupper etc
ログインしてコメントを投稿する