お客さまから「この商品券使えるの？」と聞かれても即答できない！
私は小売業の困ったときの駆け込み寺のような部署で勤務する者です。みなさんは親戚や友人から商品券をもらった時「貰ったはいいけどどうやって使ったらいいんだろう？」なんて経験ありませんか？お店では何万種類とある商品券を全て覚える事はできず、その都度マニュアルを探し回収していいのか、お釣りを出していいのか確認します。マニュアルにない商品券が来ることもあり、関係各所に確認をとりお客さまをお待たせすることもしばしば。「暗記パンがあればいいな」そんなパートさんの言葉を聞いて思い立ちました。
暗記パンを作ろう！
使用したツールは以下の通りです。
- Teachable Machine
- Node-RED
- Make
- LINE Developers
１，Teachable Machineに機械学習させる
Teachable Machineとはだれでも短時間で簡単に機械学習モデルを作成できるWEBベースのツールです。
１-①TeachableMachineを起動後、Class1とClass2に判別したい物の名前を入力します。
ウエブカメラを押すと撮影モードになるので、判別したいものを読み込ませます。
今回私は商品券金券の使用可否と釣銭有無を判別してくれるものを作りたかったので、Googleで検索した見本文字入りの商品券の画像をアップロードボタンから学習させようとしました。しかし全く判別してくれなかったため、自宅にあった現物のイオン商品券とJCBギフト券の2種類をウエブカメラでやり直ししました。見本文字入りを学習させたところで実際に回収するのは見本文字入りではないのでダメですよね（汗）
後日聞いて発覚したことですが、ウエブカメラでは連続撮影で100枚程度撮影させたのと同じように、見本文字入りも何枚か撮影して学習させると良いそうです。ということは、手元に実物の商品券がなくても画像取り込みしたらどんなものでも学習させることができますね！
１-②トレーニングボタンをクリック。この時にページの移動をしないでひたすら待ちます。
トレーニングが終わるとプレビュー画面が開きます。🤐え！！顔映ってる・・・。ということになるのであらかじめ学習させたものをカメラの前に構えてください。
実際の動きはこちら👇
傾けても判別してくれました。カメラはずっとON状態です。私のように顔を映し出されたくなければOFFしてください。🤐
１-③プレビュー画面の中にあるモデルをアップロードをクリックしてWEBアプリを作ることができます。エクスポートが終わるとURLが表示されるのでコピーをクリックします。
２，Node-REDとTeachable Machineを連携させる
Node-REDとはプログラミングがわからなくてもブラウザで動くプログラミングです。コードを書くよりも視覚的にわかるUIによってプログラムを書きます。これでWEBアプリを作る事ができます。
はじめに追加が必要なノードが３つあります！
追加方法は右上のハンバーガーマークからパレットの管理をクリック。ノードを追加するに
●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を連携させる
モジュールは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のデプロイを押します。（２-⑤）
結果さあ！できたかな？
LINE Notifyに通知が来ました。画像では何度もいじくりまわしたので肝心の使用可否部分が抜けてしまっていますが無事に通知が来てホッとしました。
おわりに
今回は手元にあったイオン商品券とJCBギフト券の2種類しかしていません。世の中にはたくさんの商品券金券が出回っていますので、当社で扱う種類をできるだけ多く登録していけばお客さまをお待たせすることもなくなり、担当者も迷うことなく自信をもってお答えできるとおもいました。
ただ色々システム制御されている社内のスマホで実践して使えるのだろうか？一番の理想は社内スマホにLINEをインストールして撮影したら即返信が来る！なんていう夢が膨らむばかりです。
こちらの動画を参考にさせていただきました。