パトライトの点灯状況による工場の生産ラインのIoTを再現してみた



## １. はじめに

こちらのYouTubeの最初の5分間にインスパイアされて、
https://youtu.be/AanyOK3_yQU
工場の生産ラインで稼働状況を知らせるパトライトを使ったIoTを再現してみました。


私は製造業の人でもエンジニアでもないので、変なところがあればご指導願います。

![スクリーンショット 2022-09-11 21.09.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/9f48275c-6b34-6d2a-bb0e-9808928e6608.png)




### 完成イメージ

以下の画像のように、
パトライトの状況をスマホ（LINE)やデータベース（GoogleSpreadSheet）に　送ります。

![スクリーンショット 2022-09-11 21.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/dbbe1e39-67fb-7e2a-0380-b6662a159023.png)




### 環境・使用ツールなど

#### 動作確認OS
macOS Monterey

#### ハードウェア
- [M5StickC Plus](https://www.switch-science.com/catalog/6470/)
- [M5Stack用光センサユニット](https://www.switch-science.com/catalog/4051/)
- [パトライトシグナルタワーWME-302D-RYG](https://www.monotaro.com/p/4069/7695/)
※定価は約２万円ですが、メルカリで2400円でゲットしました。

#### 開発ツール
- LINE Notify
- IFTTT
- Google Speadsheet
- UIFlow　（ビジュアルプログラミングツール）

<br>

## 2.開発

### 2-1. 工場側　

M5StickC plus というマイコンボードを使います。

#### M5StickC plus と　UIFlow　の設定

まず、
最初の設定はこちら参照
https://qiita.com/tatsuya1970/items/c0a2a317c9d10942cbcb

M5StickC Plus の電源をオンにする
※ 電源ボタンは2秒長押しで ON, 6秒長押しで OFF

<img src="https://i.gyazo.com/e32e9860a62092d12b4bc91c9b582150.png" width="60%">


API KEY が表示されたらOK
（あとで使う）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/fb877274-539e-793d-3c8d-3767f6ab8828.png" width="40%">


#### UIFlow

UIFlowにアクセス
https://flow.m5stack.com/

初期画面
[![Image from Gyazo](https://i.gyazo.com/9f9a654635e1407827fa19134776433c.png)](https://gyazo.com/9f9a654635e1407827fa19134776433c)

左下の「APIキー」の表示をクリック
[![Image from Gyazo](https://i.gyazo.com/3d4b5c80cdec6cb151c9f05c74ed82fd.png)](https://gyazo.com/3d4b5c80cdec6cb151c9f05c74ed82fd)


以下の画像のようにセッティングする
(1)Apiキー　先ほどののAPIキーを入力、　Language：日本語
(2)濃いオレンジのM5Stickのアイコンをクリック
(3)「OK」をクリック

[![Image from Gyazo](https://i.gyazo.com/eaa0949fdafbcb6f93637c3412cbfc25.png)](https://gyazo.com/eaa0949fdafbcb6f93637c3412cbfc25)


こんな画面になる
[![Image from Gyazo](https://i.gyazo.com/a353c6297f99f93bc29c40a23050724c.png)](https://gyazo.com/a353c6297f99f93bc29c40a23050724c)


#### マイコンボードにセンサーをつける

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/a9a66604-2504-eb16-c3b3-f63eecd12a63.png" width="60%">

#### UIFlowでの開発
UIFlowの左サイドの「Label」アイコンをM5Stickの画像にドラッグ＆ドロップ
<img src="https://i.gyazo.com/a30be806ada526bbdb0285b80afa05be.png" width="50%">


M5Stick画像に「label0」という字が表示される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/f99a3c0d-ca75-c276-71fc-d172675a3918.png" width="50%">


　左下の「Units」をクリックし、
「＋」をクリック
<img src="https://i.gyazo.com/6a05439d9d5ac158a17ab1bf77419016.png" width="50%">


使用するセンサー（LIGHTセンサー）を選んで、「OK」
[![Image from Gyazo](https://i.gyazo.com/50c4de85ad2335bce6a0eec63f7ecab2.png)](https://gyazo.com/50c4de85ad2335bce6a0eec63f7ecab2)

左下にセンサーのアイコンが追加される
<img src="https://i.gyazo.com/7e1d77e2fd17928c0646e753c00c607f.png" width="50%">


#### UIFlow でのビジュアルプログラミング

プログラミング
![スクリーンショット 2022-05-19 6.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/69b3ba9d-18bb-8b73-4779-9b555ae0c13c.png)

Run
[![Image from Gyazo](https://i.gyazo.com/3b9473a8ed61b9a4be5b42a71e4179c2.png)](https://gyazo.com/3b9473a8ed61b9a4be5b42a71e4179c2)

光センサの値が表示されました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/fadeed82-16c7-ac90-913c-32f6947766a0.jpeg" width="50%">







### 2-2. データを受ける側 (LINE）

（参考にした記事）
https://qiita.com/twtjudy1128/items/e4980be7ffd1b465144a

LINE Notify と　IFTTT を使います。

- <B>LINE Notify</B>（ラインノティファイ）とは、LINEと外部のWebサービスやアプリを連携し、ユーザーがカスタマイズされた好みの情報を受け取ることができる機能です（無料）
今回は、外部のセンサーのデータを受領するために使います。

- <B>IFTTT</B>（イフト） とは異なるソーシャルメディアやプラットフォームを連携させるWebサービスです。(一定数まで無料）
今回は、センサーのデータをマイコンを通じて通信したものを、LINEへつなぐ役目を担います


#### LINE Notify
LINE Notify にアクセス

https://notify-bot.line.me/ja/


ログイン
<img src="https://i.gyazo.com/8b79fcd2e7ac2f64c4547fc9070503eb.png" width="70%">


ログイン画面
<img src="https://i.gyazo.com/a14809557b62a63471f0eda5f8deb561.png" width="70%">


ログインできたら右上に自分のLINE名が表示される
「IFTTT」をクリック
<img src="https://i.gyazo.com/10b9690a5b3f011e691345bb0d2725a3.png" width="70%">

「Create」（「GET Start」）をクリック
<img src="https://i.gyazo.com/0144eade0f9325a8ddbc3b961f8175c1.png" width="70%">

「If This」 をクリック
<img src="https://i.gyazo.com/caa7b516dbc71a74817c5fa036f3bfb7.png" width="70%">



「webhook」を検索し、webhookをクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/20333227-556d-c03e-46e9-89a17992a2a2.png" width="70%">


「Recieve a web request」と書かれたブロックをクリック
<img src="https://i.gyazo.com/393999072dcc9cb2a78759fa3937946d.png" width="70%">


「EventName」を入力して、「Create Trigger」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/d452b63a-ee66-9bf3-8923-2063ba79e8fa.png" width="70%">


次は、LINEに通知がいく設定をします。
「Then That」をクリック
<img src="https://i.gyazo.com/9540486066d6cfd645508baaefbb9b80.png" width="70%">

「LINE」を検索し、クリック
<img src="https://i.gyazo.com/b0b78c2f10834b46b55915f580958301.png" width="70%">


「Send message」をクリック
<img src="https://i.gyazo.com/602f861249394f0518efc4d815e500fc.png" width="70%">

もし、「connect + LINEと連携しますか？」
というメッセージがでる人は、「YES」


こんな画面になる

<img src="https://i.gyazo.com/cf45039c075631fc909023c483ca8fb5.png" width="50%">


- Recipient : 通知が来てほしいLINEグループを選択
- Message : 送られてくるメッセージ　グレースケールのValue1とかは変数になってて、M5Stickからテキストを代入できます。
- Photo URL :テキストだけじゃなく、写真も送ってほしいときは、ここにイメージURLか変数を入れます。

今回は以下のように設定し、「Create action]


[![Image from Gyazo](https://i.gyazo.com/764de6f5f81c82cbeb44d160f1defea0.png)](https://gyazo.com/764de6f5f81c82cbeb44d160f1defea0)



「continue 」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/5ccf662d-dbab-bf42-7641-edfdc59622b7.png" width="70%">　


「Finish」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/cfbb8c86-e607-8811-500c-6093b923b527.png" width="70%">　


設定完了
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/f3418c02-b64a-4fad-0581-d3d988e39a85.png" width="70%">　

Ｗebhookマークをクリック
<img src="https://i.gyazo.com/fc625b8b5e4cce514a102334e0eb3299.png" width="70%">　

Documentation をクリック
<img src="https://i.gyazo.com/0ab36e0202af5ec42e4285f83611f2ba.png" width="70%">　


key を取得できる
[![Image from Gyazo](https://i.gyazo.com/2c9ded714f44b2e38ca2a7fc4e16e82e.jpg)](https://gyazo.com/2c9ded714f44b2e38ca2a7fc4e16e82e)

以下のURLをどこかに控えておく
```
https://maker.ifttt.com/trigger/LightTest/with/key/[Your key]
```



<br>

#### センサーのしきい値の設定

パトライトにセンサーを養生テープでくっつける

![スクリーンショット 2022-05-19 6.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/cb615122-13ed-7014-1ee3-4cef807e3e7e.png)


パトライトがついてる時　（機械が正常稼働）
![スクリーンショット 2022-05-19 7.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/0bcc087d-d60d-a8f7-4c26-405aa5d692d8.png)


パトライトが消えてる時（機械が停止）
![スクリーンショット 2022-05-19 7.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/9b8258b6-52f9-a6af-281e-4dbf3dabfb9e.png)

パトライトが点灯しているときと消えてるときのセンサーの値を調べて、しきい値を決めます。

私の部屋は、パトライトが点灯しているときは、おおむねセンサーの値が９００以上でしたので、しきい値を９００とします。

<br>
UIFlowに戻り、
以下のプログラムを作成します。
しきい値とさきほどIFTTTで控えたURLを入力します。
パトライトが消えたらLINEに「STOP」アラート、パトライト稼働中は「RUN」というアラートがいきます。

[![Image from Gyazo](https://i.gyazo.com/d938176951490536e9322511ed6d7d4d.png)](https://gyazo.com/d938176951490536e9322511ed6d7d4d)


プログラムを作成したら、下方の「Run」で実行してください。

１０秒ごとにLINEに光センサーの情報が投稿されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/cecf4a13-a227-f2c9-cfd2-1bc483643706.jpeg" width="50%">



このままでは、パトライトの点灯・消灯に関わらず、一定間隔でLINEに通知が行きます。
点灯→消灯、消灯→点灯　といった状況が変更になったときだけLINEに通知するようにするには、
以下の画像のように
パトライトの状況を表す変数 state と
状況が変わった時にフラグ1がたつ変数　changeを作ります。
change変数が１のときだけ、LINEに送信するようにしました。
※ほかにいい方法があるかもしれませんが。

[![Image from Gyazo](https://i.gyazo.com/72944d0c71fd21627e66878e94f536ff.png)](https://gyazo.com/72944d0c71fd21627e66878e94f536ff)
[![Image from Gyazo](https://i.gyazo.com/1ac8801253e03e8c78b4dcef1aad2c27.png)](https://gyazo.com/1ac8801253e03e8c78b4dcef1aad2c27)
RUNすると、

このように、状況が変わったときだけLINEに通知してくれます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/cffe22e1-292a-0d70-6343-2afd6c817b5b.jpeg" width="70%">　


#### （参考）複数のLINEに送る場合

![スクリーンショット 2022-09-12 0.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/a05442f6-5059-e97a-9ed6-bee2388311c5.png)



配列とループを使います。
なぜか、ループ内では3秒以上間隔を開けないと送信できませんでした。

プログラム
[![Image from Gyazo](https://i.gyazo.com/76168c8c28abd827adf69bf4f3f909d5.png)](https://gyazo.com/76168c8c28abd827adf69bf4f3f909d5)
[![Image from Gyazo](https://i.gyazo.com/f696281ef3ed9b412e0a4a623ccc7d31.png)](https://gyazo.com/f696281ef3ed9b412e0a4a623ccc7d31)

<br>


### 2-3. データを受ける側 (GoogleSpreadSheet）


（参考にしたブログ）
https://qiita.com/chocomo/items/e5506d00cc82790d2b4d


GoogleSpreadシートを新規作成
シート名を「data」にして、
以下のようにセルに入力する。

[![Image from Gyazo](https://i.gyazo.com/6bb1f2aeedddb446c2f7c7791fefd1ec.png)](https://gyazo.com/6bb1f2aeedddb446c2f7c7791fefd1ec)

拡張機能＞AppScript を開く
[![Image from Gyazo](https://i.gyazo.com/bca5c25a83df77f6331f6dad5a02e850.png)](https://gyazo.com/bca5c25a83df77f6331f6dad5a02e850)

こんな画面になる
[![Image from Gyazo](https://i.gyazo.com/b3d444ab6ecb3894a9684dcbeb4c71c0.png)](https://gyazo.com/b3d444ab6ecb3894a9684dcbeb4c71c0)


以下のコードをコピペ

```
function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('data');  //”data”シートをアクティブにする。  
  var jsonString = e.postData.getDataAsString();
  var params = JSON.parse(jsonString);

  // データをシートに追加
  sheet.insertRows(2,1);  // ２行目に行を追加
  sheet.getRange(2, 1).setValue(new Date());       // 受信日時を記録
  sheet.getRange(2, 2).setValue(params.Value);     // センサー値
  sheet.getRange(2, 3).setValue(params.State);     // 稼働状況  
}
```

<br>

デプロイ ＞ 新しいデプロイ
[![Image from Gyazo](https://i.gyazo.com/9695e83056adad702886b200b6de62b1.png)](https://gyazo.com/9695e83056adad702886b200b6de62b1)

ウェブアプリ
<img src="https://i.gyazo.com/2dbf09e7bbde2b80b9fb325073ab594f.png" width="70%">　

次のユーザーとして実行：自分
アクセスできるユーザー：全員

デプロイ
[![Image from Gyazo](https://i.gyazo.com/4a421c59dd1d73231f2d11c7a27ad892.png)](https://gyazo.com/4a421c59dd1d73231f2d11c7a27ad892)

アクセスを承認
<img src="https://i.gyazo.com/76350d354421c271421290b596fc1322.png" width="70%">　

自分のGoogleアカウントをクリック
[![Image from Gyazo](https://i.gyazo.com/3c7711a365be8ee5808dac08147043f5.png)](https://gyazo.com/3c7711a365be8ee5808dac08147043f5)

最初なので認証が済んでませんよというアラートが出る。
Advanced をクリック
[![Image from Gyazo](https://i.gyazo.com/5aefdb16625f7a16c1a1a0f1fc6b7684.png)](https://gyazo.com/5aefdb16625f7a16c1a1a0f1fc6b7684)

先ほど作成したスクリプトのファイル名が現れるので、クリックする。
[![Image from Gyazo](https://i.gyazo.com/98143a20e040363083122fc1aa92bd9f.png)](https://gyazo.com/98143a20e040363083122fc1aa92bd9f)

「Allow」をクリック

[![Image from Gyazo](https://i.gyazo.com/238d973d5ddc2279090eb2e10c277d48.png)](https://gyazo.com/238d973d5ddc2279090eb2e10c277d48)

あらためて、デプロイをクリックすると、

デプロイが成功

以下のURLをどこかに控えておく。

[![Image from Gyazo](https://i.gyazo.com/096ce290223e6a5712729a4ec639c3c7.png)](https://gyazo.com/096ce290223e6a5712729a4ec639c3c7)


<br>
UIFlow　に戻り、
以下のプログラムの中に、さきほどのURLを入力する。

[![Image from Gyazo](https://i.gyazo.com/f243f362af02d7a2324c5a2dbcb33662.png)](https://gyazo.com/f243f362af02d7a2324c5a2dbcb33662)

PLAYすると、
GoogleSpreadSheet に光センサーのデータがいくはず。
![スクリーンショット 2022-09-11 23.22.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/e2d41f8d-b7d2-51d1-3e04-bea79a06b333.png)



以上です。

<br>