この書類、このあとどうするんだっけ…？LINE Botで書類の回議先を教えてもらおう！

# 書類のルート教えるよBot
### 書類の行き先教えてくれたら便利じゃないですか？
こんにちは、滅多に出社しないテレワーカーです。
たまに出社したときに書類を誰に承認してもらって誰に出せばいいか分かりません^^;
写真撮ってルート分かったら便利じゃないです！？

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Teachable Machineで書類の判定！<br>ダミーで絵本使わせていただいてます😅<br>この違いをちゃんと判定してくれる…！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/KSFeM8bDbd">pic.twitter.com/KSFeM8bDbd</a></p>&mdash; 紺 (@navy_blue919) <a href="https://twitter.com/navy_blue919/status/1681292825789607938?ref_src=twsrc%5Etfw">July 18, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### システムに入力するのに結局印刷して回議する書類たち…
私の勤め先では、経費の支払い申請やら、車の使用許可やら…上司や他部署の承認が必要なものは紙で提出を求められることが多々あります。先にシステムに入力しているのですが、そこに承認機能が無いばかりに、結局印刷が必要になり大量発生する書類たち。(承認機能があっても印刷して回してるものも…)
滅多に出社しない＆滅多に発生しない提出書類となるとそのたびに
**「これ、誰に出せばいいんでしたっけ…？」**
と物知りパートさんにお手数をおかけすることに…。
- 自分の押印が必要か
- 誰の承認(押印)が必要か
- 添付書類が必要か
- どこに提出するのか

書類を見てこんなことがすぐに判断できればいいのに…。
提出書類だけじゃなく、部署で受け取った書類の処理なんかも分かるといいな～。

そんなときにデジタルの研修で**Teachable Machine**という機械学習のツールを知り、早速使ってみたい！！！ということで **「書類のルート教えるよBot」** を作成してみました。

### こんな風に作れたらどうだろう…！！
①LINEで書類の写真を撮り送付する。
②画像の情報を`Nord-RED`を使い`Teachable Machine`に渡す。
③`Teachable Machine`で書類の種類を判断。
④判断結果を`Nord-RED`で受け取り、書類名と処理方法をLINEにメッセージで返す。

これができれば、書類の提出(受け取り)で**モタモタしなくて済む**かも！！
# 設定忘れと、初めてのツールの壁
### 初めてのツール、使ってみよう！
- LINE Deveropers 
- Teachabele Machine 🆕
- Node-RED 🆕

初めてのツールを2つ使ってみることに成功しました^^ 
 
### Webhookの罠～LINE Developersの設定～
LINEで画像を送付すると、この書類をどうしたらいいのか教えてもらえる設計にするためLINE Botを作成します。
Node-REDと繋げるために色々設定が必要になりますが、特に…
**WebhookのONは忘れずに！！**
そのせいでしばらく悩みました。ボタン1つなのに…。

https://qiita.com/kuma_ssss/items/71ed5ffb3596abffbb29

とても丁寧な記事のため、引用させていただきました^^
ありがとうございます！

### こんな簡単に画像の判別…？！

**Teachable Machine**を使用して画像の学習をさせて書類(ダミーで絵本使用)の判別をしてもらいます。
(※裏で実際の書類でも判別を試しています！数種類ですが問題なく判別してくれました^^)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/0c112bb9-5aff-6c6c-1016-dac6d6e8797d.png)

今回は3種類の書類を想定して作成しました。
<details><summary>手順を確認したい方はコチラ</summary>

[Teachable Machine](https://teachablemachine.withgoogle.com/)にアクセスして、「使ってみる」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/65312797-82a9-4a9a-41f3-0a87f5f3f9bc.png)
今回は画像判別なので「画像プロジェクト」を選択し「標準の画像モデル」を選択します。
(画像判別以外に、音声、ポーズも判別してくれるみたいです。どんなことに使えるでしょう…？)

早速モデルの作成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/fb3aaad0-1835-1d8f-576b-91e6358fda85.png)
今回は3種類の判別を行うため①をクリックしてクラスを追加します。
②で「Class1」となっているところを書類名に変更。(Class2、3も同様)
③でWebカメラを起動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/3f939b25-1b35-cc9a-e6d8-73413d7f6f16.png)
カメラに対象を合わせて④を押して撮影していきます。長押しでバババババッと撮ってくれます。近づけたり遠ざけたりしてみると学習精度が上がるようです。(左画像が撮影されている様子)
Class2、3も同様に撮影が完了したら⑤でモデルをトレーニングをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/c5614d75-b740-5ab2-54d9-104b09901de8.png)
**モデルの作成が完了しました^^簡単！！**
あとは、⑥でモデルをエクスポートして、⑦でアップロード、⑧で発行されたURLをコピーして**Teachable Machine**の準備は完了です！！
</details>

### Node-REDとLINE連携の試練
今回はサクサク完成しそう～、なんてのは**調子に乗っていただけでした。**
LINEで書類を撮って送ると回答をくれるっていうのがやりたいのに、肝心のLINEとの連携がうまくいきません…。
検索魔と成り果てて探し当てたのがこちらの記事。

https://qiita.com/kuma_ssss/items/098715c74c087a19aa65

とてもとても丁寧に書いていてくださり、おかげさまで**連携させることができました！！！**
間違いポイントはWebhookのURL。(以下、完成までの流れ❹の一部を引用させていただきます)
>https\://××××-△△△△△△.herokuapp.com/red/#flow/0000000a00000b
のような形になっていると思います。
>.com/の後ろは削除し、http inノードのURL欄に入力した/以降を追加。
>今回の例だと、https\://××××-△△△△△△.herokuapp.com/line_bot　になります。
>
>そのURLをLINE DevelopersのWebhook設定にある、Webhook URLへコピペ。

.com/の後を削除するんだったんですね…！！！ありがとうございます！！！！！！
(加えてLINE DeveropersのWebhookの設定も漏れていました…)

### Node-REDのエラーの見方がわからない…

**試行錯誤の末、完成したフローがこちらです**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/5865f6fe-3be8-82d9-7f43-0db4aeaf3c38.png)

`debug`ノードだらけです。
前回、初めてLINE Botを作成したときには**Make**というツールを使用しました。
**Make**ではシナリオを動かしたときにエラーがあると、該当のモジュールに「⚠」が表示されどこでエラーが出ているのかすぐに確認できたのですが、**Node-RED**では何も表示されません。
どこで何が起きて動いていないのかが何も分からず途方に暮れました…。
色々探していると[👉こちらの記事](https://toranoana-lab.hatenablog.com/entry/2020/12/08/090000 "虎の穴開発室ブログ")を見付け、
**「なるほど！！！全部に`debug`ノードをつければエラーかどうか確認できそう！！」**
と前に進むことができました…！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/450c0f89-994f-d2be-57df-e0c1304e6241.png)

### やっと前に進めた！各ノードの設定
フロー作成の参考にさせていただいた記事です^^
ありがとうございます！

https://qiita.com/jiko111/items/5fcd75924f59d900e128

各ノードの設定内容は、参考記事とほぼ同じなので下記画像の赤枠内のみご紹介いたします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/92dca696-ce0b-1c58-01f5-ddc1b02653d9.png)
フロー作成前にNode-REDに追加したノードがありましたのでご紹介します。
<dl>
<dt>node-red-contrib-teachable-machine</dt>
<dd>Teachable Machineと連携するためのノード</dd>
<dt>node-red-contrib-image-output</dt>
<dd>取り込んだ画像をNode-RED上で確認するためのノード</dd>
<dt>line-messaging-api</dt>
<dd>LINEの返信をもらうためのノード</dd>
</dl>
上記の3つをあらかじめ以下の手順で追加しました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/2f37a146-407a-670d-47b9-57e180575168.png)
①パレットの管理をクリック
②ノードを追加タブをクリック
③追加するノードをコピペしてEnterで検索
④ノードを追加をクリックしてしばらく待つ
追加が完了すると「現在のノード」タブに、右側の画像のように反映されます。

**赤枠内のノードの設定はこんな感じです！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/2c52d75f-c724-7db3-421d-fd9129cf5271.png)
画像右側の`switch`は各書類の種類に応じて分岐するように設定しました！
画像左側の`function`に書いてあるコードは下記の通りです。
```javascript
const className = msg.payload[0].class;
msg.payload = {};
msg.payload.events = [
    {
        "type": "message",
        "replyToken": msg.replyToken,
        "message": {
            "type": "text",
            "text": `${className}`
        }
    }
];
return msg;
```
textとして返ってくる部分(画像内の緑枠内)が次の`switch`の分岐に影響します。
邪魔しないように今回は書類名だけが返ってくるようにしています。

<details><summary>"text": `${className}`　を編集すれば返ってくる文章を変えられる</summary>
個人的メモです。すみません…💦笑

`` "text": `${className}` `` を `` "text": `これは「${className}」です。` ``　と｀｀内を変えることでTeachable Machineからの結果の文言を変えることができました。
今後少しコードに触れる場合に紐解く手がかりになるかもしれないと思ったので記しておきます。
</details>

LINEの`ReplyMessage`はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459210/859c5e12-e992-68fc-cf2f-ce735b2f2f03.png)
secretにはLINEのチャネルシークレット
AccessTokenにはチャネルアクセストークンをそれぞれ入力します。
ReplyMessage欄にLINEで返して欲しい文章を直接入れるとその通りに送ってきてくれます。

**完成しました！！！すごい！！！**

余談ですが、スマホから画像送るとき少し明るめの画像の方が一致率が上がる傾向がありました…。
PCのWebカメラとスマホカメラとの違いなのか…。はっきりと分析はできておりません💦
 
# CodePenの方がよかったのか…？
Node-REDでの設定を完了し、記事執筆！！！
と思ったところでQiitaホームでCodePenを使用した記事を発見。
あれ？スマホでも使えるの？…知らなかった。
それなら**CodePenの方が良かったかもしれない…？**
Webアプリ開いて画面かざすだけで結果が分かるならその方が動きが速そう！
色々知っていれば、より最適なツールで作成することができますよね！！
まずはCodePen勉強して、適していれば作り替えてみたいと思います^^

ここまでお付き合いいただきありがとうございました！