LoginSignup
8
1
@navy-blue919(紺)inプロトアウトスタジオ

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

Last updated at Posted at 2023-07-19

書類のルート教えるよBot

書類の行き先教えてくれたら便利じゃないですか？

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

システムに入力するのに結局印刷して回議する書類たち…

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

  • 自分の押印が必要か
  • 誰の承認(押印)が必要か
  • 添付書類が必要か
  • どこに提出するのか

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

そんなときにデジタルの研修で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つなのに…。

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

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

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

image.png

今回は3種類の書類を想定して作成しました。

手順を確認したい方はコチラ

Teachable Machineにアクセスして、「使ってみる」をクリック。
image.png
今回は画像判別なので「画像プロジェクト」を選択し「標準の画像モデル」を選択します。
(画像判別以外に、音声、ポーズも判別してくれるみたいです。どんなことに使えるでしょう…？)

早速モデルの作成です。
image.png
今回は3種類の判別を行うため①をクリックしてクラスを追加します。
②で「Class1」となっているところを書類名に変更。(Class2、3も同様)
③でWebカメラを起動させます。
image.png
カメラに対象を合わせて④を押して撮影していきます。長押しでバババババッと撮ってくれます。近づけたり遠ざけたりしてみると学習精度が上がるようです。(左画像が撮影されている様子)
Class2、3も同様に撮影が完了したら⑤でモデルをトレーニングをします。
image.png
モデルの作成が完了しました^^簡単！！
あとは、⑥でモデルをエクスポートして、⑦でアップロード、⑧で発行されたURLをコピーしてTeachable Machineの準備は完了です！！

Node-REDとLINE連携の試練

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

とてもとても丁寧に書いていてくださり、おかげさまで連携させることができました！！！
間違いポイントは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

debugノードだらけです。
前回、初めてLINE Botを作成したときにはMakeというツールを使用しました。
Makeではシナリオを動かしたときにエラーがあると、該当のモジュールに「⚠」が表示されどこでエラーが出ているのかすぐに確認できたのですが、Node-REDでは何も表示されません。
どこで何が起きて動いていないのかが何も分からず途方に暮れました…。
色々探していると👉こちらの記事を見付け、
「なるほど！！！全部にdebugノードをつければエラーかどうか確認できそう！！」
と前に進むことができました…！！
image.png

やっと前に進めた！各ノードの設定

フロー作成の参考にさせていただいた記事です^^
ありがとうございます！

各ノードの設定内容は、参考記事とほぼ同じなので下記画像の赤枠内のみご紹介いたします！
image.png
フロー作成前にNode-REDに追加したノードがありましたのでご紹介します。

node-red-contrib-teachable-machine
Teachable Machineと連携するためのノード
node-red-contrib-image-output
取り込んだ画像をNode-RED上で確認するためのノード
line-messaging-api
LINEの返信をもらうためのノード
上記の3つをあらかじめ以下の手順で追加しました！

image.png
①パレットの管理をクリック
②ノードを追加タブをクリック
③追加するノードをコピペしてEnterで検索
④ノードを追加をクリックしてしばらく待つ
追加が完了すると「現在のノード」タブに、右側の画像のように反映されます。

赤枠内のノードの設定はこんな感じです！
image.png
画像右側のswitchは各書類の種類に応じて分岐するように設定しました！
画像左側のfunctionに書いてあるコードは下記の通りです。

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の分岐に影響します。
邪魔しないように今回は書類名だけが返ってくるようにしています。

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

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

LINEのReplyMessageはこんな感じです。
image.png
secretにはLINEのチャネルシークレット
AccessTokenにはチャネルアクセストークンをそれぞれ入力します。
ReplyMessage欄にLINEで返して欲しい文章を直接入れるとその通りに送ってきてくれます。

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

余談ですが、スマホから画像送るとき少し明るめの画像の方が一致率が上がる傾向がありました…。
PCのWebカメラとスマホカメラとの違いなのか…。はっきりと分析はできておりません💦

CodePenの方がよかったのか…？

Node-REDでの設定を完了し、記事執筆！！！
と思ったところでQiitaホームでCodePenを使用した記事を発見。
あれ？スマホでも使えるの？…知らなかった。
それならCodePenの方が良かったかもしれない…？
Webアプリ開いて画面かざすだけで結果が分かるならその方が動きが速そう！
色々知っていれば、より最適なツールで作成することができますよね！！
まずはCodePen勉強して、適していれば作り替えてみたいと思います^^

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

8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
1