M5Stack関連デモ web展示コーナー – 宮城県産業技術総合センター

イベント詳細

日付: 2025年7月3日
カテゴリ: 身の丈DX
タグ: AI, DX, IoT, 身の丈
定員:

　M5Stackを用いたIoTハンズオンセミナー（体験会）の実施に合わせ、M5StackとUIFlowを用いた、実際に役立つデモのweb展示コーナーを開設しました。

概要

M5Stackを用いたIoTハンズオンセミナー（体験会）を行う際の会場の後方に、実際に展示します。
・7/17【仙台地域開催】IoTハンズオンセミナー
・8/29【大崎地域開催】IoTハンズオンセミナー
・9/19【気仙沼地域開催】IoTハンズオンセミナー
コンセプト：
・IoTハンズオンセミナーで使用する M5Stack(Core2) と UIFlow で構築できます。
・すぐに実際の業務に生かせる例を示します。
・自分で作れるように、デバイスの購入先やプログラムを表示します。
・外部サービスは無料で構築可能なものを活用します。
web展示内容：

防水温度センサによる水槽の水温監視

機能

防水温度センサにより、水槽の温度を常時監視する。

特徴

防水なので、食品加工等、水を使用した工程の水温が測定できる
水以外の流体の温度も測定できる

応用例

工程内で使用される液体の温度の測定
飼育水槽の水温の測定
湿った土や砂の中の温度の測定

作り方

　１．UIFlowの設定

　　ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
　　または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

　２．防水センサ用のブロック(ds18b20)のインストール方法

防水温度センサ(DS18B20) 用カスタムブロックのサイト
（https://github.com/stonatm/UiFlow-custom-blocks/tree/master/ds18b20）
を開き、ds18b20.m5b をダウンロード。
UIFlowのブロック一覧の一番下にある「Custom」をクリックし、右側に出る「*.m5bファイルを読み込み」をクリックし、 ds18b20.m5b を開く。
「Custom」をクリックし、下に「ds18b20」が出ることとを確認。
「ds18b20」をクリックし、右に３つのブロックが出ることを確認。
ピン番号は33に変更する。（Core2の場合）

参考にさせていただいた外部webサイト

１時間で作るM5Stackと防水温度センサ(DS18B20)を使った水温計
https://qiita.com/yukimatsu/items/55d1134bb00688e1b907
防水温度センサ(DS18B20) 購入元
https://jp.seeedstudio.com/One-Wire-Temperature-Sensor-p-1235.html
防水温度センサ(DS18B20) 用カスタムブロック
https://github.com/stonatm/UiFlow-custom-blocks/tree/master/ds18b20

TOFセンサとリレーによる水槽の水位制御

機能

TOFセンサ（距離を測るセンサ）により水面の高さを測り、一定になるように電動ポンプで制御する
（制御しない場合、サイフォン効果により２つの水槽の液面が同じ高さになる）

特徴

測定だけではなく、液面が一定になる制御も行う
エラーが発生した場合にモーターが止まるフェールセーフ機構

応用例

魚などの飼育水槽の液面の管理など

作り方

１．M5Stackの設定

　　ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
　　または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

参考にさせていただいた外部webサイト

TOFセンサ購入元
https://www.switch-science.com/products/5219
リレー購入元
https://www.switch-science.com/products/6783
電動ポンプ購入元
https://www.amazon.co.jp/dp/B08R57TPP8

振動の振幅を監視し異常を通知

機能

３軸の加速度の振幅を測定し、しきい値を越えたら警報を出す。
（測定可能な振動の周波数は100Hz程度まで）
測定可能な加速度振幅は２ｇ（重力加速度）まで

特徴

M5Stack Core2 に内蔵されたセンサを使用している

応用例

- 工程内で発生する振動の振幅の監視
- LineやDiscordに接続する機能を加えて、異常発生時の遠隔地への通知

しきい値を小さく設定し、持ち去り防止装置として活用

作り方

１．M5Stackの設定

　　ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
　　または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

LoRa通信で遠く離れたM5Stackに情報を送信する

機能

LoRa通信ユニットにより、最大5kM（見通し）離れたM5Stack(M5StickCPlus2)に照度を送信する。

特徴

WiFiや携帯電話の電波が届かない場所のデータの遠隔監視が可能
周波数帯が異なるので、WiFiが混雑した状況でも通信が可能

応用例

広い工場や、過酷な環境の工場内でのデータの遠隔監視
都市部から離れた郊外や、海上でのデータの遠隔監視

作り方

送信側のM5Stack(Core2)の設定
ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

・Unitsに「DLIGHT」を追加し、ポートはAとする。
・Unitsに「LoRaE220」を追加し、ポートはBとする。
受信側のM5Stack(M5StickCPlus2)の設定
ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

・Unitsに「LoRaE220」を追加し、ポートはBとする
LoRa通信ユニットの設定
２つのディップスイッチ（M0,M1）を、どちらもON（上側にスライド）する

参考にさせていただいた外部webサイト

M5Stack用LoRaユニット JPバージョン
https://www.switch-science.com/products/9278?_pos=6&_sid=95122e215&_ss=r

Line を用いた、照度異常のスマホへの通知

機能

照度を常に監視し、一定値より低く（高く）なったら異常と判断し、Line messaging API により遠隔地に伝える

特徴

Lineは国内で広く普及したSNSなので、導入がスムーズ（但し Line messaging API で無料で送信できるメッセージは200回/月まで）
Lineを起動していなくてもメッセージが届いた段階で即座にスマホに表示される（SNSの機能）
M5Stack側で時刻も記録している

応用例

一定の照度が必要な作物の栽培の管理など
装置の近くに人が来たことの察知など
照度センサを各種センサに変えて、工程内異常の遠隔地での把握など

作り方

Line側
- 外部Webサイト「UIFlowでLINE Messaging APIを通してLINE公式アカウントからメッセージを送る」（https://note.com/singtaro/n/nbc42ab792de9）の手順１～４に記載の通りに設定する
M5Stack側 (Core2)
1. ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
2. または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

参考にさせていただいた外部webサイト

「UIFlowでLINE Messaging APIを通してLINE公式アカウントからメッセージを送る」（https://note.com/singtaro/n/nbc42ab792de9）

Discord を用いた、タッチボタン操作のタブレットPCへの通知

概要M5Stack Core2 に標準装備されているタッチパネルが押されたことを、遠隔地にあるWiFiに接続されたタブレットPC等に知らせるデモです。

機能

タッチパネルの操作を遠隔地に伝える

特徴

Discord の活用に電話番号は必要無いので、一般のタブレットPCが活用できる
Discord はメッセージ送信の回数に制限が無いので、メッセージ量を気にせず通信できる

応用例

作業者のタッチによる開始、終了の遠隔地での把握
タッチパネルを各種センサに変えて、工程内異常の遠隔地での把握

作り方

Discord側
1. パソコンでDiscordにログイン
2. 画面右側の「サーバーを追加」をクリック
3. 「サーバーの作成」画面で、「オリジナルの作成」をクリック
4. あなたのサーバーについてもう少し詳しく教えてください」はスキップ
5. 「サーバーをカスタマイズ」で適当なサーバー名を設定して「新規作成」をクリック
6. 今作ったサーバーのアイコンを右クリックして「サーバー設定」＞「連携サービス」
7. 次の画面で「ウエブフックを作成」をクリック
8. 作成されたウェブフック（Spidey Bot）の右矢印をクリック
9. 次の画面で「ウェブフックURLをコピー」をクリック
M5Stack側 (Core2)
1. ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
2. または、UIFlow1.0上で以下の図のようにブロックを組み合わせる
3. URLのブロックに、先ほどコピーしたウェブフックURLを貼り付ける

M5Stackのボタンに触れるたびに、Discordの該当するサーバに接続したタブレットPCにメッセージが表示される

参考にさせていただいた外部webサイト

- Discordのwebhookの設定
  DiscordのWebHook機能を使おう！ #API – Qiita （最初の方だけ）

M5StackのUIFlowの設定
Discordサーバー上のテキストチャンネルへのメッセージングを UIFlow や Fetch API を使って行う（ #GWアドベントカレンダー 4/29 ） #M5stack – Qiita

Googleスプレッドシートを用いたQRコード/バーコード管理

機能

QRコード及びバーコードの値を読み取り、Googleスプレッドシートに保存する。

特徴

Googleスプレッドシートなので、全国どこからでも保存できる

応用例

離れた現場での納品のチェックを事務所で行う等

作り方

〇　Googleスプレッドシート側

Googleにログイン
Googleのマイドライブ上に新規にスプレッドシートを作成し、「拡張機能」→「Apps Script」を選択する。
「無題のプロジェクト」画面が出る
「無題のプロジェクト」画面で、スクリプトを下図のように入力する。（テキストはここをクリック）
入力したら「デプロイ」→「新しいデプロイ」する。
「デプロイタイプを選択してください」が出たら、歯車のアイコンから「ウェブアプリ」を選択
アクセスできるユーザを「全員」にしてデプロイボタンをクリック
「新しいデプロイ」の画面で「アクセスを承認」をクリック
「Sign in with Google」画面で自分のアカウントをクリック
「Google hasn’t verified this app」という画面が出たら「Advanced」をクリック
「Go to 無題のプロジェクト (unsafe)」が出てくるのでクリック
「無題のプロジェクト wants to access your Google Account」と書かれた画面下方の「Allow」をクリック
「デプロイを更新しました」と書かれた画面の「ウエブアプリURL」をコピーする。
スプレッドシート（ここではtest2）上に下図のように入力する。（セルA2に「記録日時」、セルB2に「データ」）
作成したスプレッドシートを Google Drive 上で右クリックし、共有→一般的なアクセスを制限付きからリンクを知っている全員に変更

〇　M5Stack側(Core2)

ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

・URLのブロックには、先ほどコピーしたウエブアプリURLを貼り付ける
・Unitsには「QRCode」を追加し、ポートはAとする。

動作

QRコードリーダーを対象に向け、読み取りスイッチ（TRIG）を押すと、「ピッ」という音とともに照明が光り、コードが読み込まれます。
数秒後にGoogleスプレッドシートに読み取り時刻とコードが書き込まれ、画面が青くなります。（画面が赤の場合は失敗）

参考にさせていただいた外部webサイト

UIFlow から Google Sheets にデータを送る方法
「UIFlowを使ってM5StackからGoogleのスプレッドシートに環境センサーのデータを送る」
https://qiita.com/t-sho/items/acba8d720b0b23ffb9d4
今回使用したQRコード／バーコードリーダー
https://www.switch-science.com/products/9508?_pos=9&_sid=fcafe5988&_ss=r

Googleスプレッドシートを用いた温湿度のグラフ化と異常表示

機能

環境センサから温度と湿度を読み取り、Googleスプレッドシートでグラフ化して表示する。
温度と湿度が基準値から外れたら、画面上に警告を表示する。

特徴

Googleスプレッドシートなので、全国どこからでもグラフと警告が見える
無料で制限なくデータが保存できる

応用例

複数の作業場の温湿度を事務室でまとめて確認する等

作り方

〇　Googleスプレッドシート側

Googleにログイン
Googleのマイドライブ上に新規にスプレッドシートを作成し、「拡張機能」→「Apps Script」を選択する。
「無題のプロジェクト」画面が出る
「無題のプロジェクト」画面で、スクリプトを下図のように入力する。（テキストはここをクリック）
入力したら「デプロイ」→「新しいデプロイ」する。
「デプロイタイプを選択してください」が出たら、歯車のアイコンから「ウェブアプリ」を選択
アクセスできるユーザを「全員」にしてデプロイボタンをクリック
「新しいデプロイ」の画面で「アクセスを承認」をクリック
「Sign in with Google」画面で自分のアカウントをクリック
「Google hasn’t verified this app」という画面が出たら「Advanced」をクリック
「Go to 無題のプロジェクト (unsafe)」が出てくるのでクリック
「無題のプロジェクト wants to access your Google Account」と書かれた画面下方の「Allow」をクリック
「デプロイを更新しました」と書かれた画面の「ウエブアプリURL」をコピーする。
スプレッドシート（ここではtest）上に下図のように入力する。
作成したスプレッドシートを Google Drive 上で右クリックし、共有→一般的なアクセスを制限付きからリンクを知っている全員に変更

〇　M5Stack側(Core2)

ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる
・URLのブロックには、先ほどコピーしたウエブアプリURLを貼り付ける
・Unitsには「ENVⅣ」を追加し、ポートはAとする。

動作

温湿度を監視し、Google Sheets上に時刻とともに記録します。
（いくらでも記録できますが、ここでは100行に制限しています）
ある程度記録したら、温湿度の時間変化のグラフを作成すれば、以後自動的に更新されます。（エクセルと同じ要領で散布図グラフを作成）
正常範囲を越えたら、グラフと同じ画面上に警告を発します。
警告は、温度または湿度の表示セルを黄色にするとともに、右側に「異常！」と表示します。

参考にさせていただいた外部webサイト

UIFlow から Google Sheets にデータを送る方法
「UIFlowを使ってM5StackからGoogleのスプレッドシートに環境センサーのデータを送る」
https://qiita.com/t-sho/items/acba8d720b0b23ffb9d4

GoogleスプレッドシートからM5Stackへの異常通知

機能

- Googleスプレッドシートに「異常」と表示されたらM5stackに通知する

特徴

通常不可能な、クラウドからローカル（手元のIoT機器）への通知が可能
（但し、通知のタイミングは、M5StackがGoogleスプレッドシートにアクセスしたタイミングに限られる）

応用例

クラウドで検知した異常の現場への通知
ある現場で発生した異常の他の現場への通知

作り方

〇　Googleスプレッドシート側

画面と App Scriptは、「Googleスプレッドシートを用いた温湿度のグラフ化と異常表示」のGoogleスプレッドシートの作り方と同一
作成したスプレッドシートのURLからスプレッドシートIDをコピーする。
（https://docs.google.com/spreadsheets/d/{スプレッドシートID}/edit?usp=sharing）
Google API Console 上で Google Sheets API を以下のように設定（参考にしたURL:「【Google Sheets API】スプレッドシートのデータをJSONで取得する」https://notes.sharesl.net/articles/2541/）
1. Google API ConsoleでAPIを有効化する
2. APIキーを取得する
3. アプリケーションの制限は「IPアドレス」にする　（IPアドレスはWiFiルータのIPアドレス）
4. APIの制限は「Google Sheets API」にする
ブラウザ上で以下のURLを入れてEnterキーを押す
https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートID}/values/{シート名}?key={APIキー}
成功すると、以下のような画面になる。（スプレッドシートの情報がJSONファイルとしてローカルに送られる）

〇　M5Stack側(Core2)

ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる
・POST側のURLのブロックには、ウエブアプリURLを貼り付ける。
・GET側のURLのブロックには、https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートID}/values/{シート名}?key={APIキー} を貼り付ける。
・Unitsには「ENVⅣ」を追加し、ポートはAとする。

動作、注意事項

Google Sheets 上で設定した正常温度範囲を超えると、ローカルのM5Stackの画面が赤くなり、ブザー音が鳴ります。
ブザー音はwavファイルで設定されているので、これを変えれば好きな音が出せますが、実用を考えるとリレー＋本物のブザーが良いです。
スプレッドシート上の情報を全部ダウンロードするので、データが多い場合はシートを分けると良いです。

参考にさせていただいた外部webサイト

「【Google Sheets API】スプレッドシートのデータをJSONで取得する」
https://notes.sharesl.net/articles/2541/

RFIDとGoogleスプレッドシートを用いた、出退勤の遠隔管理

機能

RFIDユニットにRFIDカードがタッチされたらIDを読み取り、Googleスプレッドシートの該当する箇所に出退勤と日時を書き込む。

特徴

Googleスプレッドシートなので全国どこからでも出退勤管理が可能
カードのタッチによりwebに流れる情報の中に氏名とIDは含まれない

応用例

小人数の工場や仮設事務所の出退勤管理など
RFIDカードをRFIDタグに代えて、物品の管理など

作り方

〇　Googleスプレッドシート側

Googleにログイン
Googleのマイドライブ上に新規にスプレッドシートを作成し、「拡張機能」→「Apps Script」を選択する。
「無題のプロジェクト」画面が出る
「無題のプロジェクト」画面で、スクリプトを下図のように入力する。（テキストはここをクリック）
入力したら「デプロイ」→「新しいデプロイ」する。
「デプロイタイプを選択してください」が出たら、歯車のアイコンから「ウェブアプリ」を選択
アクセスできるユーザを「全員」にしてデプロイボタンをクリック
「新しいデプロイ」の画面で「アクセスを承認」をクリック
「Sign in with Google」画面で自分のアカウントをクリック
「Google hasn’t verified this app」という画面が出たら「Advanced」をクリック
「Go to 無題のプロジェクト (unsafe)」が出てくるのでクリック
「無題のプロジェクト wants to access your Google Account」と書かれた画面下方の「Allow」をクリック
「デプロイを更新しました」と書かれた画面の「ウエブアプリURL」をコピーする。
スプレッドシート（ここではShuttaikin_Kanri）上に下図のように入力する。
作成したスプレッドシートを Google Drive 上で右クリックし、共有→一般的なアクセスを制限付きからリンクを知っている全員に変更

〇　M5Stack側(Core2)

ここをクリックして .m5fファイルをUIFlow1.0に読みこませる
または、UIFlow1.0上で以下の図のようにブロックを組み合わせる

参考にさせていただいた外部webサイト

UIFlow から Google Sheets にデータを送る方法
「UIFlowを使ってM5StackからGoogleのスプレッドシートに環境センサーのデータを送る」
https://qiita.com/t-sho/items/acba8d720b0b23ffb9d4
RFIDユニット「M5Stack用WS1850S搭載 RFID 2ユニット」
https://www.switch-science.com/products/8301
RFIDカード
https://www.switch-science.com/products/4702