ノーコード？モジュール？？API？？？「ド初心者」がOCRとChatGPTを活用し、個性溢れる文書を整理・返信するLINE Botを作りデータ化してみた話

2024/03/06：Google Spread Sheetへの保存にも対応できた続編記事のリンクを追記しました

# ご挨拶
おはようございます、こんにちは、こんばんは！
私は小売業に勤める、普段は本社で様々な部署との調整窓口を担当しているいつでも笑顔、いけちゃんと申します！

私は業務の一つとして、店頭催事（ご存じですか？スーパーマーケットの駐車場とかに焼鳥屋さんの車やたこ焼き屋さんの屋台などのことです）の契約・衛生管理・スケジュール管理を受け持っています。

本日は、プログラミングのpの字も知らない「ド初心者」がOCRとChatGPTを活用し、個性溢れる文書を整理・返信するLINE Botを作りデータ化してみた話をお届けします。
# 最近の悩み・・・紙が減らない！文字が読めない！
<details><summary><font color="Red">←このマークを見つけたらクリック！閉じてある記事が開きます！</font><br>皆さんは、店頭催事と聞くとどんなイメージが浮かびますか？</summary>
　・調理している匂いとかが届いてきて美味しそう・・・<br>
　・クレープ買って帰ってますよ！<br>
　・販売員さんといつも世間話をするの～

とか、そんなイメージを思い浮かんだあなた！その通りです！！</details>
店頭催事にもたくさんの人が従事していますが、お店に来てもらい、商品を作り、そして販売し続けていくには、提供する商品の安全・安心を会社としてきちんと確認する必要があります。

そのために、事前に検便の検査がされているか、営業許可が取れているか、そして保険への加入・更新がされているかを確認しているほか、店舗に来たその日にもお店と相互で衛生管理の確認を徹底しています。
<details><summary>例えばこんな書類をもらっています</summary>
　1. 催事入店希望日の一覧<br>
　2. 店舗へ入店時の催事業者さま向けチェックリスト（法令順守・衛生管理）<br>
　3. 検便の検査結果（2か月に1回受検し、菌検査基準をクリアしていることが当社ルール）<br>
　4. PL保険の更新（加入は必須、ほとんどの保険は1年に1回更新・確認）<br>
　5. 営業許可証の更新（催事業者さんは営業許可証がないと販売してはいけない商材がある、大抵は5年に1回更新）</details>
ところが催事業者さんの数が増えていくと、メールでのやり取りはショートメールだからデータではなく紙で欲しい、とかパソコンがないからFAX・郵送だけ、などでやり取りが細分化していくことが実情。

自然と増えていく紙や認識が難しい文字の山を見て思ったのです。
「業者さんがこれらの写真を送るだけでデータ化できる仕組みができればいいのに・・・」

# 見つけた！プログラムコードを知らなくても色々な仕組みが作れる「Make」

色々と調べてみたところ、`Make`というサービスを活用して`LINE Bot`を作ることでその機能が実装できそうだとわかりました！
しかも、私のようなプログラミングコードを知らない「ド初心者」でもできる方法とのこと。
ただし、色々調べてみてもこの仕組みをいきなり使えるようになるにはハードルが高い・・・まずは使い方から学んでみます！

# 「ド初心者」はまず簡単な`LINE Bot`を作ってみよう！

:::note
別記事で、「ド初心者」の私が参考にした記事を多数紹介します↓
:::
https://qiita.com/ikeuchi-kota/items/66b74b2b867172f8d383

このようなわかりやすい記事を投稿くださった皆さまに御礼申し上げます。
`Make`というサービスを使って、`LINE Bot`の作り方は何となくわかってきました！

# `OCR`と`ChatGPT`を活用した`LINE Bot`完成！
まずは結果から、動作状況をこちらの動画で参照ください。
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">ここまで出来ました〜👏<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://t.co/ysHggaAn9z">pic.twitter.com/ysHggaAn9z</a></p>&mdash; いけちゃん (@since2023_kota) <a href="https://twitter.com/since2023_kota/status/1744849529877451110?ref_src=twsrc%5Etfw">January 9, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
※編集されているため、実際の時間はもう少し長くなります

上記を実現したMake上のシナリオ画面です。
![Makeシナリオ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/78ef0a28-ee8a-8e9e-22f9-e832dbf7bee3.png)


# 文章・画像で作り方説明、ぜひ試してみてください
使用したツールはこちら

:::note
 1. Make：下の3つを動かすためにアカウント登録、シナリオを作成
 1. LINE Developers：LINE公式アカウントを設定し、LINE Botを作成
 1. Google Cloud Platform：Cloud Vision APIを取得
 1. OpenAI（ChatGPT） API：ChatGPTのAPIを取得
:::

### 共通設定

`LINE Bot`がメッセージや添付ファイル（画像orPDF）が送られてきたことを認識します
1. AddからLINEの`Watch Events`を選択します（こちらの設定は触れませんので、前述の紹介記事を参考に作成してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/6e094636-09e0-5e10-db15-aa634ca8c877.png)
次からは、それぞれのパターンごとの処理・設定方法を紹介します。

### パターンA：メッセージが送られてきた場合

<details><summary>メッセージに対し、「画像を送ってほしい旨」を自動返信する設定方法です</summary>

1. AddからLINEの`Send a Reply Message`を選択し、画像通りの設定をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/4abf8aba-e192-e519-2784-f30357f63aaf.png)
2. LINEの`Watch Events`と`Send a Reply Message`の間にスパナのマークが出ますので、そちらをクリックし、`Add a router`を選択してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/286db00d-9af7-a592-eef4-73d9a1a6996b.png)
3. そうするとこんな感じに`Router`が現れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/27799885-b8d5-3472-3432-af5e0c6f10e2.png)
4. `Router`の右上の出っ張りをクリックし、`Label`は自分が確認しやすい名称、`Condition`より下を以下の画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/de319fa4-0d70-1072-d0fe-f36c5775daed.png)
これでメッセージが送られてきた時の設定は完了です！</details>

### パターンB：画像データ（jpg,pngなど）が送られてきた場合

<details><summary>画像データ（jpg,pngなど）をGoogle Cloud Visionで認識、テキスト化しChatGPTで整理した文書を自動返信する設定方法です</summary>

1. AddからLINEの`Download a Message Attatchment`を選択し、画像通りの設定をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/b43d5b58-fa24-3c59-ffa8-c4603f3c2a90.png)
2. パターンAで設定した`Router`と`Download a Message Attatchment`を繋げてください
`Router`の出っ張りをクリックし、`Label`は自分が確認しやすい名称、`Condition`より下を以下の画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/0b257044-6d6e-1bb1-a6e6-5699b28970fe.png)
3. Addから`Google Cloud Vision`の`Run Text Detection(OCR) within an image`を選択し、画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/5f7622fb-aa9f-b345-5837-3ca51bf8779a.png)
1. Addから`OpenAI(ChatGPT,Whisper,DALL-E)`の`Create a Completion(GPT-3,GPT-3.5,GPT-4)`を選択し、画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/ff230a23-b3e5-0dea-6dd5-64dbd19857e8.png)
なお、`Message Content`がChatGPTへの命令文書なので、ここを変えると様々な文書に整理してくれるようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/79a7b75a-616a-9018-c7ff-eb56df6d5003.png)
1. AddからLINEの`Send a Reply Message`を選択し、画像通りの設定をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/e6612db9-e0a5-e77d-9fd4-464b210d099b.png)
これで画像データ（jpg,pngなど）が送られてきた時の設定は完了です！</details>

### パターンC：PDFデータが送られてきた場合

<details><summary>PDFデータをGoogle Cloud Visionで認識、ChatGPTで整理し文書を自動返信する設定方法です
</summary>

1. AddからLINEの`Download a Message Attatchment`を選択し、画像通りの設定をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/d657a668-38b9-0deb-5912-376a7cd49b4a.png)
2. パターンA・Bで設定した`Router`と`Download a Message Attatchment`を繋げてください
`Router`の出っ張りをクリックし、`Label`は自分が確認しやすい名称、`Condition`より下を以下の画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/69b90658-8d45-d5f4-4013-ae7b2f8a8880.png)
3. Addから`Google Cloud Vision`の`Run Text Detection(OCR) within a File and Iterate the Result Array`を選択し、画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/29e819ad-f4b2-359f-4ee3-0587cdd5ebba.png)
1. Addから`OpenAI(ChatGPT,Whisper,DALL-E)`の`Create a Completion(GPT-3,GPT-3.5,GPT-4)`を選択し、画像通りに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/1296802f-fd2d-0e88-3ef6-91abc63acd02.png)
なお、`Message Content`がChatGPTへの命令文書なので、ここを変えると様々な文書に整理してくれるようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/79a7b75a-616a-9018-c7ff-eb56df6d5003.png)
1. AddからLINEの`Send a Reply Message`を選択し、画像通りの設定をしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637980/a11d080a-6dd3-799a-7971-17a67cfec161.png)
これでPDFデータが送られてきた時の設定は完了です！</details>

### この仕組みを使って業務改善を実践します！
業者さんからもらっている書類に関して、画像データ（現状は郵送された書類で試験）で送ってもらえないかテストをしています。

書類自体は画像データとして残してあれば良いですが、未提出の確認をするなどに画像データを見ながら遡ることは非効率であり、エクセルデータに提出日や更新期日などを入力し管理しています。
その入力作業を`LINE Bot`で整理されるテキスト化という部分で助けることで、業務改善に繋げていきたいと考えています。

# 発見と課題
催事業者さんの書類を誰でも同じ認識になるように整理・把握するために作り上げた`LINE Bot`ですが、画像から文字列を抽出したいという方は他にもいるのかもしれない、と思い色んな部署の方に試していただきました。
そんな中でいくつもの発見を得られたのでそちらをメモしておきます。
<details><summary>業務面</summary>

・催事業者さんの書類未記入や提出チェックがこれで完了できるとよりいいですね！
　⇒確かに・・・このままでは紙媒体をデータにしただけで紙は減っても作業負担はあまり減っていない！
 　 GoogleSheetsなどの活用でチェックなどができそうなのでまだまだ調査が必要です。

・`LINE Bot`で返信されたテキストと元となった添付ファイルを`Google Drive`上に保存できないかな？
　⇒一番多かった意見であり、私自身改善したいポイントです。
　　・文字化けがあるので、正確な記述を知るために残したい
　　・保管（紙でなくても）が必要だから残したい
　　という理由が大半でした。
　　文字化けは特に手書き文書データに多く、`Google Cloud Vision`でも限界がありそうですのでデータ保存は有効かも？

・会議でホワイトボードやノートに記述した文書を簡単にデータにできるので是非使いたい！
　⇒ありがたいご意見でした。他にも業務改善に活躍できそうなので色々な方に試してもらい意見いただきます。

・俗にいう「エクセル方眼紙」に記載されたデータを整理・自動保存することができたら凄い良いね！
　⇒確かに！取引先さまの情報などはエクセル書式に記載してもらっていますが、結局誰かが手打ちで一覧に入力し直すんですよね・・・
 　 まだエクセル方眼紙では試してないので確認してみよう。
 
</details>
<details><summary>私生活面</summary>

・子どもの字の学習機会に使えそう！うまく読み込めなかった字がある⇒その字だけ、詳しく書き方を教えられる！
　⇒AIでも読み込めない字を学習機会に使うとは私には全くない視点でした！業務改善で作り上げてきた仕組みですが、全く別の可能性に繋がる発見です。
 
・化粧品とか薬は字が小さすぎて読みにくいので、いつもは写真を撮って拡大したけど、これだと文書で出てくるからより理解しやすい！
　調べたいものが商品のことだったら、その商品の検索画面などに自動で移動するともっと助かる人いるかも？
 　⇒高齢の方でもLINEは利用している人が多いからより助かるよ！と補足情報もいただきました！
　　 文字の正確さに囚われていましたが、大きさで見にくい人にも見えやすくなるというメリットは気付いていなかったです。
　　 新たな仕組みもできそうだなという様々なヒントをいただきました。

</details>

ここまでの試験・実践して感じた課題が以下の通り
1. 手書きについては特に文字化けが出やすく、`LINE Bot`で返信をもらっても受け手側が「内容が違う」と混乱する恐れがありそうです
1. `Google Cloud Vision`だけでは、返ってきたテキストが非常に見にくく、活用しにくいものでした
1. `ChatGPT`を挟むとテキストの整理は抜群だが内容が100%原文そのままになりません（命令が雑かも？）
1. 今受け持っている催事業者さんの人数を考慮すると、現在の`Make`の無料容量制限内では収まらない可能性が高いため検証します

これらの課題をクリアしたものができないか鋭意調査中であり、今後も記事の更新を以て「ド初心者」の皆さまにも課題解決の流れをお伝えしていきたいと思います。

### 2024/03/06　追記
課題になっていた`Google Drive`や`Google Spread Sheet`への保存に対応できた記事を公開中！
送られてくる画像・ファイルの保存にも興味がある方は下記をご覧ください。

https://qiita.com/ikeuchi-kota/items/7e35be6313a5b60087b4


# 最後に
初めにもお伝えしましたが、私はプログラミングのpの字も知らない「ド初心者」です。今もプログラムコードは書けないままですし、これからも書くことはできないかもしれません。
でも、どんな人でも最初は「ド初心者」です。
そこからある課題を解決することを目的に、世の中に溢れる様々なツールを知り、まずは私が試して、他の人にも試してもらう。
その繰り返しをいくつもやっていくと段々と仕組みや言葉の意味がわかり、意見をもらえる仲間が増え、より大きな改善に繋がる一歩になっていくと思いました。

だから皆さん、恐れないでどんどん知らないヒトに、モノに触れてみてください。調べてみてください。話しかけてみてください。
「ド初心者」は特に、そしてそうでなくてもこの心構えをもって臨めば、見える世界が間違いなく変わっていく実感を得られるんだということを、最後にお伝えさせていただきます。

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