LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@ikeuchi-kota(いけちゃん)inプロトアウトスタジオ

Node-REDとTeachable Machineで、業者さんの資料を仕分けて保存したい！　結果と課題について

Last updated at Posted at 2024-01-23

保存したあの資料、探しにくいんですけど？

おはようございます、こんにちは、こんばんは！
いつでも笑顔、いけちゃんです！

前回までに、個性あふれる業者さんの資料画像とテキスト化した文書をGoogle Spread Sheet上に保存するLINE Botを作り上げることができました。

↓前回の記事はこちら！↓

ところが、実際に使用してみたところこんな声が・・・
「保存までされるなんてすっごい機能！でも、業者さんの資料は種類がたくさんあるし、保存したあの資料、探しにくいんですけど？」
「これだけの仕組みがあるなら自動仕分けもできそうじゃないですか？」

なんと！まだまだ改善の余地がありそうです。
探してみるしかない！待っててね！

何をしたいのか、の整理

目的を見失わないために、業者さんの送ってくる資料が最終的にはどうなっていたいのかを整理しました。

  1. 紙をなくしてほしい
  2. 手書き文（紙でも、データでも）はテキストデータ化してほしい
  3. テキストデータ・画像ともに全て保存してほしい
  4. 何の資料かを識別し、仕分けしてほしい

このなかで、1～3は前回までの仕組みで改善ができていました。
残すは、4. 何の資料かを識別し、仕分けしてほしい項目のみです。
そんな都合のいい機能、本当にあるの？

Teachable MachineとNode-REDというツールを見つけた！

機械学習で画像・音声を認識させるTeachable Machine

それがあったんですよ皆さま！しかも無償ですってよ！

Googleが提供するTeachable Machineという、画像や音声を機械学習させて自動で識別するシステムです。
↓表裏を学習させた例がこちら

ただし、これだけでは私のパソコンのカメラ上でしか使うことはできませんし、識別ができる「だけ」。
目的を達成するためには、LINE Botなどで送られた画像を判定したり、その結果を保存するシステムへの連携が必要です。

前回まで学んだMakeでは、Teachable Machineは直接的に対応していないことがわかったので、色々と調査した結果、連携ができるサービスを発見しました！

様々なオンラインサービスを連携させるNode-RED

下記の記事の②Node-REDの仕組みを見ていただくとどのようなツールか、のイメージが付きやすかったので紹介します。

Teachable Machineはノードが公開されているため、このシステムNode-REDを活用するとLINE Bot上でTeachable Machineを動かすことが出来るかも、と考えました。

ただし、「ド初心者」である私にとって、Node-REDは扱えるまでの流れが特殊だと感じました。
説明が難しいため、下記リンク先を参考にし、Node-REDとその中でTeachable Machineが利用できるようにしておいてください。

※注意：無料期間が記事執筆時点で14日間しかないため、長期に使う場合は別の方法が必要かも

さて、この2つのシステムを用いて、早速実践です！

結論：パソコンのカメラで識別した書類をLINEで通知することまではできた！

まずは結果から、動作状況をこちらの動画で参照ください。

※動画中は情報保護の観点からモザイク処理を施しています

上記を実現したNode-REDのフロー画面です

image (53).png

設定方法はこちら、長いので折りたたんでいます。
私と同じ「ド初心者」の方、ぜひ参考にしてみてください。

事前準備：LINE Notifyの設定はこちら

今回は、LINE Botのユーザーからのメッセージに対する自動返信機能ではなく、LINE NotifyというLINEから一方通行の通知を送るための設定が必要です

  1. LINE Notifyへアクセスする
  2. 右上のログインをクリックします
    image (69).png
  3. 自身のLINEアカウントを用いてログインします（私はQRコードログインで実施しました）
    image (70).png
  4. 右上が自分のアカウント名になるので、そちらをクリック後、マイページをクリックします
    image (71).png
  5. 下にスクロールし、トークンを発行するをクリックします
    image (72).png
  6. トークン名を入力し（この名前で保存されます）、1:1でLINE Notifyから通知を受け取るを選択し、発行するをクリックします
    他のグループも表示されますが、誤って選択するとそのグループに通知が届く設定になるので注意してください
    image (74).png
  7. アクセストークンが発行されるので、コピーしてテキストファイルなどにペーストし、保管してください
    image (76).png
  8. 閉じるをクリックすると自動でトップ画面に戻るので、連携中サービスにFrom：入力したトークン名が表示されれば完了です
    image (77).png
Teachable Machineの設定はこちら
  1. Teachable Machineのリンク先を開き、使ってみるを選択します
    image (56).png
  2. 画像プロジェクトを選択します
    image (57).png
  3. 標準の画像モデルを選択します
    image (58).png
  4. 画像左にClass1やClass2と表示されている箇所が読み取り結果となりますので、そちらクリックし任意の名前に変更します
    image (59).png
    併せて、左下にあるクラスを追加をクリックするとさらに結果の種類を増やせますので、3種類以上識別したい場合は増やしてください
  5. パソコンのカメラ機能をONにし、それぞれの識別名称の下にあるウェブカメラをクリックします
    image (60).png
  6. 識別させたい対象物をパソコンのカメラの前に映し、長押しして録画をクリックすると画像の学習が始まります
    この時、角度を変えたり全体だけから一部だけを読ませてください
    また同じ対象物でも別のもの（形や文言が違うなど）も使うとより精度が上がっていきます
    image (61).png
  7. すべての対象物を読み込ませたら、中央のモデルをトレーニングするを選択します
    image (62).png
  8. しばらくするとトレーニング済のモデルとなり右側にプレビューが現れますので、実際に対象物をカメラの前にもってきて試してみてください
    その後、右側にあるモデルをエクスポートするをクリックします
    image (64).png
  9. モデルをアップロードをクリックします
    image (65).png
  10. すぐ下の共有可能なリンクが更新されますので、リンクURLの右端にあるコピーをクリックします
    image (66).png
  11. コピーしましたと表示されたら、テキストファイルなどにペーストし保管してください
    image (67).png
Node-REDの設定はこちら

  1. Flow Fuseにアクセスし、左上のApplicationsを選択した後、右中央にある青いOpen Editorをクリックする
    image (88).png

  2. こちらが基本画面で、左側をパレットおよび四角い枠のマークをノード、中央をワークスペース、右側をサイドバーと呼びます
    image (80).png

  3. サイドバーより右上にある3本ラインのマークをクリックし、パレットの管理を選択します
    image (81).png

  4. ノードを追加タブをクリックし、ノードを検索と表示されている箇所にblowserと入力すると、自動でnode-red-contrib-browser-utilsが表示されるのでノードを追加をクリックします
    image (83).png

  5. 説明文が出てきますので追加をクリックし、しばらく待つとパレットにノードが追加されたと表示されます
    image (84).png
    image (85).png

  6. 同じやり方で、続いてはline-notifyと検索し表示されるnode-red-contrib-line-notifyも追加します
    image (86).png
    image (87).png

  7. ワークスペースに、パレットから画像のノードを置きます
    ドラッグ&ドロップの要領で動かせるのでどんどん置いてみてください
    image previewはパレット上ではimageと短縮されていますので注意
    image (89).png

  8. ここからは全てワークスペース内での作業です
    teachable machineノードをダブルクリックし、Urlに以前作成、保存したTeachable MachineのURLを入力します
    image (90).png

  9. templateノードをダブルクリックし、テンプレート部分を{{payload.0.class}}のみにします

    注意！初期テキストを削除するとき、{{payload.0.class}}の左右に半角スペースがデフォルトで入っていることに気付きにくいです
    試したときにLINE通知が届かない場合は半角スペースが残ってないか、よく確認してください
    image (91).png
    ↑これを・・・
    ↓こうします。何度も伝えますが{{payload.0.class}}左右に半角スペースが残ってないか今一度確認を！
    image (2).png

  10. switchノードをダブルクリックし、Teachable MachineのClass項目で設定した識別結果名をプロパティ下部の枠内に入力します
    +追加をクリックすると増やせますので、いくつも識別結果を作成した場合はそちらを活用して増やしてください
    image (93).png

  11. line notifyノードをダブルクリックし、新規にlinetokenを追加の右にあるペンマークをクリックします
    image (94).png

  12. アクセストークン欄に事前に設定したLINE Notifyのアクセストークンを入力し追加（修正時は更新となっています）をクリックします
    image (95).png

  13. 元の画面に戻りますので、メッセージ欄をLINEで通知したいメッセージに変更してください
    image (96).png

  14. line notifyノードをコピー（ctrlキー+Cが簡単）し、switchノードで設定した個数だけペースト（ctrl+Vが簡単）します
    image (97).png

  15. コピーした残りのline notifyノードのメッセージをそれぞれの識別結果ごとに変更します

  16. 各ノードの左右から出ている窪みをドラッグすると線が伸びていきますので、そちらを各ノード同士繋げていきます
    1つのノードから2つのノードに繋げることも可能
    image (99).png

  17. 画像の通りにノード同士を繋げてください
    image (100).png

  18. 最後に右上のデプロイ（保存）をクリックしてすべての設定が完了です
    image - 2024-01-23T235131.143.png

  19. 試す場合は、パソコンのカメラの前に識別させたい対象を見せながら、cameraノードの左にある四角いマークをクリックしてください
    そうすると、最初にお見せした動画の通り動作していきます

「資料を識別し、仕分ける」以外の機能がなくなった！

さて、せっかく作ったこの機能ですが、当初の目的からは少し離れた仕上がりになってしまいました。
目的を振り返ってみると一目瞭然です。

  1. 紙をなくしてデータで送ってほしい
    ⇒できなくなった
  2. 手書き（紙でも、データでも）はテキストデータ化してほしい
    ⇒できなくなった
  3. テキストデータとともに全てデータとして保存してほしい
    ⇒できなくなった
  4. 何の資料かを識別し、仕分けしてほしい
    ⇒できた

なぜ、このようなことが起こったかを確認していきます。

1. LINE Botで画像のやり取りをすると起きる「サーバー切断」

例．画面上部にサーバとの接続が切断されましたとアラートが表示されています
image (55).png

これは実装前の試験で、LINE Botに届いた画像をTeachable Machineで仕分けてどの書類かを返信する設定を組み込んだものです。
しかし試験中にサーバーが切断され、LINE Botでの返答処理の前に再起動してしまいます。
パソコンのカメラ機能を使用した際にはこのエラーがほぼ出ないため、サーバー負荷が大きい様子です。
やむを得ずLINE Botを使用した設定は中止しました。

2. Google Spread Sheet と Microsoft OneDriveがセキュリティ上使用できない

下記画像をご覧ください。

  1. Google Spread Sheetを共有しようとする場面で外部との共有ができないアラート
    image (34).png
  2. Microsoft OneDriveを使用するためのAPIキーを発行しようとすると同様にアラート
    image (33).png

つまり、会社のセキュリティがかかっていてドライブ上のデータ読み込み、書き取りが使えない状況だったのです。
前回までの記事で使用しているGoogle Spread Sheetに替わり、「OneDriveなら使えるかも！？」と期待して設定を探してみたのですがあえなく撃沈・・・
Teachable Machineの機能が革新的なだけに、非常に残念でした。

機械学習という素晴らしい機能、活用方法模索中！

前回までの記事で実装した機能との連携は叶いませんでしたが、Teachable Machineでできる業務改善は間違いなくありそうだという気付きがありました。
「ド初心者」から少し抜け出して、他の方法を見つけて記事にしていきたいと思います。

最後までご覧いただき、ありがとうございました！

2
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?