[初心者]お客様の探し物は手話で解決！

---

---

2度目の投稿です！
食品スーパーに勤めて3年目、私は日用品を担当しています。
今回も、私の経験談から「あの時これがあればよかったのに…」という思いから作成してみました。
## 過去こんなことがありました


ある日、聴覚障害のお客様がいらっしゃいました。お客様は身振り手振り何か伝えようとしています。そう、__手話__ です。

いやごめんなさいわからない…。他に会話できる方法がないか考えました。まずはメモでと思って書いてもらったらなかなか癖のある字で読めない…。次にスマートフォンで文字を打ってもらおうと思ったけれど、操作方法がわからなくて断念。

せめてこちらがお客様がどんな商品が欲しいのかわかればよかったのですが、なかなかお客様が欲しい商品を見つけられず、最終的には分からずお客様は何も買わず帰られました。

今度こんなことがあったら大変だ！
何か方法はないのか…。

## どんな方法で手話がわかるようになるか

手話は確かに調べればわかりますが、素人の私には探すのも大変。何か手話の翻訳機があれば簡単です。

そこで！今回は __Teahable Machine__ を使用します！なんと、手話の動きを覚えさせれば、その手話の翻訳が可能になるのです！

**手話はこちらを参考にさせていただきました**
* 手話CG単語検索サイト（NHK）

https://www.nhk.or.jp/handsign/searchJSL/


## 使用するツール
使用するのは、下記の3つです。

:::note info
1.[Teachable Machine](https://teachablemachine.withgoogle.com/)（画像の読み込み）
2.[Node-RED](https://flowfuse.com/)
3.[LINE](https://developers.line.biz/ja/)
:::


[リンクテキスト](URL "タイトル")



## まず完成動画はこちら
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手話をTeachable Machineで動画判断！見にくいですが、Teachable Machineの下の表示が変化しています。<br>100％テッシュペーパーで成功！ <a href="https://t.co/IxkhZQ5rFa">pic.twitter.com/IxkhZQ5rFa</a></p>&mdash; yuma.tmg (@inueym56) <a href="https://twitter.com/inueym56/status/1710345677681967615?ref_src=twsrc%5Etfw">October 6, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 __御覧の通り__ 、Node-REDの動画です。
ということはそうです。上手くいきませんでした。
とりあえずTeachable Machineで手話を動画判断できるところまではいきましたので、そちらを説明いたします。

## Teachable Machineでは
![スクリーンショット 2023-10-06 055732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545254/755b2a20-604d-5d95-5c2b-e2bc3acbb3e0.png)
1.まずは一番左の「画像プロジェクト」から入ります。



__ここで注意！__  
長押しで画像を読み込む設定に最初なっていますが、手話は両手を使うので長押しなんてできません。そんな時は設定に注意してください。
![スクリーンショット 2023-10-06 203246.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545254/3eddfa47-c112-87fc-eab9-5c71bf01a983.png)
このように時間設定できるようになっています。読み込む画像の枚数100以上が好ましいので、__6秒間とれるようにしておけば100枚は超えました！__

2.「標準の画像モデル」を選択します。
３.クラスを変更してください（今から撮る画像にあったタイトルにする方がわかりやすいです）。
4.「設定」で長押しを解除して待機時間をおくように設定します。
5．「ウェブカメラ」で画像を撮る
6.画像を読み込んだらトレーニングで「モデルをトレーニングする」を選択します。
7.プレビューで動作を確認。OKだったら「モデルをエクスポートする」を選択します。
8.マークはアップロードのままで（もう片方はダウンロードとあります）「モデルアップロード」を選択し。共有可能なリンクはコピーしましょう。

## Node-REDでは

![スクリーンショット 2023-10-07 031428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545254/798fec2d-b889-46fc-a710-a78e2a21dd47.png)
使うノードは5つです。




__2.Teachable Machine__
ここのURLはTeachable Machineの手順8の、共有可能なリンクを入力します。
__4.template__
テンプレートの中を修正します。{{payload.0.class}}にはTeachable Machineの手順3のクラスの名前が入ります。表示される例としてはこんなものもあります。例：結果は「{{payload.0.class}}」です!
あとは __camera__ の左のボタンをおして、カメラに向かって手話をして、結果を判断してもらうことになります！


## 失敗したNode-RED
![スクリーンショット 2023-10-07 031449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3545254/2c3170b3-d619-23c8-3d22-7f789eadf4b6.png)

**Node-REDの方はこちらを参考にしました**
* 手話CG単語検索サイト（NHKさんで手話の表現をCGで表しています）

https://qiita.com/h21550/items/3674caeb7531183021be

LINEのWebhookのリンクですが、私の場合URLがteamからでなく違う単語からはじまっていました。そこが違う点ですが修正できませんでした。わかり次第追記していきたいと思います。


これで作業は終了です！



## 最後に

__反省点__
本当は、相手の動きを読み取れるだけではなく、こちらが言いたいことを打ち込めば手話の映像が流れる等やってみたかったです。スマホだと画面が小さく、目が悪い方には見にくい方もいらっしゃいます。そんな方にも会話が通じるように今度は挑戦してみたいです。
また、シンプルすぎて味気ないので、例えば「洗剤」と答えが来たらGoogleスプレッドシートに保存していた洗剤の画像が紹介される、みたいな流れも面白いかもしれません。
そもそもNode-REDから修正していきます。

今回も最後までありがとうございました！
少しでも皆さんのお悩み解決のきっかけになりますように！