回答スピードアップ！写真を撮ったらその商品券が使用できるかAIでチェックできちゃう！

# AIってなんじゃ？
こんにちは。AIという言葉をよく聞くけどいまいち理解していないまま今日に至ったOLです。
調べてみると`人間の知能をコンピュータによって再現する技術のこと`なんだそうで…ふ～ん。


# 仕事で活用出来たら便利！
私は商業施設の運営管理という仕事をしてるため、よくお客さまやショップスタッフさまから「〇〇色の〇〇って書いてある商品券使えますか？」等と問い合わせがあるのですが、回答までお時間を頂いてしまうこともしばしば…

ショップスタッフさまから「早く教えて！」と言われると申し訳ない気持ち＆大焦り。しかも自分の作業が止まってしまう！

**質問してこないで～（心の叫び）**

じゃあショップスタッフさまから問い合わせが来ないようにする＆事務所スタッフがすぐ確認できる状態にしちゃえ！ということで、最近教わった「Teachable Machine」を使用して商品券を写真で撮ったら使用できるか否かをその場で確認できるツールを作りたいと思います。

# 使用ツール
[Teachable Machine](https://teachablemachine.withgoogle.com/)
Node-RED
[Make](https://eu2.make.com/6810/team/dashboard)
[LINE](https://developers.line.biz/ja/)

# 作成方法について
**Teachable Machin**
商品券の写真を送ったら、その商品券が使用できるものなのか判断できるように
商品券のデザインを学習させます。
![teach2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/5ac17012-f02e-e8b0-cdef-5a54046192bc.png)

それぞれタイトルの欄に記憶させるものの名称(今回は商品券の名称)を入力し、ウェブカメラから画像サンプルを学習させます。

:::note warn
色々な角度で撮影し学習させること！
:::
![teach3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/ee80e52d-5664-4f60-e59e-5cbdc87be65a.png)
今回は2種類の商品券を学習させました。

それぞれ学習させたら、`トレーニング `を選択し、そのままの画面で処理が終わるまで待ち、完了したら`モデルをエクスポートする`、` モデルをアップロード `を選択。アップロードが完了したら` 共有可能なリンク `にURLが表示されるのでメモしておく！
![teach4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/e23739e3-3c05-813e-e423-058e41b20013.png)

:::note warn
URLは後ほど使うのでメモを忘れないこと！
:::

**Node-RED**
Node-REDはプログラミングが分からなくてもプログラミングを作成できるもので、それぞれの機能がアイコンで表示されるため分かりやすくなっています。

**全体図**
![kouseizu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/a05606b1-e4cc-86f0-a416-90b4944156ff.png)
Node-REDに下記3つのノード(＝機能)を追加します。

**node-red-contrib-teachable-machine**
teachable-machineで学習させた内容を使用するための機能
**node-red-contrib-browser-utils**
PCで撮った写真を読み込んでくれる機能
**node-red-contrib-image-output**
読み込んだ写真をNode-RED上に表示してくれる機能

画面右上の3本線からパレットの管理を選択。
![パレット管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/97cb7ff6-13f2-3652-ce2d-19c2d4c03828.png)

「ノードを追加」を選択し、追加したいノードを検索して追加する。
![パレット管理2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/4dce9676-3c07-b5fe-0d33-1b517e1626d4.png)
`Teachable Machine`をダブルクリックして、URL欄にTeachable Machineを作成した際にメモしたURLを貼り付け。
![NodeRed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/778a8be7-2812-3719-c295-efd89e7437ef.png)


![NodeRed２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/f09cee0b-4d62-73b3-963e-6cc5134d5bb8.png)
「image preview」のボタンを押すと写真が撮れて使用できる商品券か判断してくれるようになります。
※カメラが正常に作動せず動作確認ができませんでした…涙

**Make**
**全体図**
![コメント 2023-07-19 054934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/7672cd21-8ab8-4a30-cfee-ec48363f3ef1.png)

`Custom Webhooks`と`LINE Send a Push Message`を追加

**Webhooks**
![Webhooks3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/457ffb3b-221e-53fe-9841-1a610b191546.png)
青字のURL部をコピーし、chromeの新規ページへ貼り付け、URLの最後に**syouhinnken=JCB使用可能**と入力してエンターキーを押す。
![グーグル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/bf0118c7-e904-d133-a799-30f8b7ef2527.png)
上記画像のように表示されたことを確認！

そろそろ頭がパンクしそうです…私がコンピューターだったら頭から煙が出ていることでしょう…

LINE
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/030753b0-2a8f-9111-20dc-b080bee1649d.png)
Toの欄にLINE Developersから確認した`ユーザーID`を入力、Messageの欄には`「この商品は１．商品券」`を入力。

![LINE2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/afd89987-4e1e-4dbb-2e9f-e4135538b334.png)
頭がパンクしました。

# できた…のか？できてません
できた！と言いたいところですが、Node-REDでの作業の段階でカメラが作動していないため動作確認まで至りませんでした。

成功していれば ↓ のような通知が来ていたはず！
![image0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3474647/9c18ea53-0b93-17d2-0e7b-c8f61b2f4feb.jpeg)
心半ば…悔しい…
同じようなトラブルが起きた方、解決方法がわかるよ！という方がおられましたらぜひコメントで教えてください。

# 反省と今後
Node-REDでカメラが作動しない理由が分からず、その後の作業に支障が出てしまった…
仮にカメラが作動していたとしてもスマホだけで完結していないため、手軽さに欠けている…

ショップさまで使用されているタブレットで商品券の写真を撮る→使用可否がその場ですぐ分かる！という流れが理想なのでまだまだ修正が必要です。

今回、作成する中で躓いてしまう部分も多くありましたが、Teachable Machineを活用すれば画像認識や音声認識のシステムを自分でも扱うことができるのか！と驚きが強かったです！

頭から煙が出そうだけどまた新しいデジタルツールを(少しだけ)使えるようになった…！わくわく