OCRを利用してコラボフローの申請を楽にしようとしてみている話

[コラボフロー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/collaboflow) ３日目の記事です！

地球防衛軍6というゲームにハマっているmikoです。
INFERNO（最高難易度）は地獄…。

---

ふと「OCRを利用して申請書への入力の手間を省けないか？」と思ったので、
JavaScriptライブラリを利用しつつ、挑戦し始めた人間の話（序章）です。

## Tesseract.js

今回利用するのは、JavaScriptでOCRライブラリといえばこれ！
「[Tesseract.js](https://tesseract.projectnaptha.com/)」です！

https://tesseract.projectnaptha.com/

英語、日本語に限らず100以上の言語に対応している化け物みたいなライブラリです。

## 早速、コラボフローで試してみた

まずはOCR対象となる画像を画像パーツへアップロードし、
右下にある「Let's OCR!!!☺」をクリックすると、
読み取り結果にOCR結果が出力される簡単なカスタマイズを試してみました。

### 申請フォーム
フォームは以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136361/3e5d943a-0f2c-acf6-f5e9-309cc8cfd6da.png)

ラベルパーツには以下のHTMLがセットされています。
``` html
<a href="javascript:void(0)" onclick="letsOCR();return false;">Let's OCR!!!☺</a>
```

### JavaScript

``` OCR_Sample.js
'use strict';

// OCR結果の出力対象となるテキストエリアパーツのfid
const outputTextFid = 'fidTextArea';
// OCR対象となる画像パーツのfid
const ocrTargetFid = 'fidImage';

function letsOCR() {
    const attachContent = document.querySelector(`input[name="${ocrTargetFid}"]`);
    const fileId = attachContent.value.split('|')[1];

    let url = `${collaboflow.page.api_endpoint}/v1/files/${fileId}/download`;
    Tesseract.recognize(
        url,
        'jpn',
        { logger: m => console.log(m) }
    ).then(({ data: { text } }) => {
        document.getElementById(outputTextFid).value = text;
    });
}
```


## OCR - 例１

まずは、弊社のHPの一部を読み取ってみて、
文字認識してみました。

https://www.collabo-style.co.jp/

#### 読み取り画像

読み取るのは以下の画像です。

![コラボフロー - 製品紹介サイトより.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136361/361a21bc-5d87-970f-7859-afb9415fa4a1.jpeg)


![OCR.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136361/70099f59-9815-2ed6-489c-ba5705659eba.gif)

##### 読み取り結果

```
申 請 ・ 承 認 業 務 を デ ジ タ ル 化
直 感 的 な 操 作 性 で 使 い 手 を 選 ば な い
筆 単 ク ラ ウ ド ワ ー ク フ ロ ー

C CcollaboflouQ0 コ ラ ボ っ ロ -
```


少し違う部分がありますが、
ほぼ画像通りの文字が出力されました。

（´-`）.｡oO（コラボっロって何かかわいいな…


### OCR - 例２

次は文章のくだらなさが気に入っていて、お気に入り登録までしている
開発者ブログの記事から一部抜粋してきました。

https://www.collabo-style.co.jp/developer-blog/2016121601/

![OCR2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136361/6ccd716e-8d57-b976-1d34-a7d819350dba.gif)


OCRの結果が出るの早いなーって思っていたけど、


**ん？？？**

(;つД⊂)ｺﾞｼｺﾞｼ

何かおかしい文字が見えたような・・・？


![こに.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136361/c59a967f-6e4c-d6a8-b2fa-30c62de75414.jpeg)

**怨年会**ってなにそれ怖い・・・
年末にやるもんじゃない・・・


#### 読み取り結果

読み取り結果の全文です。

```
こ ん に ち は 。 こ の 時 期 は も っ 鍋 と ピ ー ル が し く な る コ ニ ー こ と 小 西 で む 。

昂 い も の で 気 づ け ば ぼ も う ⑫ 月 も 半 ば 、、、 怨 年 会 シ ー ズ ン 真 っ 只 中 で す ね !

私 も つ い 昨 日 忌 年 会 が あ り ま し て 、 二 日 酔 い と 闔 い つ つ ブ ロ グ を 書 い て お り ま す ( 沙 )

二 目 酔 い に 効 く も の と し て よ く 耳 に す る の ほ は シ ジ ミ で す が 、 実 は ト マ ト も 効 く ら し い で す !

ま る か じ り で も い い で す が 、 ト マ ト ジ ュ ー ス だ と 効 果 は 信 増 ①

さ ら に お 江 を 飲 む 時 に 一 繍 に 飲 む と 、 凶 中 の ア ル コ ー ル 濃 度 が ③ 副 低 下 し 、 体 内 か ら の ア ル コ ー ル 消 失 も ⑤0 分 早 ま る と い う
研 究 結 果 あ る よ う で す 。

な る ほ ど 。 。 。 だ か ら レ ッ ド ア イ は 酔 い に く い の か 。 。 。 ( 私 だ け ? )

ま ぁ 何 は と も あ れ 二 日 酔 い に な ら な い 事 が 一 番 な の で 、 お 江 は ほ ど ほ ど に 制 限 し な い と で す ね 。 。 。
ー 前 限 ②

副 陽 ・・・ 割 限 ・・・ は っ ⑲

コ ラ ボ フ ロ ー に ア ク セ ス 刊 風 の 機 膨 が 実 裕 さ れ ま し た ! ( 笑 )
```

文字が小さい＆細いと認識率がそこそこ下がりました。
OCRの前に

* 画像を大きくする
* 文字を太くする

これが次の課題になりそうです。

---

さて、３日目が空いていたので何となく始めて見ましたが、
作り込めば何かに使えるのかも？と思いました。

Excel添付取込パーツの画像・PDF版みたいなのが作れちゃう・・・？？

何か進展や要望があれば続編を書こうかと思います✋