この商品券使える？お釣りでる？を教えてください。

お客さまから「この商品券使えるの？」と聞かれても即答できない！
--------------------------

私は小売業の**困ったときの駆け込み寺**のような部署で勤務する者です。みなさんは親戚や友人から商品券をもらった時「**貰ったはいいけどどうやって使ったらいいんだろう？**」なんて経験ありませんか？お店では何万種類とある商品券を全て覚える事はできず、その都度マニュアルを探し**回収していいのか、お釣りを出していいのか**確認します。マニュアルにない商品券が来ることもあり、関係各所に確認をとりお客さまをお待たせすることもしばしば。「**暗記パンがあればいいな**」そんなパートさんの言葉を聞いて思い立ちました。

暗記パンを作ろう！
---------------
使用したツールは以下の通りです。
* Teachable Machine
* Node-RED
* Make
* LINE Developers

１，Teachable Machineに機械学習させる
--------------------------

Teachable Machineとはだれでも短時間で簡単に機械学習モデルを作成できるWEBベースのツールです。

[Teachable Machineサイトはこちらからどうぞ](https://teachablemachine.withgoogle.com/)

１-①TeachableMachineを起動後、Class1とClass2に判別したい物の名前を入力します。
**ウエブカメラ**を押すと撮影モードになるので、判別したいものを読み込ませます。

今回私は商品券金券の使用可否と釣銭有無を判別してくれるものを作りたかったので、Googleで検索した**見本文字入り**の商品券の画像をアップロードボタンから学習させようとしました。しかし全く判別してくれなかったため、自宅にあった現物の**イオン商品券**と**JCBギフト券**の2種類をウエブカメラでやり直ししました。~~**見本文字入り**を学習させたところで実際に回収するのは**見本文字入り**ではないのでダメですよね（汗）~~
後日聞いて発覚したことですが、ウエブカメラでは連続撮影で100枚程度撮影させたのと同じように、見本文字入りも何枚か撮影して学習させると良いそうです。ということは、手元に実物の商品券がなくても画像取り込みしたらどんなものでも学習させることができますね！


![tm.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472688/3f7a6b07-35f6-1dbd-6829-a233bf09fac3.jpeg)

１-②**トレーニング**ボタンをクリック。この時にページの移動をしないでひたすら待ちます。
トレーニングが終わるとプレビュー画面が開きます。🤐え！！顔映ってる・・・。ということになるのであらかじめ学習させたものをカメラの前に構えてください。

実際の動きはこちら👇

https://twitter.com/Q6EhmfU3ymXFRoC/status/1681185963513610240

傾けても判別してくれました。カメラはずっとON状態です。私のように顔を映し出されたくなければOFFしてください。🤐

１-③プレビュー画面の中にある**モデルをアップロード**をクリックしてWEBアプリを作ることができます。エクスポートが終わると**URL**が表示されるので**コピー**をクリックします。

![tmエクスポート２ (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472688/84479f5d-35d5-1b85-a8db-57c9dbb6b1da.jpeg)




２，Node-REDとTeachable Machineを連携させる
--------
**Node-RED**とはプログラミングがわからなくてもブラウザで動くプログラミングです。コードを書くよりも視覚的にわかるUIによってプログラムを書きます。これでWEBアプリを作る事ができます。


![node　やりなおし３.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472688/5932d577-cec4-05d8-73bd-87e2a8766548.jpeg)

:::note warn
はじめに追加が必要なノードが３つあります！
:::

追加方法は右上の**ハンバーガーマーク**から**パレットの管理**をクリック。**ノードを追加する**に
●node-red-contrib-teachable-machine
  ●node-red-contrib-browser-utils
  ●node-red-contrib-image-output
を追加しておきます。

２-①写真のように複数のノードをドラッグ＆ドロップしてつなげます。
２-②templateノードの中身のテンプレート箇所に　**{{Pay load,0,class}}**　だけ残して他の文字は消します。さらにプロパティのmsgの後に　**商品券金券**と入れて**完了**
２-③http requestノードの中身のURLには後ほど説明するMakeで設定したもの（３-②）をコピーします。その際、**商品券金券＝イオン**は自動でつけてくれるので消します。
２-④Pay loadの中身を**クエリパラメータに追加**に変えます。
２-⑤最後にデプロイをクリックするのですが、その前にMakeとLINE Developersを連携させます。（３-⑥）





３，MakeとLINE Developersを連携させる
--------------

![korekore.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472688/8db79237-0799-9d2c-33f0-dbf59c3f3ebb.jpeg)


:::note warn
モジュールは2つ準備します。
:::

●Webhooks(Custom webhook)
●LINE(Send a Push Notification)

３-①webhooksの**add名**を変えて**Ok**をクリックし**Copy address to clickboard**でコピーします。
３-②新しいタブを開き**コピーしたURL**を貼り付けて検索します。検索するときは貼り付けしたあとに　**商品券金券＝JCB**　または　**商品券金券＝イオン**　と入力してEnterを押します。成功したら**Accept**が出ます！！　このURLを先ほどのhttp requestノードの中身（２-③）に貼り付けます。

私は貼り付け後に、なぜか「/」スラッシュを入力してから**商品券金券＝イオン**といれていたためエラーが出ていました。何が悪いのかサッパリわからず、ここで時間を費やしていしまいました。

３-③LINEの**add名**を変えてMessageには**結果は　商品券金券　です**と入力します。
３-⑤**save**してから**Run once**を押します。
３-⑥さきほどのNode-REDのデプロイを押します。（２-⑤）

結果さあ！できたかな？
---------

![dekita.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472688/bb565d78-00a0-e1f4-41d7-a115f8cb24fd.jpeg)

LINE Notifyに通知が来ました。画像では何度もいじくりまわしたので肝心の使用可否部分が抜けてしまっていますが無事に通知が来てホッとしました。

おわりに
--------
今回は手元にあったイオン商品券とJCBギフト券の2種類しかしていません。世の中にはたくさんの商品券金券が出回っていますので、当社で扱う種類をできるだけ多く登録していけばお客さまをお待たせすることもなくなり、担当者も迷うことなく自信をもってお答えできるとおもいました。

ただ色々システム制御されている社内のスマホで実践して使えるのだろうか？一番の理想は社内スマホにLINEをインストールして撮影したら即返信が来る！なんていう夢が膨らむばかりです。

こちらの動画を参考にさせていただきました。

https://www.youtube.com/watch?v=elTc1JrCoi0