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

# 保存したあの資料、探しにくいんですけど？
おはようございます、こんにちは、こんばんは！
いつでも笑顔、いけちゃんです！

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

:::note
↓前回の記事はこちら！↓
:::
https://qiita.com/ikeuchi-kota/items/7e35be6313a5b60087b4

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

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

# 何をしたいのか、の整理
目的を見失わないために、業者さんの送ってくる資料が最終的にはどうなっていたいのかを整理しました。
1. 紙をなくしてほしい
1. 手書き文（紙でも、データでも）はテキストデータ化してほしい
1. テキストデータ・画像ともに全て保存してほしい
1. 何の資料かを識別し、仕分けしてほしい

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

# Teachable MachineとNode-REDというツールを見つけた！
### 機械学習で画像・音声を認識させるTeachable Machine
それがあったんですよ皆さま！しかも無償ですってよ！

Googleが提供する`Teachable Machine`という、画像や音声を機械学習させて自動で識別するシステムです。
↓表裏を学習させた例がこちら
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Teachable Machineの凄さ、改めて体感<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/%E3%83%96%E3%83%83%E3%82%AF%E3%82%AA%E3%83%95%E3%81%A7%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%BA%E3%81%99%E3%82%8B%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88%E4%B8%AD%E3%81%AE%E3%83%A4%E3%83%9E%E3%83%88%E9%81%8B%E8%BC%B8?src=hash&amp;ref_src=twsrc%5Etfw">#ブックオフでプロポーズするダイエット中のヤマト運輸</a><a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://t.co/cZTHVBXgSl">pic.twitter.com/cZTHVBXgSl</a></p>&mdash; いけちゃん (@since2023_kota) <a href="https://twitter.com/since2023_kota/status/1751607891956777031?ref_src=twsrc%5Etfw">January 28, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

前回まで学んだ`Make`では、`Teachable Machine`は直接的に対応していないことがわかったので、色々と調査した結果、連携ができるサービスを発見しました！
### 様々なオンラインサービスを連携させるNode-RED
下記の記事の`②Node-REDの仕組み`を見ていただくとどのようなツールか、のイメージが付きやすかったので紹介します。

https://qiita.com/haru15komekome/items/491d4e78eac76a677d19

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

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

https://qiita.com/cog1t0/items/84e467739dd85e3d7cb6

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

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

# 結論：パソコンのカメラで識別した書類をLINEで通知することまではできた！
### まずは結果から、動作状況をこちらの動画で参照ください。
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Node-REDとLINEの連携はうまくいきそう、でもPCカメラかぁ・・・<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/%E3%83%96%E3%83%83%E3%82%AF%E3%82%AA%E3%83%95%E3%81%A7%E3%83%97%E3%83%AD%E3%83%9D%E3%83%BC%E3%82%BA%E3%81%99%E3%82%8B%E3%83%80%E3%82%A4%E3%82%A8%E3%83%83%E3%83%88%E4%B8%AD%E3%81%AE%E3%83%A4%E3%83%9E%E3%83%88%E9%81%8B%E8%BC%B8?src=hash&amp;ref_src=twsrc%5Etfw">#ブックオフでプロポーズするダイエット中のヤマト運輸</a><a href="https://twitter.com/hashtag/NodeRED?src=hash&amp;ref_src=twsrc%5Etfw">#NodeRED</a> <a href="https://twitter.com/hashtag/LINE?src=hash&amp;ref_src=twsrc%5Etfw">#LINE</a> <a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://t.co/eGzpWZkFKU">pic.twitter.com/eGzpWZkFKU</a></p>&mdash; いけちゃん (@since2023_kota) <a href="https://twitter.com/since2023_kota/status/1749442555765252530?ref_src=twsrc%5Etfw">January 22, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
※動画中は情報保護の観点からモザイク処理を施しています

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

![image (53).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/cd201adc-81fb-e362-6806-ed18925aff89.png)

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

<details><summary>事前準備：LINE Notifyの設定はこちら</summary>

今回は、`LINE Bot`のユーザーからのメッセージに対する自動返信機能ではなく、`LINE Notify`というLINEから一方通行の通知を送るための設定が必要です
1. [LINE Notify](https://notify-bot.line.me/ja/)へアクセスする
1. 右上のログインをクリックします
![image (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/431f0efe-7c32-3b39-3746-dc3fb798228b.png)
1. 自身のLINEアカウントを用いてログインします（私はQRコードログインで実施しました）
![image (70).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/5f34a6de-a69d-f0db-70cc-14c111438d11.png)
1. 右上が自分のアカウント名になるので、そちらをクリック後、マイページをクリックします
![image (71).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/36b8a632-9cbd-35ea-8020-8a19c696a092.png)
1. 下にスクロールし、トークンを発行するをクリックします
![image (72).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d1336fda-42f7-5981-b3a8-05c1566e163b.png)
1. トークン名を入力し（この名前で保存されます）、`1:1でLINE Notifyから通知を受け取る`を選択し、発行するをクリックします<br>他のグループも表示されますが、誤って選択するとそのグループに通知が届く設定になるので注意してください
![image (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/382a5a8b-ec1d-68b7-62b6-98481ec342a8.png)
1. アクセストークンが発行されるので、コピーしてテキストファイルなどにペーストし、保管してください
![image (76).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/11478d68-8875-89bf-012c-b26602800d38.png)
1. 閉じるをクリックすると自動でトップ画面に戻るので、連携中サービスに`From：入力したトークン名`が表示されれば完了です
![image (77).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/5bfc853a-ac49-59c3-6d3d-d8ebb7f78e6b.png)</details>

<details><summary>Teachable Machineの設定はこちら</summary>

1. [Teachable Machine](https://teachablemachine.withgoogle.com/)のリンク先を開き、使ってみるを選択します
![image (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/b0bc9753-5911-7f6d-c5e4-f476762acab9.png)
1. 画像プロジェクトを選択します
![image (57).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/67526a0c-0352-86ce-d4ea-87499b52db56.png)
1. 標準の画像モデルを選択します
![image (58).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/c4175a7f-4f84-451f-07f7-86347aee616d.png)
1. 画像左に`Class1`や`Class2`と表示されている箇所が読み取り結果となりますので、そちらクリックし任意の名前に変更します
![image (59).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/116aa9ed-0541-a241-9e4c-e61eb5ce5ca8.png)
併せて、左下にある`クラスを追加`をクリックするとさらに結果の種類を増やせますので、3種類以上識別したい場合は増やしてください
1. パソコンのカメラ機能をONにし、それぞれの識別名称の下にある`ウェブカメラ`をクリックします
![image (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/fdfa31c7-a48c-9152-7984-184099669ebf.png)
1. 識別させたい対象物をパソコンのカメラの前に映し、`長押しして録画`をクリックすると画像の学習が始まります<br>この時、角度を変えたり全体だけから一部だけを読ませてください<br>また同じ対象物でも別のもの（形や文言が違うなど）も使うとより精度が上がっていきます
 ![image (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/97287f62-898d-ae4d-dcb9-da4b322ff316.png)
1. すべての対象物を読み込ませたら、中央の`モデルをトレーニングする`を選択します
![image (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/85c39a42-1f56-0e34-50ac-066ab9927fba.png)
1. しばらくすると`トレーニング済のモデル`となり右側にプレビューが現れますので、実際に対象物をカメラの前にもってきて試してみてください<br>その後、右側にある`モデルをエクスポートする`をクリックします
![image (64).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/1c0d8b80-eded-3391-6151-546d14c93ed0.png)
1. `モデルをアップロード`をクリックします
![image (65).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/73c81b05-e032-b5a7-5ca3-f3cf4f0891d1.png)
1. すぐ下の`共有可能なリンク`が更新されますので、リンクURLの右端にある`コピー`をクリックします
![image (66).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d8d3c8f6-f17e-6f3a-185f-57a48c73ebff.png)
1. `コピーしました`と表示されたら、テキストファイルなどにペーストし保管してください
![image (67).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/a7cfeb8b-d96a-0a0b-b8b1-8e828fced4c6.png)</details>

<details><summary>Node-REDの設定はこちら</summary>

1. [Flow Fuse](https://app.flowfuse.com/team/kota0116/applications)にアクセスし、左上の`Applications`を選択した後、右中央にある青い`Open Editor`をクリックする
![image (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/933a12d2-764a-ebd3-d716-aab7ca3f0daa.png)
1. こちらが基本画面で、左側を`パレット`および四角い枠のマークを`ノード`、中央を`ワークスペース`、右側を`サイドバー`と呼びます
![image (80).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/ca23275f-07e4-8434-a160-cfa835503b43.png)
1. サイドバーより右上にある3本ラインのマークをクリックし、`パレットの管理`を選択します
![image (81).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/ea473351-d3b1-81ff-55a2-abe52352d9db.png)
1. `ノードを追加`タブをクリックし、`ノードを検索`と表示されている箇所に`blowser`と入力すると、自動で`node-red-contrib-browser-utils`が表示されるので`ノードを追加`をクリックします
![image (83).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/ac471c46-63fc-e4c5-4f03-81c2958d240c.png)
1. 説明文が出てきますので`追加`をクリックし、しばらく待つと`パレット`に`ノード`が追加されたと表示されます
![image (84).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/2ca3d7fe-1db8-5567-4d1f-fba58283592f.png)
![image (85).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/da5f33cf-6259-7c5e-5005-04e2156d1fd3.png)
1. 同じやり方で、続いては`line-notify`と検索し表示される`node-red-contrib-line-notify`も追加します
![image (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d7eaa3ce-216f-128e-2fa9-7e1cbc1bce7c.png)
![image (87).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/7bc78f4d-983c-83fc-61f9-27b4f4985723.png)
1. `ワークスペース`に、`パレット`から画像の`ノード`を置きます<br>ドラッグ&ドロップの要領で動かせるのでどんどん置いてみてください<br>`image preview`はパレット上では`image`と短縮されていますので注意
![image (89).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/4ce67ea2-4dd4-0c5b-719a-29cfbf8e21b9.png)
1. ここからは全て`ワークスペース`内での作業です<br>`teachable machine`ノードをダブルクリックし、Urlに以前作成、保存した`Teachable Machine`のURLを入力します
![image (90).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/dbda4e91-4d58-0197-9ec0-644bcaf2bd15.png)
1. `template`ノードをダブルクリックし、テンプレート部分を`{{payload.0.class}}`のみにします

    :::note warn
    注意！初期テキストを削除するとき、`{{payload.0.class}}`の左右に半角スペースがデフォルトで入っていることに気付きにくいです<br>試したときにLINE通知が届かない場合は半角スペースが残ってないか、よく確認してください
    ![image (91).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/42adcf0b-59f5-54ba-c05c-ea7951d00559.png)
    ↑これを・・・
    ↓こうします。何度も伝えますが`{{payload.0.class}}`左右に半角スペースが残ってないか今一度確認を！
    ![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d5831623-aa78-8a51-1e11-647f2c495b5f.png)
1. `switch`ノードをダブルクリックし、`Teachable Machine`の`Class`項目で設定した識別結果名をプロパティ下部の枠内に入力します<br>`+追加`をクリックすると増やせますので、いくつも識別結果を作成した場合はそちらを活用して増やしてください
![image (93).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/2d6563d5-dead-09dd-17a9-24d41926cd3a.png)
1. `line notify`ノードをダブルクリックし、`新規にlinetokenを追加`の右にあるペンマークをクリックします
![image (94).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/738c4548-5ffb-b62f-d1fe-efb7938b3bd1.png)
1. `アクセストークン`欄に事前に設定した`LINE Notify`のアクセストークンを入力し追加（修正時は更新となっています）をクリックします
![image (95).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/b962387c-1398-44cd-f482-fb5d3975a74a.png)
1. 元の画面に戻りますので、`メッセージ`欄をLINEで通知したいメッセージに変更してください
![image (96).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/3088f7fe-578d-1317-cfc8-31dc1da29d46.png)
1. `line notify`ノードをコピー（ctrlキー+Cが簡単）し、`switch`ノードで設定した個数だけペースト（ctrl+Vが簡単）します
![image (97).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/e058a2d9-9428-1a77-2408-75e29de50fcb.png)
1. コピーした残りの`line notify`ノードのメッセージをそれぞれの識別結果ごとに変更します
1. 各ノードの左右から出ている窪みをドラッグすると線が伸びていきますので、そちらを各ノード同士繋げていきます<br>1つのノードから2つのノードに繋げることも可能
![image (99).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/dc819a59-052e-65c5-5296-af0891b31d0a.png)
1. 画像の通りにノード同士を繋げてください
![image (100).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/40d9649b-819a-db0a-ba75-5ae263f90294.png)
1. 最後に右上のデプロイ（保存）をクリックしてすべての設定が完了です
![image - 2024-01-23T235131.143.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/e63bc5fd-2555-e01a-bfd2-10c78093eba6.png)
1. 試す場合は、パソコンのカメラの前に識別させたい対象を見せながら、`camera`ノードの左にある四角いマークをクリックしてください<br>そうすると、最初にお見せした動画の通り動作していきます</details>

# 「資料を識別し、仕分ける」以外の機能がなくなった！
さて、せっかく作ったこの機能ですが、当初の目的からは少し離れた仕上がりになってしまいました。
目的を振り返ってみると一目瞭然です。

1. 紙をなくしてデータで送ってほしい<br><font color="Red">⇒できなくなった</font>
1. 手書き（紙でも、データでも）はテキストデータ化してほしい<br><font color="Red">⇒できなくなった</font>
1. テキストデータとともに全てデータとして保存してほしい<br><font color="Red">⇒できなくなった</font>
1. 何の資料かを識別し、仕分けしてほしい<br><font color="Blue">⇒できた</font>

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

### 1. LINE Botで画像のやり取りをすると起きる「サーバー切断」
例．画面上部に`サーバとの接続が切断されました`とアラートが表示されています
![image (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d36493e9-f45d-f5a1-b08d-ea2cce574279.png)

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

### 2. Google Spread Sheet と Microsoft OneDriveがセキュリティ上使用できない
下記画像をご覧ください。
1. `Google Spread Sheet`を共有しようとする場面で外部との共有ができないアラート
![image (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/ee0e3a65-761d-13a4-429d-508a71e69f7d.png)
1. `Microsoft OneDrive`を使用するためのAPIキーを発行しようとすると同様にアラート
![image (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/306464d7-b840-d2e1-413a-8baef74194d2.png)

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

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

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