【無駄遣いゼロ】海外ショッピングを楽しもう！LINEに商品写真を送って値段をCheck！

## 開発奮闘記 その２
前回、”タイの魅力を発信する”というテーマのもと、[**１週間LINE Bot製作**](https://qiita.com/rsaaa269/items/34474da03c5299a66a68)に挑戦しました。
今回はそんなタイお役立ち情報発信のための**開発奮闘記第２弾**です。

タイに来て困ったこと、それは買い物中 ”陳列棚に書かれている商品名がタイ語のみで分かりづらい” こと。
そもそも値札が無かったり、陳列されている商品と値札に書かれている商品が一致していなかったりして、
会計の時に思っていた値段と違うなんていうことが結構な頻度で起こります。

旅行者はもちろん、タイ在住者であってもとても不便に思います。
というわけで、今回はこの困りごとを解消すべく、[**Teachable Machine**](https://teachablemachine.withgoogle.com/train)を使用した開発に挑戦しました。

## 完成品
”写真で判別できれば、いちいち店員さんに聞かないでも済むのに”
そんな思いから、LINEで写真を送ったら商品名（英語）と値段を返してくれるLINE Botを作製してみました。
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Teachable Machne<br>Product price<a href="https://twitter.com/hashtag/teachablemachine?src=hash&amp;ref_src=twsrc%5Etfw">#teachablemachine</a> <a href="https://twitter.com/hashtag/linebot?src=hash&amp;ref_src=twsrc%5Etfw">#linebot</a> <a href="https://t.co/L1ztZPQYdL">pic.twitter.com/L1ztZPQYdL</a></p>&mdash; Risa (@ris_aaa26) <a href="https://twitter.com/ris_aaa26/status/1571055555594293250?ref_src=twsrc%5Etfw">September 17, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 手順
- **使用ツール**
    - LINE Deveropers
    - Teachable Machine
    - Node-RED <font color='#b22222'>**(enebularを利用)**</font>

**① LINE Botの設定**
　※[こちら](https://zenn.dev/protoout/articles/16-line-bot-setup)の記事を参考にLINE Developersに登録し、LINE公式アカウントの作成、
　　 Botにするための設定は済ませておきます。

<font color='#2f4f4f'><INS>**LINE BotのWebhookのURLを設定する**</INS></font>
まず、Node-REDのURLを取得します。
赤丸の部分にカーソルを合わせるとURLが表示されるので、コピーします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/79a8d039-d90a-2f23-defe-38e7f3856f62.png" width=70%>

:::note warn
**重要ポイント**
Node-REDは<INS>enebularを使用</INS>し、URLを取得します。
ローカル環境からURLを取得しても自分のPCからのアクセスしかできず、
LINE BotとNode-REDとの連携ができません。
:::

次にLINE DevelopersのWebhook設定のページに戻り、コピーしたURLを貼り付けます。
この際、末尾に `linebot` と追記して保存、Webhookの利用をオンにしましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/6dbcac65-b3fa-ff92-c7c3-c17ae8170a67.png" width=70%>
<font color='#b22222'>**××失敗談××**</font>
わたしはローカル環境のURLをそのまま貼り付けていました。
”有効なHTTPS URLを入力してください”の警告が消えず、何時間も費やすことに…。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/f9c3e237-aaa8-e7c8-abdd-2074df959cbd.png" width=70%>

**② Teachable Machineの設定**
　今回はPCのカメラを使用してサンプリングをするので、それぞれの商品を手元に用意しておきます。

<font color='#2f4f4f'><INS>**商品のサンプリング**</INS></font>
商品名と値段を入力し、Webcamボタンからサンプリングする商品を100〜200枚ほど撮影します。
全ての商品のサンプリングが終わったらトレーニングボタンを押して、学習させます。
今回はタイのセブンイレブンで販売されている５つの商品をサンプリングしました。(2022年9月17日 現在)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/b2215360-3fc0-b1b9-3f2e-7f8da83006be.png" width=70%>

<font color='#2f4f4f'><INS>**動作確認**</INS></font>
とても正確に判別しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/27dbe048-52f4-637f-943c-8122af0a6186.jpeg" width=70%>
<font size='+2'>**③ Node-RED でフローを作製**</font>

:::note
① LINE Botの設定 でも触れましたが、Node-REDのフロー製作は、<INS>**enebularを利用**</INS>します。
:::
<font color='#2f4f4f'><INS>**フロー全体図**</INS></font>
LINEで写真を送ったら該当商品の名前と料金が返ってくるフローの作製をしました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/111add20-ceab-cbbb-cb5f-3625cec8b6d1.png" width=90%>
各ノードの設定は以下のサイトを参考にしました。

https://atlabo-handson-08.netlify.app/#2

手順３−９のみ、コードを貼り付け後に文章の中身を変更しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/b42a67b8-5ccd-b79a-0d2a-5575d44dc2d1.png" width=70%>
<font color='#2f4f4f'><INS>**動作確認**</INS></font>
LINEに写真を送信して動作を確認します。
こちらも正確に判別しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2806390/8512d72b-ab96-09c9-8b82-8dbe6e2522b5.jpeg" width=60%>

以上、実装手順でした。

<font color='#b22222'>**××反省点××**</font>
Node-REDでの実装がうまくいき、LINEの動作がイメージ通りにいったときはとても嬉しかったです。
ただ、完成したは良いものの、実用化は難しいということに気づきました。
今回は各商品を自分で選んで購入してからサンプリングや動作確認のための写真撮影をしましたが、
”支払い前に商品の値段を知る”という本来の目的は、店頭での商品の撮影が許されるという環境が少ないため達成されません。
写真判定以外の別の案か、個人の撮影にならないような方法を考える必要がありそうです。



## あとがき
今回の挑戦では目的が達成できず反省点が多く残りましたが、
Teachable Machineを使用してみて、AIの様々な可能性を感じることができました。

”音声判定をつかったら、英語やタイ語で行われる会議の議事録作成が楽になるんじゃないか？”
”目元や顔の表情の画像サンプルを集めて疲労レベルを判定、倒れる前にお知らせする機能をつくれなか？”
”画像判定でデスクを撮影、高評価の人に景品をプレゼントすれば、綺麗なオフィスを維持できるのでは？”

などなど、日頃の業務や困りごとの解決にも役立てるのではないかと感じました。
AIに少し触れた程度でまだまだ知識は足りませんが、今回感じたこと、学んだことをわたしひとりに留めず、
職場のAIに詳しい人に相談をしたり、同僚と共有をして業務改善に取り組んでいきたいと思います。


また、今回浮かび上がった他のアイディアをnoteでも少し取り上げてみたので、
こちらも読んでいただけると嬉しいです。

https://note.com/risa_yamada/n/n10e65b6b0dff


ご覧いただき、ありがとうございました。