LINE Bot さらに活用する場が広がった！TeachableMachineを使って

前回の記事では、初めてLINEBotを使って、DX初心者なりに作ったツールの便利さを感じたたことを紹介しました。それからLINEBotにハマりだしました。
初回の記事は以下からご覧になれます。
https://qiita.com/h21550/items/35ceb86bdb839e1e6983

今回、LINEで写真を撮るだけで薬の用法用量を教えてくれるLINEBotを作ることに挑戦しました。
作品はこちらです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">薬の用法用量を教えてくれるLINEBotの作成に挑戦しました！もちろん成功！ <a href="https://t.co/EA9DMG9OMr">pic.twitter.com/EA9DMG9OMr</a></p>&mdash; トミー (@h21550) <a href="https://twitter.com/h21550/status/1696143263340908927?ref_src=twsrc%5Etfw">August 28, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


なぜこれを作ろうと思ったかというと、わけがありました。
小売業で働いて、接客は常に伴うものです。高齢化社会なりの事情でお年を召されたお客様の割合も高くなってきています。年齢が重なることで体のあっちこっちに不都合が出てきます。
私は従業員であり、客としても自社の店を利用しています。アレルギー体質の関係で、皮膚や目、鼻にアレルギー反応が出て、ドラッグ売場で市販薬をよく買います。薬の箱に用法用量など書いてありますが、字が小さくて視力が悪い私に読みにくいものです。仲良しの薬剤師に言ったら、同じようなお客様の声が多かった、特に老眼で見えないとのお客様が多いと言っていました。これは自身の悩みでもありますし、職場の接客上の課題でもあります。
これを何とかできないかと考えました。誰でも持っているスマホで薬の写真を撮って、LINEにその写真を送って、用法用量を返してくれるLINEBotで解決できるではないかと思いました。

# 目次
[使用したツール](#使用したツール)
[各種ツール設定手順](#設定手順)
[完成](#完成)
[今後の展望](#今後の展望)

# 使用したツール
・TeachableMachine
・Node-red
・LINEBot

# 設定手順
### 1.TeachableMachineで画像の機械学習
Teachable MachineとはGoogleが提供する**無料のAI作成ツール**。**画像、音声、ポーズ**のパターンの機械学習ができます。
具体的なやり方はこちらの記事を参考にしました。
https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1
分かりやすい仕組みで失敗することはまずないので、やってみてください。
私の場合、class名を用法用量にしました。
例「一日一回、一回2錠」のように。

### 2.Node-red
**フローはこちらです**。
![スクリーンショット (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/d95f52de-0618-c651-d7a3-1cd9ecfac5e9.png)
各ノードの設定
**①webhook の Pathは「/webhook」にします。**
![MicrosoftTeams-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/19fcca16-c233-28cc-5c2b-f35bdd9c74c9.png)

**②http request** 
URLは下記を入力します。

    https://api-data.line.me/v2/bot/message/{{{line.event.message.id}}}/content

**種別**は使用する一般的な認証の名前が「Bearer認証」で、Line-DevelopersのMessaging API設定から、チャンネルアクセストークンをコピーして貼り付けます。
最後に出力形式はバイナリバッファを選択してLINE画像の送付準備は完了しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/877b9be7-9b44-0e89-6c47-179399759f7c.png)

**③Teachable Machine**
手順１の学習・設定済みのプロジェクトでコピーしたURLをここで使用します。
その他の項目は、下記画像の通り設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3519202/2b0cbc5a-0a9b-c8ec-448f-22e2d9b47da7.png)

**④templete**
テンプレートにこの一文「結果は「{{payload.0.class}}」です。」を貼り付けます。
![スクリーンショット (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/d5462fbe-274f-fe57-23f1-d9a12d7dc2cb.png)
**⑤Reply**
SecretはLINEのチャネルシークレットを貼り付け、
Access TokenはLINEのチャネルアクセストークンを貼り付けます。
![スクリーンショット (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/e6f8d1e3-b5b3-e003-114c-124e90ef3f17.png)
最後にデプロイボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/a5d0b100-1068-8314-8cfd-aebc782dc2a6.png)
ここまではこの通りに実施すれば、ほぼエラーが出ないです。

### 3.LINEの設定
いつも使っているLINEアカウントで構いません。
LINE Messaging APIのwebhook設定時、気を付ける必要があります。
使用しているノードのURLはクラウドの後ろに<font color="Red">「/webhook」を付ける必要があります。ここでしくじっていたので、非常に重要です。
例：https://team-ユーザー名-574c×××.flowforge.cloud/webhook

以上で設定完了です。

# 完成！
やってみますと、これです！
![Screenshot_20230828_202358_jp.naver.line.android.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/afb5d54d-d653-265b-2246-6ea4b455471f.jpeg)
ノードの設定は分かりやすいので、割と短時間で作ることができました。

# 今後の展望
今回は用法用量で設定しましたが、これから注意事項や成分などの情報を追加していけば、もっと便利になると思います。
お客様に使っていただく場面を想像するとワクワクします。

これからもDXに関するチャレンジを続けます。

お読みいただきありがとうございました。