# アイレポとM5STACKでノーコードIoTやってみた

みなさんこんにちは。
自称アイレポエバンジェリストのmnrです。
ユーザー会でいつもお世話になっています。

さて秋ですね〜〜〜。こんな天気の良い日は家でIoTに限りますよね！！

ということで今回作ったものの完成品はこちらです。
## 温度が35度を超えると音と光でアイレポ帳票起動QRを表示する仕組み！

| 正常時 | 家の冷蔵庫にM5GO|
| -------- | -------- |
| <img src="https://i.gyazo.com/82d4eb6d367ff2521f0c6eb7313b275a.jpg" width="80%"> センサーは0.1秒ずつかなり精度が高い計測が可能です | <img src="https://i.gyazo.com/6b1448ee6af4b570b9b8f511cf8b317d.jpg"> 磁石が便利 |

| 異常時 | 室温が３５度を超えると |
| -------- | -------- |
| <img src="https://i.gyazo.com/27718379155d1bd4a0ae4bfebf70be49.jpg" height="１００％"> アイレポのカスタムURLスキーム QRが表示される | <img src="https://izu-area.com/irepom5.gif" > [動画音あり](https://drive.google.com/file/d/1BLhrc_C1zD1mFpH4lozrbFqK3B0OqwDD/view?usp=sharing) アイレポちゃんがパトランプに|

[３５度にするためドライヤーでセンサーを温める私(動画)](https://drive.google.com/file/d/1X_SVMF4sTVSN7rnZxtaWFE5fxQboYFTF/view?usp=drive_link)

## センサーの異常時に目的の指示書付き帳票を起動する
---
さて、どのように作ったかご説明します。

今回はM5GO IoTスターターキットv2.7を購入してみました。

M5StackシリーズのM5GOを開封しましたら液晶ディスプレイをはじめとしてGrove端子対応の簡単接続センサーがついていました。

特に説明書など見ないで始めることが出来ました。

M5Stackとは
> M5Stack:
> コンパクトな筐体の中に、ESP32マイコン、液晶ディスプレイ、ボタン、バッテリー、スピーカ、I/Oなど様々な機能が盛り込まれています。Wi-FiやBluetoothによる無線通信なども可能です。また、Grove端子がついているため、さまざまなセンサーや部品を簡単に接続できます。
>
> Raspberry Pi（ラズパイ）:
> 手のひらサイズのコンピューター。Linuxを動かせて、多機能。さまざまな部品をGPIOピンでつなげることができます。

Grove端子とは

> Grove端子とは？ Seeed社が開発した端子の名称で、4ピンの端子を利用してマイコンとセンサなどを接続するための規格になります。 ハンダ付けをする必要がないのでとても簡単です。
* 環境センサ・・・温度、湿度、気圧のセンサー
* 赤外線リモコン・・・赤外線信号を送受信
* RGBライト・・・ピカピカすることが可能
* 人感センサー・・・人が近づくと反応
* 角度センサー・・・つまみの角度を取得

センサーは後述する仕組みで容易に取り込む事が可能で、また嬉しいのがレゴと互換がありますので家にあるレゴで3Dプリンターなしで可愛い筐体などを作れます!


では、今回は環境センサーから温度と湿度を取得したいと思います。
以下の画像ようにUIFlowでブロックプログラミングをしていきます。Pythonで書くことも可能でArduino IDEでも開発も可能です。
> 「UIFlow」は、M5Stack社が開発している、ブロックタイプのプログラム開発環境です。 「Scratch」などと同じように、さまざまな機能をブロックを組み合わせることでプログラミングできます。
> ※実際のシステム完成画面。ブロックで組み立てている

ディスプレイに関しては見たままドラッグアンドドロップで調整が可能です。
アイレポちゃんの画像もそのまま取り込み画面を作っていきます。

たとえばM5GOの画面にセンサーの値を表示するのはこれだけで可能です。

完成品コードはこちらです。

複雑そうに見えますが実際にはM5STACK社のわかりやすいデモブロックがありますので読み込んで実行して真似しているだけです。

# アイレポ カスタムURLスキームは一番手軽に使える自社システムとの連携手段

アイレポとの連携はカスタムURLスキームというアイレポの機能を使用しています。とても好きな連携方法でたくさんの弊社のウェブシステムはこの方法で連携しています。

アイレポカスタムURLスキームのマニュアル
https://cimtops-support.com/i-Reporter/ir_manuals/jp/custom_url_scheme/CustomURL_Scheme_Overview_jp.pdf

こんな感じに使えます。

jp.co.cimtops.ireporter.createreport:defid=999

> これで定義ID999から帳票を作成するという機能になります。
>

自社ウェブシステムと連携する際は以下のようにHTMLでAタグで囲む形で利用しますが

<a href=”jp.co.cimtops.ireporter.createreport:defid=999”>
帳票を作成する
</a>

M5GO UIFlowでは以下のようにブロックを使用しています。

実際のセンサーの値を取得して帳票起動したい場合は
[[クラスター名]=[入力値]] の形式でセンサーの値を渡すことも可能です。
開いた帳票に指定された[クラスター名]に一致するクラスターに対し[入力値]をセットします。

jp.co.cimtops.ireporter.createreport:defid=2290&tempature=abcdefge

パトランプ的に使う仕組みは応用効きそうですね。


センサーの値に応じて帳票定義のQRを変えるのもよさそう

# アイレポのAPIを使用してM5STACKディスプレイに表示

先ほどはアイレポを起動する活用でしたがM5STACKでは`httpリクエストが可能`ですので定期的にアイレポのapiをコールして点検結果などをディスプレイに上記のように表示させる事も可能です。

このようなブロックで実現します。
☆API GATEWAY等のサーバーがある前提となります。


| STACK シリーズ | STICKシリーズ | ATOMシリーズ |
| -------- | -------- | -------- |
|  一番人気の定番 |  非常にコンパクト |  最もコンパクト|

> DALLE-3で生成

メンテナンス業でしたら施設点検や製造業でしたら機器の点検状況などを。M5STACKは上の図のように様々なサイズや特徴をもったシリーズがありますので現場状況にあわせて選べばいいですね。

### 業界を問わず様々応用出来そうでワクワクしますね。
ということで今回はIoTとの連携をご紹介しました〜。
では、れっつ愛レポ！

番外：
今私が購入を狙っているのがこちらでダイヤル操作が近未来のM5Stack Dialです。人気で中々購入出来ないです。欲しい。。、
https://www.switch-science.com/products/9271