【kintone x OCR】～OCR結果確認編～ kintoneのOCRプラグインを開発する⑦【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（OCR結果確認編）の目標

前回（⑥）の通り、最終目標については、達成出来ました↓。

ただし、現状ではOCR結果が正しいことを確認するためには、OCR結果毎に対象画像を表示させ、チェックしていく必要があり、あまり効率的とは言えません。そこで、OCR結果毎に対象画像が表示されるようにすることで、OCR結果と対象画像を並べてチェックできるようにしたいと思います。

具体的な方法

取得した値毎に座標(X,Y,W,H)を取得します。特にテーブルについては、行ごとの座標を取得します。 その上で、取得した座標に沿って、元画像を切り取り、その結果（切り取った画像）をアップロードしていきます。切り取りにはcanvasを利用します。

get_imagedata_croped = function(img, x, y, w, h) {
    const canvas  = document.createElement('canvas');
    canvas.width  = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    return ctx.getImageData(x, y, w, h);
};

その結果、OCR結果と対象画像を並べて表示することが可能になりました。

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください（自己責任でお願いします）

ここまでで出来たこと

以上で、長々と行ってきた「kintoneのOCRプラグインを開発」は完成にしたいと思います。 繰り返しになりますが、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けますので、実際の動作やコード等を確認したいかたは、ご利用ください。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

【kintone x OCR】～マスター置換編～ kintoneのOCRプラグインを開発する⑥【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（マスター置換編）の目標

前回（⑤）の最後で今後の課題とした、「品名」列の値を取得したいと思います。 一般的に品名や商品名等はその一覧（マスター）を作成しているケースが多いかと思います。今回も「品名」列にはマスターに記載された商品名しか記載されないという仮定のもと、このマスターを利用した置換を行い、値を取得したいと思います。

具体的な取得方法

まず、csv形式のマスターを準備します。今回は下記の品名マスターがあると仮定します。 その上で、取得した値をマスターと付け合わせ、最も近い品名に置換することで、正しい値を取得することが出来ました。 1電子部品A → 電子部品A 2|工作機械 → 工作機械 4運送機器 → 運送機器

また、実務上よくあるパターンとして、文書には品名が記載されているが、後続処理では品名に紐づく品名コードが必要な場合も多々あるかと思います。そういったパターンに対応するため、品名と併せて品名コードを記載した場合には、OCR結果→品名→品名コードと変換することで、OCR結果から品名コードに変換した値を取得することができました。 マスターを上記にした場合、下記のように値を取得します。 ＊マスターに品名コードが記載されている場合（電子部品Aと工作機械）は、品名コードに変換されます。

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください（自己責任でお願いします）

今後の課題

晴れて、最終目標である請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を全て取得することが出来ました！

取り組みを始めた当初はここまで上手く取得できるとは思ってもみませんでした。

ただし、OCRの認識精度は100%ではありません。Cloud Visionの認識精度は非常に高い（恐らく世界一）ですが、文書の状態（汚れ・歪み等）によっては、誤認識してしまいます。

そこで、実務上ではOCRで取得した値を人がチェックするという工程が必須になります。次回はこのチェック機能を考えたいと思います。

ここまでで出来たこと

＊KEYWORD検索（請求番号・支払期限・振込先）、ZONE検索（請求元）、正規表現検索（明細（数量・単位・金額））文字列置換（単価）に加え、マスター置換を利用することで品名（品名コード）を含めた、すべての値を取得出来ました！

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

【kintone x OCR】～文字列置換編～ kintoneのOCRプラグインを開発する⑤【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（文字列置換編）の目標

前回（④）の最後で今後の課題とした、文字単位での認識違いの対策を説明したいと思います。対象となるのは↓の「単価」列の5行目で100を10Dと認識違いしていますので、100と取得できるようにしたいと思います。

具体的な取得方法

今回の「単価」列には、数字しか記載されません。そのため、数字以外の文字で特に数字に間違い易い文字については、数字と間違って認識している可能性が高いと思われます。

そこで、取得した値の中に数字に間違い易い文字（下記参照）が含まれている場合は、間違い易い数字に変換することとします。 ＊例えば、今回のようにDと認識した場合は0に変換します。

for (let i = 0; i < replacecsv.length; i++) {
   description = description.replace(replacecsv[i].Column1,replacecsv[i].Column2);
}

そうすることで、「単価」列が上手く取得出来ました。

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください（自己責任でお願いします）

今後の課題

「品名」列の結果を見ると、その左側のseq番号を取得してしまっています。この場合、正規表現では上手くパターン化出来ないため、他の方法が必要です。

そのため、次回はこの品名列の値を取得することを目標とします。

ここまでで出来たこと

＊KEYWORD検索（請求番号・支払期限・振込先）、ZONE検索（請求元）、正規表現検索（明細（数量・単位・金額））に加え、文字列置換で単価まで取得出来ました。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

【kintone x OCR】～正規表現検索編～ kintoneのOCRプラグインを開発する④【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

https://ks-kiki.hp.peraichi.com/最終目標 kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（正規表現検索編）の目標

前回（③）で今後の課題とした、近接した値を取得するために、正規表現を利用した値の取得を行いたいと思います。＊ここ↓から「数量」と「単位」の値を上手く取得したいと思います。 正規表現の詳細：https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE

具体的な取得方法

今回の文書では、数量の列には数字のみ（今回であれば1,3,5）しか記載されません。逆にに単位の列には数字以外しか記載されません。このように対象文字列のパターンを利用して値を取得する方法を正規表現検索と定義します。

KEYWORD検索+ZONE検索で取得した値の中から、予め定めた「正規表現」に一致しない値については、対象から除外します。具体的には、「数量」は数字のみなので正規表現に従い[0-9]とし、「単位」列は正規表現に従い[^0-9]と定めます。

//seiki→[0-9]や[^0-9]
//seiki.test()で正規表現（seiki）に合致しているか判定
let seiki;
for(let i = 0; i < list.length; i++){
   if(seiki && seiki.test(list[i].String)){
      result.push(list[i]);
   }
}

そうすることで、「数量」列と「単位」列の値を上手く取得（分離）出来ました。

kintoneアカウントを持っていない方

下記より、メールアドレス登録のみでご利用いただけます。 OCRシステム　ユーザー登録: https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

kintoneアカウントを持っている方

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用方法：https://qiita.com/Lastonemile/items/c40cdd8543f14496c0c4

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja ＊利用時にCloud Visionの利用料金が発生する可能性があります。（2020/12/24現在 月間1000ユニットまで無料で利用可能です。） Cloud Vision API料金：https://cloud.google.com/vision/pricing?hl=ja APIキー取得方法：https://tanoshimane.stores.jp/news/602220196728be15433783e4 APIキーの管理には十分ご注意ください（自己責任でお願いします）

今後の課題

「単価」列の結果を見ると、5行目で実際は100が正しいのですが、10D（最後がアルファベットのD）になっています。＊実は元文書も10Dなのですが、100を10Dと認識違いしたと仮定してください。

この場合、「正規表現検索」で数字のみと指定してしまうと、文字列自体を除外してしまい、値をロストします。そのため、次回は文字単位での認識違いへの対策を記載したいと思います。

ここまでで出来たこと

＊KEYWORD検索（請求番号・支払期限・振込先）、ZONE検索（請求元）に加え、正規表現検索を補完することで明細（数量・単位・金額）まで取得出来ました。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

関連記事

kintone OCRプラグイン　Vision API arr.by LOM 利用方法 kintone OCRプラグイン　文書テンプレート作成方法 kintoneのOCRプラグインを開発する① kintoneのOCRプラグインを開発する② kintoneのOCRプラグインを開発する③

【kintone x OCR】～ZONE検索編～ kintoneのOCRプラグインを開発する③【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（ZONE検索編）の目標

②でKEYWORDを利用して値を取得する方法を記載しました。

今回は②の今後の課題であげたKEYWORDがない場合、今回の最終目標に沿えば「請求元」の値を取得したいと思います。

具体的な取得方法

ZONE検索では対象の値の座標（ZONE）を指定することで、その範囲内の値を対象の値として取得します。（単純です）

当然ながら、何らかの理由（書類が曲がっていたり、文面の都合等で座標が変わった場合　等）で、この座標(ZONE）内に値が入らなかった場合は値をロストすることになります。

KEYWORD検索の補完

ZONE検索のみでは値を取得出来ないことが多いですが、KEYWORD検索と組み合わせることで、KEYWORD検索のデメリットを補完出来ます。 組み合わせる場合には、ZONEを厳密には指定せずに、書類が曲がっていたり、文面の都合等で座標が変わった場合でも必ず入る範囲（大体真ん中より上 等）をZONEに指定します。そのZONE内のみでKEYWORD検索を行うことにより、文書中にKEYWORDが複数存在する場合や、KEYWORD検索の複数文字列を取得する場合に別の値も取得してしまう場合の対策になります。

kintoneアカウントを持っていない方

ここまでの説明及び、以降の記事内容も網羅したOCRシステムが、メールアドレス登録のみでご利用いただけます。 OCRシステム　ユーザー登録: https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

kintoneアカウントを持っている方

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用方法：https://qiita.com/Lastonemile/items/c40cdd8543f14496c0c4

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja ＊利用時にCloud Visionの利用料金が発生する可能性があります。（2020/12/24現在 月間1000ユニットまで無料で利用可能です。） Cloud Vision API料金：https://cloud.google.com/vision/pricing?hl=ja APIキー取得方法：https://tanoshimane.stores.jp/news/602220196728be15433783e4 APIキーの管理には十分ご注意ください（自己責任でお願いします）

今後の課題

座標を利用したKEYWORD検索+ZONE検索で、最終目標の請求番号・支払期限・振込先・請求元の値を取得することが出来るようになりました。

しかし、明細（品名・数量・・・のテーブル部分）が、一部上手く取得出来ませんでした。

＊明細については、KEYWORD検索「下複数」+ZONE検索を応用して取得しています。

幾つか問題がありますが、まず「数量」列と「単位」列の値を取得できることを最初の課題とします。

この問題は特にテーブルで発生しやすく、「数量」列と「単位」列の座標が近接しており、ZONEの設定では上手く分離できずに、「数量」列と「単位」列を混ざって取得してしまったことが原因です。（座標を厳密に指定しすぎると座標がズレた際に困りますし、大雑把に指定しすぎると両列の値を取得してしまいます。）

次回は、この「数量」と「単位」を例に、ZONE検索では、上手く分離できない値をどのように取得するかを記載したいと思います。

ここまでで出来たこと

＊KEYWORD検索で取得出来る値（請求番号・支払期限・振込先）に加え、ZONE検索で請求元が取得できるようになりました。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

関連記事

kintone OCRプラグイン　Vision API arr.by LOM 利用方法 kintone OCRプラグイン　文書テンプレート作成方法 kintoneのOCRプラグインを開発する① kintoneのOCRプラグインを開発する②

【kintone x OCR】～KEYWORD検索編～ kintoneのOCRプラグインを開発する②【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、プラグイン（テンプレート）のダウンロードからkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

今回（KEYWORD検索編）の目標

①でCloud VisionのOCR結果をKintone上で取得するプラグインを作成しました。 今回はその結果を利用して、必要な情報（請求番号・支払期限・振込先・請求元・明細）を取得していこうと思います。

早速ですが、取得する方法はいくつか考えつきます。（私の知識の範囲ですが）下記に列挙してみたいと思います。

①AI（機械学習）を利用して取得する。 ②決まった文字列（KEYWORD）を利用して取得する。 ③座標（ZONE）を利用して取得する。 ④正規表現を利用して取得する。

先に記載しておきますが、①については今の私の頭では無理なので、不採用とします。（私見ですが、①の方法は構築難度もさることながら、学習データの準備や補正等、余程の大会社でなければ現実的には利用段階にはないと思います）

残りの②～④については、（後述しますが）それぞれ得手不得手があります。そこで最終的には、それぞれを補完するために②～④を組み合わせることで、精度を高めていきたいと思いますが、今回のKEYWORD検索編では「②決まった文字列（KEYWORD）を利用して取得する」方法にフォーカスしてご説明したいと思います。

KEYWORD検索の定義

例として上の請求書の請求番号を取得したいとします。 当然、取得したい請求番号の値（今回であれば123456789）については、請求書が変わるたびに変化します。しかし、必ず「請求番号」という項目名（KEYWORD）の右側に値が記載されています。

このようにKEYWORDを手掛かりに取得する方法をKEYWORD検索と定義します。

ちなみに、次の記事で「座標（ZONE）を利用」する方法も紹介しますが、この「座標（ZONE）を利用」方法に対するKEYWORD検索のメリットはKEYWORDの位置が変わっても、文書上にKEYWORDが存在していれば、値を取得できるところにあります。

尚、今回も①に引き続きkintone上でCloud Visionを利用している想定で、Cloud Visionのresponseから値を取得する前提で話を進めていきます。 kintone上でのCloud Visionの利用(前回記事）：https://qiita.com/Lastonemile/items/55e6a159a4c2bcc9dab4

具体的な取得方法、その前に

Cloud Visionのresponseには、文字（description）だけでなく、座標含め様々な情報が記載されています。

//response 例（引用）
{
      "responses": [
        {
          "textAnnotations": [
            {
              "locale": "en",
              "description": "WAITING?",
              "boundingPoly": {
                "vertices": [
                  {
                    "x": 352,
                    "y": 828
                  },
                  {
                    "x": 2248,
                    "y": 911
                  },
                  {
                    "x": 2238,
                    "y": 1148
                  },
                  {
                    "x": 342,
                    "y": 1065
                  }
                ]
              }
            }
        ]
      }
   ]
}
            

そのため、今回は不要な部分を削除し、こんな感じ↓のわかりやすいjsonに書き換えます。以後はこのjson形式になっているresponseを扱う前提で話を進めていきたいと思います。

{"String":"description","x1":0,"x2":1,"x3":1,"x4":0,"y1":0,"y2":0,"y3":1,"y4":1}

＊座標は最小0,最大1で定義しました。（x1y1：左上・x2y2：右上・x3y3：右下・x4y4：左下になります）

具体的な取得方法

座標を利用することで、"「請求番号」というKEYWORDの右側"を指定できます。手順は下記のようになります。

①KEYWORD（今回は「請求番号」という文字列）の座標を取得する。 ②その座標の右側にある文字列（複数）を取得する。 ③②で取得した文字列（複数）のなかから、最も位置が近い文字列を取得する。

①については、単純にKEYWORDと一致する又はKEYWORDに最も近い文字列を検索し、その座標を取得します。

②を行うためには、まず"右側"を定義する必要があります。今回はKEYWORDのx2よりx1が大きく（右にあり）、KEYWORDのy2よりもy4が大きく（下にあり）、KEYWORDのy3よりもy1が小さい（上にある）文字列を"右側"と定義しました。＊言葉にすると分かりにくいですね。

for(let i = 0; i < list.length; i++){
   if(keyword.x2 < list[i].x1 && keyword.y2 < list[i].y4 &&  keyword.y3 > list[i].y1){
      result_list.push(list[i]);
   }
}

例えば、今回の文書が（仮に）右肩上がりに傾いていた場合、「請求日」の「2020/1/1」も①の範囲内（「請求番号」の右側）に入る可能性があります。そのような場合の対応が③になります。 ちなみに、「最も近い」というのは、文書の左上を始点としてそこからの距離が最も近いものを「最も近い」と定義しました。

ここまで、"右側"の取得方法について説明しましたが、当然取得したい値の全てがKEYWORDの右側にあるわけではありません。方向で考えると右以外に下も考えられます（今回だと、「振込先」なんかは下になります）ので、"右側"と同様の考え方で下も定義しました。

for(let i = 0; i < list.length; i++){
   if( keyword.y3 < list[i].y1){
      result_list.push(list[i]);
   }
}

また、右と下の方向は定義しましたが、その中でも、取得したい値が1つの文字列か複数かでも取得方法が変わってきます。具体的には「請求番号」は1つの文字列ですが、「振込先」の値は複数の文字列（複数行）になっています。

そこで、複数の文字列を取得する場合には、「③②で取得した文字列（複数）のなかから、最も位置が近い文字列を取得」ではなく、「③②で取得した文字列（複数）の中から、指定する範囲まで取得」することとします。尚、この「指定する範囲」についても、KEYWORD（LIMIT KEYWORDと呼びます）を利用して指定します。

for(var i = 0; i < list.length; i++){
   if( keyword.y3 < list[i].y1 && limit_keyword.y1 > list[i].y3){
      result_list.push(list[i]);
   }
}

KEYWORD検索での取得方法まとめ

書きながら、私もこんがらがってきたので、少しまとめます。

・KEYWORD検索での取得方法には、右、右複数、下1行、下複数の4パターンがあり、それぞれKEYWORDの座標をもとに指定する。 ・対象が1つの文字列（右、下1行）の場合は、KEYWORDに最も近い文字列を取得する。 ・対象が複数の文字列（右複数、下複数）の場合は、LIMIT KEYWORDを定め、その座標までの範囲の文字列を取得する。

kintoneアカウントを持っていない方

ここまでの説明及び、以降の記事内容も網羅したOCRシステムが、メールアドレス登録のみでご利用いただけます。 OCRシステム　ユーザー登録: https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

kintoneアカウントを持っている方

プラグイン（テンプレート）のダウンロード

ここまでの説明及び、以降の記事内容も網羅したkintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用方法：https://qiita.com/Lastonemile/items/c40cdd8543f14496c0c4

＊IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です） ＊初回利用時から1か月間無償でご利用いただけます。 ＊ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。 ＊利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja ＊利用時にCloud Visionの利用料金が発生する可能性があります。（2020/12/24現在 月間1000ユニットまで無料で利用可能です。） Cloud Vision API料金：https://cloud.google.com/vision/pricing?hl=ja APIキー取得方法：https://tanoshimane.stores.jp/news/602220196728be15433783e4 APIキーの管理には十分ご注意ください（自己責任でお願いします）

今後の課題

KEYWORD検索の方法は分かったけど、KEYWORD検索だけじゃ全ての値を取得できないよね？ と、感想をお持ちの方が多いのではないかと思います。

今回の最終目標でいえば、KEYWORD検索で「請求番号」「支払期限」「振込先」の値は取得出来そうですが、それ以外はKEYWORD検索だけでは難しそうです。

KEYWORD検索にはいくつかデメリットがあります。その中でも一番大きなものは、単純に「KEYWORDがない場合は、どうすればいいの？」であり、今回の例で考えると「請求元」がそれにあたります。

そこで、次回はKEYWORDがない場合に、どのように値を取得するか？を記載したいと思います。

ここまでで出来たこと

＊KEYWORD検索で取得出来る値（請求番号・支払期限・振込先）が取得できるようになりました。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

関連記事

kintone OCRプラグイン　Vision API arr.by LOM 利用方法 kintone OCRプラグイン　文書テンプレート作成方法 kintoneのOCRプラグインを開発する①

【kintone x OCR】～Cloud Vision活用編～ kintoneのOCRプラグインを開発する①【GCP】

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。 ocr.lastonemile@gmail.com * 利用規約に同意の上、ご利用ください。　https://tanoshimane.stores.jp/news/603313afc19c4527490eb72e * kintoneというクラウドアプリ上に構築しており、そのゲストIDを発行します。 * 30日間又は100ページまで（kintoneの利用料含めて）無償で利用可能です。

詳細：https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

プラグインのダウンロード

kintone用OCRプラグイン及びテンプレートが、下記よりダウンロード（無償で購入）可能です。

利用（設定）方法

• IEではご利用いただけません（Chrome,edgeは動作確認済、その他ブラウザは未検証です）
• 初回利用時から1か月間無償でご利用いただけます。
• ご利用にあたり、ご利用者のドメイン情報を取得します（ドメイン毎に利用期間を管理しています）。
• 利用にあたり、別途Google Cloud Vision のAPIキーを取得頂く必要がございます。（取得代行も行っています） Cloud Visionの詳細：https://cloud.google.com/vision/docs?hl=ja APIキー取得方法：https://syncer.jp/cloud-vision-api APIキーの管理には十分ご注意ください

最終目標

kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

今回（Cloud Vision活用編）の目標

実は、本来（狭義）の意味でのOCR（Optical Character Recognition/Reader、光学的文字認識）であれば、自分（自社）で開発しなくても、高精度なサービスを低価格で利用することが可能になっています。 本来（狭義）の意味でのOCRと強調した理由はあとで記載します。

特にGoogle社がGoogle Cloud Platform 上で提供しているCloud Visionについては、APIでサービスが利用出来るため、今回利用するKintone含め外部システムに組み込むことが容易です。

Cloud Vision APIの詳細：https://cloud.google.com/vision/docs?hl=ja

そこで、今回の記事ではCloud Vision APIをKintone上で利用出来るようにする（プラグインを作成する）ことを目的とします。

事前準備（kintone）

今回提供するkintoneプラグインは当然ながらkintone上で動作しますので、kintoneのアカウント（スタンダードコース）が必要になります。

kintoneプラグインについて：https://kintone-sol.cybozu.co.jp/integrate/

その上で、今回提供するプラグインを利用するには、フォームに「添付ファイル」（OCR対象の画像を保存）、「文字列（複数行）」（OCR結果を表示）、「スペース」（実行するためのボタンを表示）を含んだアプリが必要となります。（プラグインダウンロード時にテンプレートも併せてダウンロードされますので、要件を満たした既存アプリがない場合にはご活用ください） ＊それぞれのフィールドコードは任意で構いません。

事前準備（Cloud Vision API）

次に、Cloud Vision APIを利用するためのAPIキーを取得する必要があります。

取得方法：https://syncer.jp/cloud-vision-api ＊こちらのサイトを参考にさせていただきました。

尚、Cloud Vision APIご利用にあたっては、（上記サイトにも記載がある通り）下記注意事項をご理解ください。

Cloud Vision APIを利用するには、請求が発生する、しないに関わらず、クレジットカード(またはデビッドカード)を登録し、課金を有効な状態にしなければいけません。そして、Google Developers Consoleにおいては、課金を無効にすることはできても、登録したカードの情報を削除することができない仕様になっています。これらを踏まえて、自己責任でご利用下さい。

APIキーが他に流出した場合、予想外の課金がなされる可能性がありますので、厳重に管理してください（自己責任でお願いします） 必要に応じて、下記を参考にAPIキーの保護を検討ください https://cloud.google.com/docs/authentication/api-keys?hl=ja#securing_an_api_key

Cloud Vision API料金：https://cloud.google.com/vision/pricing?hl=ja ＊2020/12/24現在 月間1000ユニットまで無料で利用可能です。

プラグインの内容（概要）について

本題のkintoneとCloud Vision APIの接続方法（プラグインの内容）についてですが、大まかな流れは下記のとおりです。

1. 添付画像（png,jpeg）をbase64へ変換する。
2. 変換したbase64をCloud Vision APIへ送り、結果を受け取る。
3. 結果をアプリに表示させる。

＊base64の詳細：https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4 ＊こちらのサイトを参考にさせていただきました。

コード自体はプラグインファイルを参照頂きたいのですがポイントだけ解説します。

添付画像（png,jpeg）をbase64へ変換する部分では、FileReader オブジェクトを利用してbase64へ変換していますが、変換後の文字列の頭に「data:image/png;base64,」等の文字列が付きますので、それを削除してCloud Vision に送信しています。

let img = after_slice(dataURI,"base64,");
function after_slice(str,word){
    let index   = str.indexOf(word);
    return str.slice(index + word.length);
}

また、APIキーや必要なフィールドは変換ファイル、結果表示はプラグインの設定画面で設定することが出来るようになっていますおり、その値を利用しています。＊設定方法は後述します。

let config = kintone.plugin.app.getConfig(PLUGIN_ID);

kintoneアカウントを持っていない方

ここまでの説明及び、以降の記事内容も網羅したOCRシステムが、メールアドレス登録のみでご利用いただけます。 OCRシステム　ユーザー登録: https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

kintoneアカウントを持っている方

プラグインのダウンロード・設定

下記より「kintoneプラグイン　Vision API」及び「kintoneテンプレート　Vision API」をダウンロード（無償で購入）してください。 ダウンロードサイト：https://tanoshimane.stores.jp/ ＊HOME画面下部に表示されていると思いますが、見つからない場合は「Vision API」で検索してください。

kintoneプラグインの読み込み方法：https://jp.cybozu.help/k/ja/admin/system_customization/add_plugin/plugin.html

kintoneテンプレートの追加方法：https://jp.cybozu.help/k/ja/admin/app_admin/template/import_template.html

kintoneへプラグイン・テンプレートの読み込みが完了したら、プラグインの設定を行います。 アプリの設定→プラグイン→設定　でプラグインの設定画面↓が開きます。 それぞれの項目を入力し、SAVEした後、必ずアプリを更新してください。（結構忘れて嵌りがち・・・）

また、繰り返しになりますが、APIキーの管理には十分ご注意ください（自己責任でお願いします）。

利用方法

対象アプリを開き、レコードの追加でプラグイン設定で設定した「添付ファイル」フィールドに対象画像をアップし、レコードを保存してください。 保存すると、「OCR変換」ボタンが現れ、同ボタンを押すと（画面更新の後）OCR結果が「文字列（複数行）」に表示されます。 ＊変換対象はPNG,JPEGのみとなります。

OCR結果と課題

OCR結果を確認して、如何でしょうか？

ここからが、冒頭の本来（狭義）の意味でのOCRと記載した理由になるのですが、「文字認識の精度は非常に高い」と素直に思える反面、「このままでは業務に使えないな」と感じませんか？

業務等でOCRを利用したいと考える場合、多くはその書類上に必要な情報が（いくつか）あり、それを抜き出して利用（他システムへの入力等）したいと考えていると思います。

今回の請求書を例に考えると、「書類上の請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）を取得して、それを自社の経理システムへ入力したい」といったところでしょうか？

現時点で上記を実現しようとした場合、OCR結果から①必要な情報を「人が」探しだし、②それをシステムへ入力する、ことが必要になります。これでは、紙を見ながらシステムへ入力するのと労力としては大差ありません。 （1文字1文字入力するか、コピー出来るかの違いくらいです）

そのため、巷に出回っている大半のOCRツールは、この「①必要な情報を探しだす」部分を狭義のOCR機能に付加して販売されており、私も「①必要な情報を探しだす」部分を付加したkintoneのOCRプラグイン（テンプレート）を開発することを今後の課題としたいと考えています。

経過報告は順次Qiitaで行いたいと思いますので、是非ご注目ください。（最終的には、今回同様に開発したkintoneのOCRプラグイン（テンプレート）を公開するつもりです）

ちなみに、「②それをシステムへ入力する」部分については「どうなんだ？」というと、必要な情報を取得することさえ出来れば、kintone上の他アプリであればkintoneのカスタマイズで対応可能ですし、市販のRPAやETLツールを繋げることで他システムへの自動入力も可能だと考えています。

筆者の紹介

群馬県の渋川市・高崎市を中心に群馬県内でkintoneを利用したDX化支援を行っています。ご興味ある方はぜひご連絡ください。 https://ks-kiki.hp.peraichi.com/

関連記事

kintone OCRプラグイン　Vision API arr.by LOM 利用方法 kintone OCRプラグイン　文書テンプレート作成方法 kintoneのOCRプラグインを開発する① kintoneのOCRプラグインを開発する②