入口に設置しよう！たのしいマスク判定機

#なんのためのもの？

お店に入る時に検温器はありますが、マスク「してる」「していない」を判定するものは無いですよね。
ピクトグラムのような張り紙にお願いが書かれていることはよく見かけます。
例の感染症が流行り始めて1年半くらい経ちますが、この先も暫く気を付けないといけないと思います。
**判定するアプリケーションがあったらきっと役に立つはず…！**

#ということで、つくってみた

丁度いい技術があったので実際にプロトタイプを作成してみました。![デモ画像.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/00541347-fe37-0e54-cf54-6b2082b0c6a0.gif)
　:point_down_tone4:　こちらからお試しいただけます。（読み込みに時間がかかる場合がございます。）
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWRyreX" data-user="yuta-proto-biz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuta-proto-biz/pen/XWRyreX">
  マスク判定アプリver2</a> by yuta-proto-biz (<a href="https://codepen.io/yuta-proto-biz">@yuta-proto-biz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#かんそうをきいてみた

みんなAIだの画像認識だの高い費用が掛かる技術だと思っていたようで、素直に驚いていました。
**人が変わったり、マスクの色が変わったら認識出来ないんじゃないか**という疑問も出たのでその場で試してみました。
結果は**問題なく判定**出来て、**汎用性**があることも証明出来ました。
後は余談ですが、**「猫が可愛い」**だったり**「メッセージが面白い」**といった意見も頂きました。

#動作の流れについて

![kadai2_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/ea143a39-a1f9-562f-a003-c60d7b12520a.png)


#使用したアプリケーションなど

<dl>
<dt>・CodePen</dt>
<dt>・Teachable Machine</dt>
<dt>・Node-RED</dt>
<dt>・Google SpreadSheet API</dt>
</dl>

#Node-RED 全体構成

![kadai2_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/611e4cca-b927-3e2b-6b99-2e2c43e1200e.png)

#Node-RED 各ノード詳細
![kadai2_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/a73cbf05-e4e7-8ddf-4639-05c0c4c98470.png)
![kadai2_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/27c25d75-b0a8-476b-dd70-2f47b052f148.png)
　:point_right_tone3:　CodePenから画像判定結果を受信
![kadai2_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/10a39a87-4e14-b7ac-ca90-e0c22e44600f.png)

```javascript
msg.pen = msg.payload.label;

return msg;
```

　:point_right_tone3:　送られてきた画像判定結果を変数に退避
![kadai2_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/e28be479-c427-cbdb-2e84-72fa143db149.png)
![kadai2_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/0975c38f-a1eb-89a1-e88d-42e0acf2e830.png)
　:point_right_tone3:　SpreadSheetから猫のセリフ一覧を配列で取得
![kadai2_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/5182b38a-2c2e-19cb-1629-29b015f149f7.png)

```javascript
let index = 0;

let resultMessage = "";

if (msg.pen == "マスクあり") {
    index = Math.floor(Math.random()*5) + 1;
} else {
    index = Math.floor(Math.random()*10) + 6;
}

resultMessage = msg.payload[index];

msg.payload.label = resultMessage;

return msg;
```

　:point_right_tone3:　判定結果によって違う乱数を発生させて、生成した数値でセリフ一覧の配列からメッセージを選ぶ
![kadai2_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/6efc5981-a250-332a-bd05-4c9ae168fa00.png)
![kadai2_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/071fcff5-0012-851a-375e-8647cc141656.png)
　:point_right_tone3:　CodePenに送信するためにメッセージを整形する
![kadai2_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/807c07fc-3959-b2f1-a1ab-20499b9e0804.png)
![kadai2_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/cd549fe5-b9ca-60f5-4f0e-8cce2fe6194b.png)
　:point_right_tone3:　CodePenにメッセージを送信する

#作成所感

この業界は役に立つものよりも**「面白い」**ものの方が評価されるのではないかという仮説を立てました。

#過去記事へのリンク

[**【 LINEBot 】この「漢方薬」が「どんな症状に効くのか」教えてくれませんか？　【 GoogleSpreadSheetAPI 】**
](https://qiita.com/yuta-proto-biz/items/89f8bee634d99067dbeb "漢方薬Bot")