LINE BotでOCRとGoogle Spread Sheet保存を、ChatGPTを活用しGASで改良できた話

2024/02/27　一部記事を折り畳みへと変更しました
2024/03/06　画像から書類の判定を疑似的に実行できた続編記事のリンクを追記しました

業者さんの出店日数が多すぎて、Makeでは無料制限枠内に収まりません！

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

今回の記事は、過去に作った下記のMakeを活用したOCR・Google Spread Sheet保存の改良版（使用ツール変更）となります。

記事は読まなくても問題はありませんが、プログラムコードを使用しない「Make」を活用した記事なのでノーコードツールに興味があればご覧ください。

何故使用ツールを変更するに考えが至ったかというと、Makeを活用した際に下記の課題があり、それを解決することができないかと考えたためです。

課題①　Makeでは無料枠がかなり少ない（詳細は折り畳んでいます）

Makeでは1つのモジュールが動作するたび、`Operations`という、いわゆる1の容量が使用されます。 こちらは、30日間内で1,000`Operations`の無料枠があるのですが、過去の記事の仕組みでは1回LINE Botに画像を送ると7`Operations`を使用するため、実質140回ほど使用するとしばらくは無料で使用することができなくなります。

課題②　一方で、業者さんのLINE送信数（推定）は月間1,200回に及ぶ（詳細は折り畳んでいます）

催事業者さんには毎日の出店の度に、お店と相互に品質管理を確認したチェックリストを提出していただいてます。 参考として、2024年3月に出店する催事業者さんの数はおよそ50社、出店する日数は延べ1,200日！

つまり、最大で1,200回もの画像送信が発生する可能性があるのです。
また、もらっている資料は他にもあり、更に多くの紙やメールがやり取りされています。

現在は1社の業者さんに試験運用を実施していますが、仮に全業者さんがLINEを使用することになると、業者さんの出店日数が多すぎて、Makeでは無料制限枠内に収まりません！

課題③　Teachable Machineとの連携ができていない（詳細は折り畳んでいます）

現時点で、Teachable Machineによる送られた画像の内容判別はMakeではできておりません。 こちらは、あると便利な機能なので実装したいのですが・・・

課題解決のため、LINE Botの作り方ついて調べたところ、Google Apps Script（以下、GASと表記）を活用することで、Makeで作ったときとほぼ同じ動作を作れそうだとわかりましたので、まずはそちらを試してみることにしました。

何をしたいのか、の整理

今回は、やりたいことがやや複雑なので図でまとめてみました。

【感謝】やりたかったことをほぼ完成させている記事を知った！

この度やりたいことを実施するにあたり、なんとほぼ同じことをされている記事に出会いました！

こちらの記事では、GASを使用してOCRをし、Google DriveやGoogle Spread Sheetへの保存のプログラムコードを作成しているだけでなく、LINE Botの設定の際にメニューなどの画面を追加できるリッチメニューの設定方法にも触れています。

まずは、この記事を100%真似ることから始めました。

これより先の記事は上記をすべて読み終え、設定方法を理解していることを前提としています。
本当に凄いわかりやすい記事なので、是非読んで試してみてください！

GASを活用してLINE Botで送られた画像のOCRをかけ、テキストデータと画像を保存することに成功した！

まずは結果から、動作状況は下記動画をご確認ください。

現在の最新GASでのLINE Bot状況
Teachable Machineの連携が上手くいかないんだよなぁ、誰か知ってる人いたら教えて欲しいです！#protoout #ブックオフでプロポーズするダイエット中のヤマト運輸#GoogleAppsScript #LINEBot pic.twitter.com/bH6f1jLynE

— いけちゃん (@since2023_kota) February 20, 2024

上記を実現したGASのプログラムコード

先ほどの記事を100%真似ることから始まり、コードが上手く動作しなかった部分を修正し、他にやりたいことを追加実装した上で、最終的に下記コードで完成しました。

コード使用時の注意点

1. "自分のチャネルアクセストークンを入れてください"に、自分のLINE Messaging APIのチャネルアクセストークンを入力してください
2. "自分のGoogle DriveのフォルダIDを入れてください"に、LINEから送られてきた画像を保存したいGoogle DriveのフォルダIDを入力してください
3. "画像を●●●で受け取り、記録しました。"に、LINEの返信メッセージを入力してください。

//★★LINE Messaging APIのチャネルアクセストークン★★
var LINE_ACCESS_TOKEN = "自分のチャネルアクセストークンを入れてください";

//★★画像を保存するフォルダーID★★
var GOOGLE_DRIVE_FOLDER_ID = "自分のGoogle DriveのフォルダIDを入れてください";

//ファイル名に使う現在日時をMomentライブラリーを使って取得
var date = Moment.moment(); //現在日時を取得
var formattedDate = date.format("YYYYMMDD_HHmmss");

//LINE Messaging APIからPOST送信を受けたときに起動する
// e はJSON文字列
function doPost(e){
  if (typeof e === "undefined"){
    //eがundefinedの場合動作を終了する
    return;
  } 

  //JSON文字列をパース(解析)し、変数jsonに格納する
  var json = JSON.parse(e.postData.contents);

  //受信したメッセージ情報を変数に格納する
  var reply_token = json.events[0].replyToken; //reply token
  var messageId = json.events[0].message.id; //メッセージID
  var messageType = json.events[0].message.type; //メッセージタイプ

  //LINEで送信されたものが画像以外の場合、LINEで返信し動作を終了する
  if(messageType !== "image"){
    var messageNotImage = "画像を送信してください"
    //変数reply_tokenとmessageNotImageを関数sendMessageに渡し、sendMessageを起動する
    sendMessage(reply_token, messageNotImage)
    return;
  }

  var LINE_END_POINT = "https://api-data.line.me/v2/bot/message/" + messageId + "/content";
  
  //変数LINE_END_POINTとreply_tokenを関数get_ocr_Imageに渡し、get_ocr_Imageを起動する
  getImage(LINE_END_POINT, reply_token);
}

//Blob形式で画像を取得する
function getImage(LINE_END_POINT, reply_token){
  try {
    var url = LINE_END_POINT;

    var headers = {
      "Content-Type": "application/json; charset=UTF-8",
      "Authorization": "Bearer " + LINE_ACCESS_TOKEN
    };

    var options = {
      "method" : "get",
      "headers" : headers,
    };

    var res = UrlFetchApp.fetch(url, options);

    //Blob形式で画像を取得し、ファイル名を設定する
    //ファイル名: LINE画像_YYYYMMDD_HHmmss.png
    var imageBlob = res.getBlob().getAs("image/png").setName("LINE画像_" + formattedDate + ".png")

    //変数imageBlobとreply_tokenを関数saveImageに渡し、saveImageを起動する
    save_ocr_Image(imageBlob, reply_token)

  } catch(e) {
    //例外エラーが起きた時にログを残す
    Logger.log(e.message);
  }
}

//画像をGoogle Driveのフォルダーに画像を保存（アップロード）、OCRをかけテキストを取得。
//保存された画像、作成されたドキュメントファイルは残す。
//OCRで得られたテキストをLine Botへ返信する。
function save_ocr_Image(imageBlob, reply_token){
  try{
    //画像をGoogle Driveのフォルダーに画像を保存（アップロード）
    var folder = DriveApp.getFolderById(GOOGLE_DRIVE_FOLDER_ID);
    var file = folder.createFile(imageBlob);

    //ここからOCRをかけていく
    var files = folder.getFiles();
    while (files.hasNext()) {
      var file = files.next();
      // ファイルの種類が画像であることを確認する
      if (file.getMimeType().indexOf('image/') !== -1) {
        var resource = {
          title: "OCR結果_" + formattedDate, // 生成されるGoogleドキュメントのファイル名
          mimeType: "application/vnd.google-apps.document" // Googleドキュメント形式
        };
        var option = {
          "ocr": true,// OCRを行うかの設定です
          "ocrLanguage": "ja",// OCRを行う言語の設定です
        };
        var image = Drive.Files.copy(resource, file.getId(), option);

        //テキストを加工する
        var text_O = DocumentApp.openById(image.id).getBody().getText();
        var text_R01 = text_O.replace(/([^ -~｡-ﾟ]),/g, '$1，')   
                             .replace(/([^ -~｡-ﾟ])\./g, '$1．')   
                             .replace(/(\d)\．/g, '$1\.')        
                             .replace(/([ -~｡-ﾟ])、/g, '$1, ')    
                             .replace(/([ -~｡-ﾟ])。/g, '$1. ')    
                             .replace(/([^ -~｡-ﾟ])\(/g, '$1（')   
                             .replace(/([^ -~｡-ﾟ])\)/g, '$1）')   
                             .replace(/\(([^ -~｡-ﾟ])/g, '（$1')   
                             .replace(/\)([^ -~｡-ﾟ])/g, '）$1')   
                             .replace(/([^ -~｡-ﾟ])\:/g, '$1：')  
                             .replace(/([^ -~｡-ﾟ]) /g, '$1');     
        var text_R02 = text_R01.match(/(，|．)/) ? text_R01.replace(/([^ -~｡-ﾟ])、/g, '$1，').replace(/([^ -~｡-ﾟ])。/g, '$1．') : text_R01;
        var text = text_R02;

        // OCRで得られたテキストを、現在のスプレッドシートの一番最終行+1行に張り付ける。
        var ss = SpreadsheetApp.getActiveSpreadsheet()
        var sheet = ss.getActiveSheet()
        var lastRow = sheet.getLastRow();
        sheet.getRange(lastRow+1, 1).setValue(text);

        // 画像の保管先URLも記録する
        sheet.getRange(lastRow+1, 2).setValue(file.getUrl());

        // OCRで得られたテキストを、Line Botへ返信する。
        var message = "画像を●●●で受け取り、記録しました。"
        //変数reply_tokenとmessageを関数sendMessageに渡し、sendMessageを起動する
        sendMessage(reply_token, message);

        // アップロードした写真、作成したOCRファイルが不要であれば、以下のコードをここに書いて削除する（先頭の"//"を消す）
        //file.setTrashed(true); //アップロードした写真を削除
        Drive.Files.remove(image.id); //作成したOCRファイルを削除

        break; // 一つだけ処理するためループを抜ける
      }
    }
  } catch(e){
    //例外エラーが起きた時にログを残す
    Logger.log(e);
  }
}

//ユーザーにメッセージを送信する
function sendMessage(reply_token, text){
  //返信先URL
  var replyUrl = "https://api.line.me/v2/bot/message/reply";

  var headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + LINE_ACCESS_TOKEN
  };
  
  var postData = {
    "replyToken": reply_token,
    "messages": [{
                  "type": "text",
                  "text": text
                  }]
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  //LINE Messaging APIにデータを送信する
  UrlFetchApp.fetch(replyUrl, options);
}

実装時の注意点

先ほどの記事を100%真似る際、コードの入力はGoogle Drive上から直接GASを選択しますが、本記事ではGoogle Spread Sheetを立ち上げ、そちらの拡張機能から選択できるGASを選択して貼り付けてください。

方法は下記の通りです。

何が解決したの？

どこまでが出来たかも図でまとめてみました。

途中でつまずいた部分：設定しても動かない・・・助けて、ChatGPT！

上記の動作実現にあたり、いくつかの課題がありましたので紹介いたします。
解決にあたってはChatGPTを多く活用しています、凄いぞChatGPT！

解決した課題

課題①　アクセスできるユーザーの制限（詳細は折り畳んでいます）

下記画像ですが、会社アカウントでのGASを使用したところ、デプロイの設定時にアクセスできるユーザーが会社内の全員のみに制限されていました。

GASのプログラムコードを作成後、必ずデプロイの設定が必要になりますが、その際にアクセスできるユーザーが全員以外の場合はLINE Botが動作しません。

解決①　個人アカウントでの使用で制限解除（折り畳んでいます）

課題解決を優先し、今回に限り個人アカウントで作成したところ、無事アクセスできるユーザーを全員に設定することが出来ました。

この設定により、LINE Botの動作に成功しました！

課題②　OCRから先が動作しない（折り畳んでいます）

記事を100%真似る段階でプログラムコードをコピーしそのまま使用したのですが、どうしてもOCRが進まない状況となってしまいました。 具体的には、画像が`Google Drive`まで保存されるにも関わらず、下記コードから先の動作が確認できなくなり、`Google Spread Sheet`への保存がなされず、`LINE Bot`への返信もされない状況となりました。

//ここからOCRをかけていく
let a = Drive.Children.list(GOOGLE_DRIVE_FOLDER_ID)

この部分については、プログラムコードに詳しい方にエラー箇所を調べる方法を伺い、何度もChatGPTに確認したのですが、聞き方が悪いらしく正確な動作をするまでに時間がかかりました。
ところが・・・

解決②　質問内容の変更（折り畳んでいます）

最終的に「え、こんな聞き方でも良かったの？」という内容で修正が出来ました！ その方法については下記の通りです。

ChatGPTのおかげでOCRされない問題が解決！
以前Makeで作ったLINE Botを活用したOCRとGoogleSpreadSheetへの画像およびテキストデータ保存が出来るようになりました！！#protoout#ブックオフでプロポーズするダイエット中のヤマト運輸#GoogleAppsScript#OCR#LINEBot#ChatGPT pic.twitter.com/laSeiVK6fb

— いけちゃん (@since2023_kota) February 18, 2024

なんと、「このコードについての問題点を確認し、修正コードを提供してください。」という質問だけで十分でした。
これまでも様々な場面でChatGPTを使ってきたので、かなり細かい指示が必要だと考えていたのですが、思いのほかAIに対する質問の常識はこうだ！という考えに囚われていたようです。

解決できていない課題

一つだけ、解決したいのにできていない課題があります。

Teachable Machineで書類を判定するGASのプログラムコードが書けていない
☞何度もChatGPTも駆使して試しているのですが、実装に至っておりません。
これが実装できると、書類の仕分け、催促も非常にスムーズなのですが・・・

解決できるように、今も鋭意検索中ですので、今後の更新をお待ちください！

2024/03/06追記

課題になっていた書類の判定を、テキストデータから疑似的に行うことに成功！
続編記事を公開しましたのでご覧ください。

試してもらう業者さんを増やしてさらなるブラッシュアップ中！

無料で無制限にできるLINE Botを作ることが出来ましたので、試してもらう業者さんを1社⇒4社に増やし、意見を伺っている最中です。

今回試験をしてもらう業者さんは比較的多く催事の出店をしており、4社だけで延べ300日程度となるため、上手に運用が出来ればいよいよ完全実装　⇒　紙のやり取りゼロ化への目標達成に大きく近づきます。
具体的な声を伺い、そちらも踏まえて新たに改良に繋げていきます。

まとめ：プログラムコードを知らなくても、書いて、修正して、実装できる！

ここまでなんとなく読まれた方は、「いけちゃんはプログラムまで書けるようになったのか」とか「知らないからやっぱり難しいよ・・・」と感じるかもしれません。
ですが、私は今もプログラムコードは一つも書けません（汗）。

ChatGPTは、こんな風に何も知らない人間でも簡単に扱えるし、仕組みづくりをすることができるので本当に凄い！ということを知っていただきたかったです。

皆さんも、簡単なことからでも「こういうことが出来たらな・・・」と思ったら気軽にChatGPTに聞いてみてください。
思いもよらない解決方法や、とんでもない業務改善に繋がるかも！？

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