オフィスで無駄なウォーキングしてませんか？webカメラを活用して在席判定！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792185/d2c64afd-ce09-bcc3-59cd-c10e3e336628.png)



突然ですが、私は小売り会社の総務部で働いています。
オフィスは本館・別館で2棟あり、それぞれ4階建てで約600人のスタッフが所属しています。
**そうなんです、そこそこ広いんです。**
そして移動は基本、階段の使用を推奨しているため、別のフロアに行くときはできる限り
用事をまとめ、何度も行き来しなくて良いように工夫しています。


この度「画像を取り込んでAIを作る」ことを学んだ私は、
**「これを使えば、用事がある相手が今席にいるか確認できるアプリが作れる！！」**と思いつき
社内で意外と多い	<font color="Red">「無駄なウォーキング」</font>をなくすためにwebアプリを作ることにしました。

##「無駄なウォーキング」って何？
みんな無駄にフロアを往復したくないので、所謂【えらいひと】が今席に座っているのか、聞かれることがよくあります。
行動予定表を確認したり、事前にアポを取ることで解消される問題なのですが、アポを取るほどではない時に限って、お目当ての【えらいひと】は席にいないようです。
かと言って【えらいひと】に電話で「今席にいますか？」って聞きにくいものです。
あなたは、会議が終わるのを待ち伏せしたり、何度もオフィスを往復して無駄な時間を過ごした経験ありませんか？

##<結論>アプリはできたが、Node-REDとの連携が出来なかった
実装したかったのは
**①CodePenで制作したwebアプリで「着席」「離席」を判断する**
**②結果を共有のGoogleスプレッドシートもしくはLINEで確認できる**
という内容でした。

**◆使用ツール**
CodePen
Teachable Machine
Node-RED
Googleスプレッドシート

##「今、席にいますか？」アプリ
###①webアプリ側の動作
事前にTeachable Machineで着席・離席を学習させたAIをCodePenで推論しています。
※プロトタイプを社内で触ってみてもらった為、使い方などの説明書きが多くなっています。

<table><td><img src="https://i.gyazo.com/07f10334d08705f292a30760778f586d.gif"></td></table>


◆判定に変化があった時のみ、動作するようにループを組んであります。

```js
 let zenkai="";
  function loop() {
    // 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
    // 推論が完了次第 { } の中身を実行します
    
    classifier.classify(async (err, results) => {
            // 結果のresultsは配列ですが、先頭に中身があれば以下の処理を実行します
      if (results[0] && results[0].label !=zenkai)  {
        await axios.post('https://nodered-xxxxxxxxxx.herokuapp.com/receiver', results[0]);
        //コンソールとドキュメントで動作確認
        console.log(results[0].label); 
        document.getElementById("result").textContent = results[0].label;
      zenkai= results[0].label;
      }
      // 推論終了1秒後に自分の関数を実行（ループになる）
      setTimeout(loop, 1000);
     });
  }
  // 最初の繰り返し処理を実行
  loop();
}
```

###②Node-REDのフロー
Node-RED側のdebugノードで確認すると、判定結果が送られてきているのがわかります。
[![Image from Gyazo](https://i.gyazo.com/b27180050994c2a94ba2991ae7d758df.gif)](https://gyazo.com/b27180050994c2a94ba2991ae7d758df)

###実装出来なかったこと
送られてきた判定結果をGSheetノードを使ってスプレッドシートに送るようにしたかったのですが
どのようにノードを作成すればよいか解決策を探しきれませんでした。
![dekinakatta.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792185/a164c49e-465f-05d3-a855-ce51c435f322.png)


**CodePenで作成したアプリ**　https://codepen.io/koboriharuka/pen/poPQMKV
アプリは動くので、よかったら試してみてください。
（HTML/CSS/JSは混沌としています）
<p class="codepen" data-height="500" data-default-tab="html,result" data-slug-hash="poPQMKV" data-user="koboriharuka" 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/koboriharuka/pen/poPQMKV">
  試作０２.「今席にいるかを学習したAI」の推論</a> by koboriharuka (<a href="https://codepen.io/koboriharuka">@koboriharuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##制作を終えて
まずは、プログラムがわからなくても、見様見真似で自分でwebアプリが作れたことに感動しました。
社内でプロトタイプをお披露目したところ、毎日のように4階と1階を往復している人が食いついていたので完成させられなかったのが残念です。
もう少しでNode-REDとの連携ができそうなので、引き続き改修に取り組みます。

このアプリ制作を通じて、普段何気なく使っているもの全てが「もしかしてこれも何かプログラムで動いているのかな？」「このサイトのプログラムはどうなっているんだろう？」と興味を持つようになりました。
国語や算数と同じくらい、プログラムの教科が当たり前になった世界がもう始まっていると思うとわくわくしますね。


最後まで読んでいただいてありがとうございました。