[Teachable Machine ]をつかってお客様へ安全・安心を提供します！

**みなさんこんにちは！**

最近は暑さが和らぎ過ごしやすくなってきておりますね！
小売業に勤めている私は商品展開を夏の焼き肉需要から
冬の鍋需要に変更しております。
そんな時毎回悩まされる事例が・・・
# 輸入牛肉が英語表記で中身わからない問題
![IMG_3227.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/4bdb12b7-e8da-b6a1-305d-1f99b8b789d4.jpeg)
店舗入荷時はこのような形状で英語だらけの箱で入荷されます。
今回はこの原料のラベルをTeachable Machineを活用して「産地」「部位」「用途」を表示して
商品事故を未然に防ぐ識別認証を作成します。

# 完成形 #


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ラベル識別認証テスト。<a href="https://twitter.com/hashtag/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#チャレンジャーズ</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/%E8%AD%98%E5%88%A5%E8%AA%8D%E8%A8%BC?src=hash&amp;ref_src=twsrc%5Etfw">#識別認証</a><a href="https://twitter.com/hashtag/%E3%82%88%E3%81%86%E3%82%84%E3%81%8F%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7?src=hash&amp;ref_src=twsrc%5Etfw">#ようやくここまで</a> <a href="https://t.co/ZYz3TVB77f">pic.twitter.com/ZYz3TVB77f</a></p>&mdash; 齋藤正則 (@pmawjmng) <a href="https://twitter.com/pmawjmng/status/1709815507879440656?ref_src=twsrc%5Etfw">October 5, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# Teachable Machineの設定

### まずは機械学習
参考記事
[Teachable Machineの使い方](https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1"Qiita)
![IMG_3243.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/b48d6bd5-1620-fef3-9240-0bdd52dcf385.jpeg)
こちらの4種類のラベルを用意（英語がびっしり💦）
![2023-10-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/985b4619-f7f6-4cb1-5a70-b3615a756756.png)
Teachable Machineの「新しいプロジェクト」から「画像プロジェクト」を選択。
![2023-09-30 (5) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/f36964fb-c915-11e2-0c38-4f0b6afe2c83.png)
4種類のラベルを100枚程度動かしながら読み込んでいく。
👀nameに「産地」「部位」「用途」を書き込むことで具体的になる。（50文字入力可能）
![2023-09-30 (9) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/55139f55-973b-33f3-8f0d-93f2308dcce5.png)
「トレーニング」を実行してＰＣのカメラにラベルをかざすとプレビューの値が変化する。
（立体物ではなく、紙媒体なのに100％認証するのは驚き。）
![2023-09-30 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/a5418fb0-0a02-d83b-cc34-fb99857896a3.png)

:::note info
「モデルをエクスポートする」を実行して
「モデルのアップデート」クリック。
「共有可能なリンク」のURLをコピーしておきます。
:::

### 1、アップロード 
### 2、クラウドモデルを更新するを実行して
### 3、共有可能なリンクをコピーしておきましょう
# Node-Redの設定
![2023-09-30 (2) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/d6dc1304-24de-218d-83ec-5ace255a6edf.png)
## ノード説明
### 1、camra・・画像を取り込む
### 2、teachable machine・・先ほどコピーしたURLを貼り付ける。※完了ボタンを忘れずに！
![2023-09-30 (12) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/9b7ae9eb-a821-41d6-3327-3be2ce9ce9e4.png)
### 3、image preview・・取り込んだ画像が映ります。
### 4、template・・・返信されるコメントの冒頭と語尾が反映される
![2023-09-30 (13) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/3d3d93b8-0383-5f08-4f16-4de38ee5ddd5.png)
テンプレートは
***結果は「{{payload.0.class}}」です!***
を使って下さい。
# ここまでの動作確認 #
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">輸入牛肉識別判定①<a href="https://twitter.com/hashtag/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#チャレンジャーズ</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a><a href="https://twitter.com/hashtag/%E8%AD%98%E5%88%A5%E5%88%A4%E5%AE%9A?src=hash&amp;ref_src=twsrc%5Etfw">#識別判定</a> <a href="https://t.co/syrFH6vN7k">pic.twitter.com/syrFH6vN7k</a></p>&mdash; 齋藤正則 (@pmawjmng) <a href="https://twitter.com/pmawjmng/status/1708043549890265518?ref_src=twsrc%5Etfw">September 30, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# LINEBotにつなげてスマートフォンで閲覧できるようにする #
ここからは参考記事を確認しながら進めていきました。
<参考記事＞
[LINE Bot さらに活用する場が広がった！TeachableMachineを使って](https://qiita.com/h21550/items/3674caeb7531183021be)
### フローはこれ ###
![2023-10-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/3046ae24-b7f9-4681-4587-a9aa7387730f.png)

追加したノード 1 
[http request]
プロパティは記載の通り。
URLはhttps://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content
Copy & Pasteしてください。
トークンは
    「LINE DevelopersのMessaging　API設定のチャネルアクセストークン」をCopy & Pasteしてください。

![2023-10-05 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/6f5c8d04-b212-2b18-68ad-1037047972b6.png)
追加したノード 2
[template]
プロパティは記載の通り。
テンプレートは
***結果は「{{payload.0.class}}」です!***

:::note info
Node-Redの設定完了したら必ず画面右上の「デプロイ」をクリックしましょう。
![2023-10-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/28f7779c-1cc5-1d5a-d2c1-70cc970e82be.png)
:::
:::note warn
ここまでの注意事項
 1、フローを複数開いていたり、複数タブで開いていたりすると、LINEDevelopersとの通信がうまくいかないことがあるので、フローはひとつだけ、扱うタブもひとつだけにした方が無難です。
2、読み込む画像は背景がシンプルな方が取り込み易いので撮影時は背景を気をつけましょう。
3、LINE Messaging APIのwebhook設定時、使用しているノードのURLはクラウドの後ろに「/webhook」を付ける必要があります。ここでしくじっていたので、非常に重要です。
例：https://team-ユーザー名-574c×××.flowforge.cloud/webhook
:::
# 最後に #
今回は初心者ながらTeachable MachinとLINEBotを用いて識別判定製作しました。これをつかって商品の産地や部位間違いを未然に防ぐことができ、お客様に迷惑をかけず安心してお買い物ができると思います。製作にあたり参考記事を見ながら自分の「こうしたい」を形にできて安心してます。
最後までご覧いただきありがとうございました。

:::note info
＜過去の記事＞
[🔰デジタル初心者がChat GPTとLINEBotをつなげて電子辞書として使ってみた件✏](https://qiita.com/apemasakun0917/items/6812e0ef9af7652c8215)
:::