More than 1 year has passed since last update.

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

Last updated at 2022-09-15Posted at 2021-02-09

無償で試してみる

下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。
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の接続方法（プラグインの内容）についてですが、大まかな流れは下記のとおりです。

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

＊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プラグインを開発する②

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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