Qiita Engineer Festa20242024年7月17日まで開催中！

UIFlowを使ってM5StackからGoogleのスプレッドシートに環境センサーのデータを送る

M5stack

Last updated at 2024-06-17Posted at 2024-06-17

この資料は2024/6/17開催の高校生向けハンズオンの資料です。
今回はM5StackからGoogleのスプレッドシートに環境センサーのデータを送信します

使うもの

M5Core2
ENV.Ⅲ Sensor
Chromebook
Google スプレッドシート
Google Apps Script
UIFlow1.0

※本来は新しいUIFlow2.0を使用するほうが良いですが、2.0はデバイス認証のためアカウント登録が必要で、ファームウェア書き込み時のアカウントと一致している必要があるため、今回のハンズオンのように不特定のユーザ、かつ2人で1台を共有する場合などの状況とは相性が悪いため今回は1.0を使用します

前提

M5Stackはファームウェアを書き換えて画面にAPI KEYが表示されてる状態としておきます。
余談ですが、ファームウェアの書き換えについてはこちらの資料を見てください。

UIFlowにアクセスする

下記のリンクテキストからUIFlowにアクセスしてください。

初期設定

この画面は左のUIFlow1.0を選択して、右下のConfirmボタンをクリックしてください。
※選択してる方は左上が緑色になってるのでそれで判断してください

Welcomeのメッセージが出たらSkipをクリックします

画面構成はこんな感じです

画面左下のAPI Keyをクリックします

Settingの画面が起動するので以下のように入力し、OKボタンをクリックします

Api key：M5Core2の画面に表示してある8桁の文字を入力してください
- 16進数なので、数字の0～9とアルファベットA～Fまでしか登場しませんので注意してください
Server：Japanのもの
Language：日本語
Device：Core2

OKボタンをクリックしてSetting画面が閉じた後、画面左下の表示が「接続済み」になっていれば成功です

M5Core2本体に環境センサーを接続する

本体側面のこの赤色のポートにGroveコネクタの4色ケーブルを接続します

環境センサーと接続したらこんな感じです

【補足】

本体側面の赤色のGroveポートはポートAと呼ばれ、I2Cという通信方式を使ってデータをやり取りするためのものです。
拡張パーツを使えばポートB(黒色)やC(水色)といったI2C以外の通信方式のポートを使うことが可能になります。
接続するセンサーによって通信方式が異なるため、ポートAを使用するタイプのセンサーはポートAに接続する必要があります。

センサー側のポートにも色がついてるため、迷った場合はこの色で判別してもだ丈夫です。
例えば、今回使用する環境センサーは赤色なので、ポートAに繋げばよいということがわかります

変換して使う術もなくはないですが、今回のメインからは逸れてしまうため割愛します

M5本体に環境データを表示する

ラベルを配置する

画面左上のLabelをドラッグ&ドロップで画面に配置します。
Fontは日本語が表示できるようUnicode24を選択します（24はおそらく表示する文字の大きさです）

同様の手順でラベルを6個配置します

ラベルの初期化を行う

コードブロックの中からラベルの表示に関するブロックを使用して初期化を行います

下記のようにブロックをSetupブロックの下に連結する形で配置します
このsetupより下に配置したブロックはプログラム実行時に１度だけ実行されます。

同じようにラベル6個分配置します。(ctrlキー＋Cとctrlキー+Vでコピペして配置してもOK）

全てlabel0になってるので、画面に配置した通りlabel0～label5までの6個のラベルの設定に変えます

ラベルに表示すする値が全て「Hello M5」になってるので、下記のように変更する

label	値
label0	温度(℃):
label1	湿度(%):
label2	気圧(hPa):
label3	0
label4	0
label5	0

変数を作成して初期化する

環境センサーから取得した値を代入するために変数を定義します
変数のグループから変数の作成をクリックします

以下の3つの変数を作成します

変数名	用途
tmp	温度データを代入する
hum	湿度データを代入する
atm	気圧データを代入する

順番に作成するため、まずは温度用にtmpと入力し、OKをクリックする

作成後は同様の手順で3つの変数を作成します

作成した変数を初期さするためブロックを配置します
配置後、ドロップダウンの中を選択し、tmp、hum、atmがそれぞれ１つずつ表示されてる状態にしてください

変数の初期として0をセットします

これでsetupの処理はひとまず完成です。

繰り返しブロックを配置する

イベントの中から「ずっと」というブロックを選択して配置します
※基本的にはこのブロックの中身がプロフラム終了まで繰り返し実行されます

ユニット(環境センサー)を追加する

画面レイアウトの下の「＋」から環境センサーを追加します。

今回のハンズオンで使用する環境センサーは下記の物ですが、種類が混ざっていますので注意してください。

センサーに書かれているものと同じものを選択してください。
例えば下記の写真のセンサーだと、

左のセンサーは、ユニット一覧の一番左の「ENV」です
右のセンサーは、ユニット一覧の左から３番目にある「ENV Ⅲ」です

実際にユニットを追加して見ましょう
※この資料はENVⅢをベースに進めますが、他の物でも基本的には同じです

変数にセンサーから取得したデータを代入する

tmp、hum、atmの変数ブロックを「ずっと」ブロックの中に追加します

追加したユニットから環境センサーのブロックを追加すします
変数とブロックの組み合わせは下記の通りです。

変数	ブロック
tmp
hum
atm

では、実際に追加して見ましょう

変数の値をラベルに表示する

ラベルのブロックを追加します

ラベルの値に変数を代入します

setupから順にこうなっていればOKです

プログラムを実行する

画面右下のRUNボタンをクリックして実行してみます
デバイスは順番に譲り合って試してください

M5の画面に環境データが表示されたら成功です。

　
ここまで出来たら、次はM5本体から送信された環境データをGoogleのスプレッドシートにデータを送ってみましょう　

M5から受信した環境データをGoogleのスプレッドシートに書き込むプログラムを作成する

まずは受信側の処理を作ります（送信側の処理は後から）

Googleのスプレッドシートを新規に作成する

A～E列に下記のように項目タイトルを設定します
※ファイル名は何でもいいのでつけておいてください
※シート名は初期値のままにします

列	値
A	受信日時
B	受信データ
C	温度
D	湿度
E	気圧

Apps Scriptでプログラムを作る

ここでは、M5から送信されたデータを受信し、スプレッドシートに書き込むプログラムを作成します。
メニューの中の拡張機能をクリックし、Apps Scriptをクリックする

下記のプログラムを書き込む

function doPost(e) {
  console.log('catch post')
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');  // 操作する対象のシートを指定
  var params = JSON.parse(e.postData.getDataAsString());                       // 受信したデータをJSON形式で分解して変数に代入
  var temp = params.tmp;                                                       // 温度の値を取得
  var hum = params.hum;                                                        // 湿度の値を取得
  var atmos = params.atm;                                                      // 気圧の値を取得

  sheet.insertRows(2,1);                                                       // ２行目に行を挿入
  sheet.getRange(2, 1).setValue(new Date());                                   // A列に受信日時を書き込む
  sheet.getRange(2, 2).setValue(params);                                       // B列に受信データを書き込む
  sheet.getRange(2, 3).setValue(temp);                                         // C列に温度を書き込む
  sheet.getRange(2, 4).setValue(hum);                                          // D列に湿度を書き込む
  sheet.getRange(2, 5).setValue(atmos);                                        // E列に気圧を書き込む
  
}

プロジェクトを保存します

関数アプリをデプロイする

画面右上の「デプロイ」から「新しいデプロイ」をクリックします

歯車のアイコンから、ウェブアプリをクリックします

M5からデータを送信できるように、アクセスできるユーザを「全員」にしてデプロイボタンをクリックします

アクセスを承認をクリックします

自分のGoogleのアカウントを選択してサインインします

advancedをクリックします
【補足】この警告は「Googleが正式に実行確認したプログラムじゃないけど大丈夫？」というもので、Apps Scriptを開発する際によく出てくる警告文です。今回、このプログラムがあなたのスプレッドシートにアクセスするため、「実行しても大丈夫なもの？」と確認のため表示しているものです。今回のプログラムはもちろん問題ありませんので手順の通りに進めて大丈夫です。