相手は何を伝えたい！？手話の入門にぴったりなLINE Botをつくりました！

![ACTUAL DESIGN - This is what we publish!.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/dc8923c8-5757-76e1-0b50-f82dd413ecf9.png)

## 手話ってむずかしそう！
`手話と聞いてみなさんはどんなイメージをもっているでしょうか？`私はテレビで見るたびに<font color="Red">「複雑だし、めっちゃ早い！」</font>と思って見ており、筆談という手段もあるけどお互いに文字を書くのもけっこう時間がかかるかも…と思いました。今の世の中だとスマホに文字を打ち込んで相手に見せる！というのが手っ取り早いのかもしれませんが、もし手話を使うことになるとしたら、とても慣れた方と初心者の両極端に分かれているのではないかなと想像し、そこで手話の入門として手話の表現を瞬時に文字にできたら手話の入門にぴったりで練習にもなると思い、今回のLINE Botを作ってみました！これから手話を使われる方は便利だと思うのでぜひゆっくり見ていってください～。

## 実際にカメラの前で手話をしてみると…

![Yellow Illustration Simple International Mother Language Day Instagram Post.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/6d0c1024-31ee-fc15-7ef6-ed4a7c9b24b7.jpeg)

:camera::raised_hand::smile:　ありがとう！の手話表現➡:iphone::speech_balloon:「ありがとう！」

https://twitter.com/BonVoyagi1999/status/1681658956375027712

## 使用ツールと参考にさせていただいたサイト
:::note info
1.Teachable Machine（画像認識の元となる画像の取り込みを行ないます）
2.Node-RED（画像認識の仕組みを作れます）
3.Make（旧Integromat。アプリを連携できるノーコードツールです）
4.LINE Developers（LINEとサービスの連携ができます）
:::

**参考にさせていただいたもの**
* 手話CG単語検索サイト（NHKさんで手話の表現をCGで表しています）

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

* 手話を覚えてみよう！（阿賀野市にある日常会話で使える手話を紹介するイラスト）

https://www.city.agano.niigata.jp/soshiki/shakaifukushika/shogaishafukushi/1/3043.html

## 使い方はカンタン♪
カメラに向かって手話を表現すると、LINE Botがどういう気持ちを表しているのかを教えてくれる仕組みになっています。

![Yellow Illustration Simple International Mother Language Day Instagram Post.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/59b6b31d-f9fb-1cf0-160e-16c7ee5401f8.jpeg)


:camera::raised_hand::smile:　ありがとう！の手話表現➡:iphone::speech_balloon:「ありがとう！」

## 作り方

`Teachable Machine`の画像を取り込んだ後の画面がこちらです。

![te 全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/1b031c07-37e1-3eb5-0248-8b171752971d.png)


①`「Teachable Machine」`のウェブカメラを押して、取り込みたい手話の表現を取り込みます。

:::note warn
手話は両手を使っての表現が多いので、ウェブカメラボタンを押した2秒後から画像の取り込みをスタートし、6秒間画像の取り込みを行なう設定があるのでそちらを使用しました。
:::

その後トレーニングで画像を`「Teachable Machine」`にまとめて取り込みます。プレビューの`「モデルをエクスポートする」`を押し、アップロードを行ないます。アップロード後は共有可能なリンクが作成されるのでURLをコピーしてください。

![te ex.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/5c7e6940-567a-833a-02a4-55fabcb5580c.png)

<details>
<summary>👈以降の説明が長いのでそのほかの「Node-RED」、「Make」の詳細はこちらをクリックください。<font color="Red">折りたたんでおります。</font></summary>

②`「Node-RED」`のワークスペース全体の画像です。

右上のハンバーガーマーク（三本線）をクリックし、パレットの管理を開きます。現在のノードからノードを追加のタブに変更してください。以下の3つのノードをコピペで追加してください。
* `node-red-contrib-teachable-machine`（teachable-machineで作成したモデルを使用するためのノード）
* `node-red-contrib-browser-utils`（自分のPCのカメラの写真データを読み込んでくれるノード）
* `node-red-contrib-image-output`（読み込んだ画像をNode-RED上に表示してくれるノード）

左のパレットに`「camera」`、`「teachable machine」`、`「image preview」`が追加されますので、ワークスペース全体のようにノードを配置してください。

![node 全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/2516b1ed-5e7f-b523-a2ad-138bcca7169e.png)


`「teachable machine」`ノードの中身です。先ほど①でコピーした`「Teachable Machine」`のURLを貼り付けしてください。
![node  te-ノード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/db2b01c4-b693-f366-8e78-e07d7bfa63eb.png)


`「template」`ノードの中身です。
![node　テンプレ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/85f3557f-a201-a371-d2b0-4802739b1a38.png)


`「http request」`ノードの中身です。<font color="Red">後ほどこちらに使用するURLを貼り付けします。</font>
![node http.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/27ed9087-2727-a7de-907c-5528e8b70c34.png)


③`「Make」`全体の画像です。
![make 全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/2c5dee9a-8195-e114-fd4b-fa4a45ecbb16.png)


`「Make」`の`「Webhooks」`の中身です。`「LINE Developers」`で自身のLINEと紐づけし、作成されたURLをコピーしてください。このURLを先ほどの`「Node-RED」`の`「http request」`にURLを貼り付けしてください。
![make web.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/72a9b027-dc1d-4487-64b3-45e6de737d74.png)


`「Make」`の`「LINE Send a Notification」`の中身です。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/ac215894-e3c7-881f-7e9f-d7376fbb76b2.png)


</details>


## 今後の課題
:::note warn
先日の記事に自己紹介を軽くしたのですが、私は小売店で働いています。従業員同士で使用する先入観があったので、今回の技術をどう仕事に活かすかをあまり思いつけず今回のLINE Botを作ったのですが、お客さんに使ってもらう立場で考えるとスマホカメラで商品を見ると商品の割引期間やクーポンがわかるようにすると便利だと思いました。~~視野が狭かった…~~
:arrow_down:良ければ前回の記事も見ていってくださいー！
:::

**前回の記事**

https://qiita.com/kotarou02/items/ce58d4fab90be52aa238


## これから
身近なスマホのカメラとの連携の仕方などを組み合わせればできる幅を広げられると思ったので、発想も視野も大事にしていきたいと思います！