トレカの発売日を一瞬で知りたい！教えてTeachable Machine！

こんにちは！スーパーの店員をしています。
業務上の困りごとを、アナログでもデジタルでもなんでもいいから解消したい！と思っている今日この頃です。
今回は、**レジ応対時に訪れる「困った」を解消するべく**、<font color="red">**画像認識モデルが作れる「Teachable Machine」で業務改善に挑戦**</font>しました✨




## 困りごと：トレーディングカードゲーム　種類が多過ぎて管理できない
<details><summary>トレーディングカードゲームとは...❔</summary>
「ポケモンカード」「遊戯王オフィシャルカードゲーム」「デュエル・マスターズ」「マジック：ザ・ギャザリング」などが有名な対戦型のカードゲーム。

カードのデザインも美しいものが多く、コレクションして楽しむ人も多い。
コロナ禍でより人気の高まったコンテンツ。

詳しくはこちらをどうぞ！

https://www.weblio.jp/content/%E3%83%88%E3%83%AC%E3%82%AB/

</details>



:::note warn

**困っていること①　
カードの種類が多過ぎて、把握しきれない。
<font color="red">どのカードがいくつ・どこに在庫があるかすぐに分からない！</font>**

:::
👉在庫をデータ上で確認できるシステムはすでに存在し、職場でも利用しているので差し迫った課題ではない。
（システムの立ち上がりが遅いという声が職場では大変多く、Power Automateなどを用いてゆくゆくは改善したいところです...）

:::note warn

**困っていること②　
毎月コンスタントに新商品がでるトレカ。
お客さまの<font color="red">「一番新しい商品はどれですか？」「このカードはいつ発売されましたか？」という質問</font>にすぐに答えられない！**

:::


👉カードの発売日を聞くお客さまは、孫や子供に「一番新しいやつ買ってきて！！」と頼まれたパターンが多く、商品に詳しくない場合がほとんどです。
店員としても絶対に間違えてはならない！と責任重大で震えます。
また、現状お客さまの問いにお答えするには、**その都度ググるしか手がありません**...
<font color=blue>今回はこの問題を早急に解決したい</font>✨

## 完成品


https://twitter.com/chan_kksr1525/status/1529366682057117696?s=27&t=tYQAXAEVfMr_v59FfijLLQ

上記の動画のように、Node-RED-Desktopのcaremaノードを押すと、**Teachable Machineに取り込んだたくさんの画像の中から、カメラに映ったアイテムとより近いものを選んで回答**してくれます。
また、**LINE Botと繋げることで、商品名と発売日がLINE Botで返ってきます！**

## 使用したツール
・[Teachable Machine](https://teachablemachine.withgoogle.com/)
・[Make](https://www.make.com/en/login)
・[Node-RED-Desktop](https://sakazuki.github.io/node-red-desktop/ja/)

## 作成手順
<details><summary>Teachable Machineで画像認識モデルをつくる</summary>

![スクリーンショット (132).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/25cc8178-a22c-c6f5-2e50-fa6511472449.png)
![スクリーンショット (128).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/484a46e2-2d0a-05fe-58d8-67adb313a312.png)
![スクリーンショット (131).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/87bc4bc1-d5cb-9bdd-21d6-26d57a80f236.png)

</details>

<details><summary>MakeでLINE Botをつくる</summary>

この２つのモジュールを使います。
![スクリーンショット (140).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/0d334536-0e04-0a73-24af-741428d0a330.png)
![スクリーンショット (147).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/c5d4ce5b-bc4b-ff65-6edd-51028ef8492a.png)
![スクリーンショット (148).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/4383dbbc-5d32-1177-1813-f0ae05571e99.png)
![スクリーンショット (149).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/24e942ea-5da0-a4e3-0796-7caa4be3f5b8.png)


</details>

<details><summary>Node-RED-Desktopで組み合わせる</summary>

これがNodeの完成形です。
![スクリーンショット (144).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/3d43a91d-eb51-f6c3-eeb6-1cae2e09c061.png)
「Teachable Machine」ノードは元々のパレットに入っていないので、パレットの管理から追加してください。
![スクリーンショット (145).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/5c237c98-69ce-9dfb-fcb8-8a52acafbdb2.png)
![スクリーンショット (146).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/3216eedc-451b-b9e3-1aff-8c3e47635b24.png)
「camera」ノードの左横を押すと、カメラが立ち上がり画像認識を行います。
![スクリーンショット (139).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2620147/680bdcd0-1531-6874-e53a-583be6698220.png)

</details>

## CodePen使用Ver.も作ってみた
職場でこのシステムを使うにあたり、<font color=blue>LINE Botを使わずもっと直接的に返答を得られないか</font>ということでCodePenにて実装してみました！
下の動画は、[CodePen](https://codepen.io)とTeachable Machineにてスマホカメラで発売日を判定したものです。


https://twitter.com/chan_kksr1525/status/1527208068294975488?s=27&t=8UtTn3lzvq7EXX07cTo6kg

試してみたい方は下記URLをどうぞ！
（プロトタイプのため、ポケモンカード数種類のみの登録となっています💦）

https://codepen.io/chi-14/pen/ExQmVmP



## 作ってみて
Teachable Machineを使うことで、思ったより簡単に画像認証を行えて驚きました！Teachable Machineは音声認識もできるそうで、様々な組み合わせや可能性が広がりこれからの活用が楽しみです🎵
次は音声認識を用いたプロトタイプを作成したいです！
最後までご覧いただきましてありがとうございました😊