LINE botとMakeでOCRに挑戦！LINEで食品表示の画像をテキストに変換しよう

## 初めて使うツールでいろいろやってみよう！

はじめまして、こんにちは。
私は全然ITとは関係ない会社で働く会社員です。
（食品検査の仕事をしています。）

仕事では紙にまみれた生活をしており、デジタルとかよくわかりません。
今回、ノーコードでLINEbotを作成できるツールを知る機会があり、
せっかくなのでいろいろ試してみたいと思い、筆をとりました。

仕事では紙に印刷された文字をデータ入力するという機会も多く、OCRに興味があります。
食品検査の仕事なので、依頼品の食品のパッケージから表示部分の情報を読んで、
社内の受付システムに入力するという作業は毎日発生しています。
（食品表示というのは原材料や内容量、アレルゲン情報や賞味期限などが記載された部分のことです。）
そこで、表示部分をLINEで撮影して、その画像をOCRしてテキストとして見れたら
検索したりコピペするときに便利なんじゃないのと思い、挑戦しました。

なお、参考にした資料を初心者がわからないなりに真似したため、
Google Apps Scriptを使うなど、完全ノーコードではできませんでした。

## 使用したツール
* LINE Developer
* MAKE（旧integromat）
* Googleドライブ
* Googleスプレッドシート
* Google Apps Script（GAS）

### 作りたかった流れ
LINEで写真を撮影し、画像をbotへ送る → 画像をgoogleドライブに保存 → googleドライブでGASを動かしてOCRで文字列を得る
→ 文字列をGoogleスプレッドシートに記入 → Googleスプレッドシートの文字列を読んでLINEに返す


## 完成品
![Screenshot_20220529-184112提出.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/bbbe353d-c3c8-2d75-09b3-4c1bd2c135f2.png)

## Makeのシナリオ画面
![シナリオ提出.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/c613618e-125d-7b99-4ad0-75c74eba775e.png)

## 動画

https://twitter.com/i/status/1530859783267713024

## 参考にした資料

https://zenn.dev/inoue2002/articles/a94013f55940ac

https://note.com/keitafukui/n/n6033d8c53cf1

https://qiita.com/n0bisuke/items/477329e80fc85cb8088d

https://zenn.dev/harachan/articles/d910ef8b89720b

## Google Apps Script
OCRの処理の部分は参考にした資料からまるごとコピーさせていただきました。
<details><summary><b>ソースコードを表示（折りたたみ）</b></summary><div>

~~~ google apps script:OCR.gs

//OCRの処理の部分
const folderId = "画像が入るフォルダID"
function myFunction() {
  // フォルダーに入っているファイル一覧を取得
  let a = Drive.Children.list(folderId)
  
  // 設定事項を書いていく
  let resource = {
    title: "test" // ここは途中で生成されるファイル名の指定です（ファイルを消すのでなんでもいいです）
  };
  let option = {
    "ocr": true,// OCRを行うかの設定です
    "ocrLanguage": "ja",// OCRを行う言語の設定です
  }
  
  // 取得したファイル一覧の最初のもののfileIdを変数に格納します
  let fileId = a.items[0].id
  // 指定したfileIdのファイルをコピーします
  let image = Drive.Files.copy(resource, fileId, option)
  // コピー先ファイルにはOCRのデータが含まれているのでテキストを取得します
  let text = DocumentApp.openById(image.id).getBody().getText();
  // コピー先ファイルはもう不要なので削除
  Drive.Files.remove(image.id)
  // OCRした内容を表示
  console.log(text)

//OCRの処理おわり

//ここから書き足した部分
//OCRで取得したtextをスプレッドシートに書き込む処理
  var id = "結果を書き込むスプレッドシートのID"
  var ss = SpreadsheetApp.openById(id)
  var sheet = ss.getActiveSheet()
  sheet.getRange("A1").setValue(text)

//OCR済みの画像ファイルを別のフォルダに移す処理
　var file = DriveApp.getFileById(fileId);
  
  //移動先のフォルダを取得
  var folder = DriveApp.getFolderById("移動先の別のフォルダID");
  
  //ファイルを移動
  file.moveTo(folder);

} 
~~~
</div></details>

## 反省点
今回、なんとか動くものが作れましたが、後半かなり力技でねじ伏せているのでもっと時間をかけて調べたいです。
もっと時間があれば、LINEに画像以外のものが投稿された場合の分岐なども設定できそうでしたが、
残念ながらここまで。

（無理やりつなげたところ）
参考資料のスクリプトをそのままコピーしてGASのファイルを作ったものの、
OCRで得られた文字列をどうやって取り出すのかわかりませんでした。
そこで、GASのスクリプトに直接コードを書き込んで、GoogleスプレッドシートのA1にOCRのテキストを入れる処理をしています。
また、書き込んだ後の画像は別のフォルダに移す処理も書き込んでいます。
（私はExcelのVBAだけわかるのでGASも調べたらなんとかなりそうな雰囲気でした。）

さらにGASの起動方法もよくわからなかったので、GAS起動のトリガーを1分ごとに設定し、
OCRで読み込まれた画像が入るフォルダに対して1分ごとにこのGASが実行されています。

以上のことから、画像がフォルダに入ったタイミングでOCR用のGASが動かないため、
MakeのToolsで30秒待機しています。
なので、非常にもっさりした動きではありますが、一応動いたので目標は達成できたと思いたいです。

## 今後の展望
Makeは非常に便利なツールで、使いこなせたら便利なものが簡単に作れそうです。
しかし、日本語の情報が少ないのがなかなか辛かったです。
（Google翻訳で戦いましたが、私には厳しかったです。）
GASとかのほうが情報が多いので、うまくノーコードツールと組み合わせて、
自分のやりたいことを達成すれば初心者でもなんとかいけそうな気がしました。

以上、御覧いただきましてありがとうございました。