【kintone x OCR】kintone OCRプラグイン　文書テンプレート作成方法【GCP】

# はじめに
この記事では、kintoneのOCRプラグイン（Vision API arr.by LOM）で利用する文書テンプレートについて説明します。

# プラグイン（テンプレート）のダウンロード
https://tanoshimane.stores.jp/ にアクセスし、下記をダウンロード（無償購入）してください。

* kintoneテンプレートパック　Vision API arr.by LOM 必須
* kintoneプラグイン　Vision API arr.by LOM 必須
* kintoneプラグイン　Multi pages 任意
* kintoneプラグイン　Template assist 任意

1テンプレート3プラグインの計4zipファイルになります。

# 文書テンプレート
OCRを実施する前に、文書種類毎に文書テンプレートを作成する必要があります。この文書テンプレートは文書の種類（様式）が同様であれば最初に1テンプレート作成すれば大丈夫です。文書の設計図のようなものだとご理解いただければと思います。＊「文書の種類（様式）が同様」とは、具体的にはKEYWORDの文言及びその（大まかな）座標が変わらないことを指します。

# 文書テンプレートの作成手順
文書テンプレートの作成手順は、大まかに①Template assistアプリで概要を作成し、（必要があれば）②文書テンプレートアプリで詳細な設定を追記します。（Template assistアプリのみで完結する場合もあります）
文書テンプレートアプリのみで作成することも可能ですが、Template assistアプリを利用することで検索KEYWORDの設定やそのOCR範囲をより簡単に実施することが可能になります。具体的には、それぞれのKEYWORDごとにある程度の範囲を自動設定する機能や設定変更時に画面上で値を表示する機能が備わっておりますので、直観的に文書テンプレートを作成いただけます。

# 事前準備（Template assistアプリのプラグイン設定）
Template assistアプリのプラグイン設定画面でGOOGLE VISION の API KEY 及び登録先APPの設定を行います。GOOGLE VISION の API KEYには事前に取得したAPI KEYを、登録先APPには文書テンプレートアプリのアプリIDをそれぞれ設定します。
APIキー取得方法：https://tanoshimane.stores.jp/news/602220196728be15433783e4
![TEMPLATE ASSIST 0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/63ad4c33-4b62-a360-1f57-6331581fd83d.png)


# 事前準備（対象文書の用意）
Template assistを利用するためには、同一様式で内容が異なる文書を2文書用意する必要があります。今回の例（請求書）から値を取得する前提として、下記2文書を用意しました。

![請求書サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/13655cba-1ef7-40ba-748c-135bc5af3280.jpeg)

![請求書テンプレートテスト_page-0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/03fa0aa2-5fff-8c6d-45a0-77ed34fd9bdf.jpeg)

# 実際の作成方法（Template assist アプリ）
事前に準備した2文書を（PDFなら対象ファイル(pdf)、png jpegなら対象ファイル(png or jpeg)へ）添付し、文書テンプレート名・scaleを設定し保存後、「KEYWORD取得」ボタンを押します。＊scaleはpdf→png変換時の解像度（倍率）です。基本的に数値が高いと高画質になります。
![TEMPLATE ASSIST 1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/3454f5cf-6ac1-1312-d8c4-bd102fb703fb.png)

すると、画面下部のKEYWORD一覧テーブルに候補となるKEYWORDとその値が表示されます。
![TEMPLATE ASSIST 2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/ed803c92-20ad-29de-abb0-aba894a00ec1.png)

KINTONEの編集（えんぴつ）マークからレコード編集画面に移り、不要なKEYWORDを削除します。
＊ここで必要だが表示されていないKEYWORDは、後で追加します。（後述）
![TEMPLATE ASSIST 3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/e9f8098f-d89d-b435-bc0d-d133a2b72d6e.png)

この時点で目的の「値」が上手くとれているKEYWORDについては、このままで構いませんが、上手く取れていないKEYWORDについては、この画面上で設定を行います。具体的には、value位置・LIMIT_KEY・上下左右の範囲・正規表現をそれぞれ調整していきます。

今回は請求番号、請求日、支払期限は上手く取得出来ていますので、振込先の諸設定を調整していきます。
ちなみに、画面上に表示される「画像を表示」ボタンを押すことで、元画像が表示されます（設定の参考に活用ください）。

まず、value位置は複数行ありますので、「下複数行」に変更します。
![TEMPLATE ASSIST 4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/06848c98-96d0-5ee4-1ea6-ba36d051c885.png)

すると、画面が更新され値が変化します。今回は取りたい値より下まで取得してしまっていることがわかります。そのため、LIMIT_KEYを設定し無駄な範囲を取得しないように調整します。振込先は「品名」というKEYWORDよりも必ず上になるはずなので、LIMIT_KEYに「品名」と設定します。
![TEMPLATE ASSIST 5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/8f41a100-07e2-c8b1-e6db-06cb8424822f.png)

これで、振込先は上手く値が取得出来ました。

あとは明細部分になる、品名・数量・単位・単価・金額を設定します。これらはKEYWORD取得で取得されなかったため、マニュアルで追加していきます。まず品名について、value位置・LIMIT_KEYを入力します。
![TEMPLATE ASSIST 6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/74acc324-53d1-2005-ccf9-865757230251.png)
すると、値に「対象範囲に値が見つかりません」と表示されました。よく見ると左範囲が少し大きいように感じます。そこで左範囲の値を「0.2078」から「0.1」に変更します。尚、範囲の設定は大体の感覚で大まかに設定するイメージで構いません。あまり細かく設定するとKEYWORDの場所が動いた際に対応できなくなり、ロストする原因になります。
![TEMPLATE ASSIST 7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/fb4c6a0b-11d9-45ac-4adc-9db7bc9dc326.png)

不要な文字（商品名の頭の数字）は含めれていますが、範囲としては大体上手くとれました。一先ず、ここ（Template assist）ではこれで良しとします。＊今回の品名のようにTemplate assistで上手く取得できなかったKEYWORDは文書テンプレートアプリで細かく設定します。

同じ要領で、数量を設定します。
数量はvalue位置：テーブル・LIMIT_KEY:小計と設定したところ、単位列も併せて取得してしまいました。
![TEMPLATE ASSIST 8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/866d4eb4-192b-ba9f-4750-239368b495e5.png)

ここで右範囲を調整することで値を上手く取得できれば良いのですが、今回の場合だと単位を同じ文字列として取得してしまっているため、右範囲の調整では上手くいきませんでした。そのような場合、正規表現で値をフィルターすることで上手く取得出来る場合があり、数量は「数字のみ」と設定することで上手く値を取得出来ました。
尚、Template assistでは、数字のみ・数字+記号・数字以外（記号除く）・数字以外+記号 の4種類から設定できます。より細かな正規表現での設定を行いたい場合は、文書テンプレートアプリで行います。
![TEMPLATE ASSIST 9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/887a6b37-0ea9-0165-4a9b-2f0ace38cb52.png)

以降、同じ要領で単位・単価・金額を設定することが出来ましたので、保存 → 文書テンプレートを登録します。尚、単価の値で上手く取得出来ていない値（100を10Dと誤認している）についても品名同様に文書テンプレートアプリで調整していきます。
![TEMPLATE ASSIST 10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/3f08ff81-d8f0-4593-1960-cce97ea75e52.png)

# 実際の作成方法（文書テンプレートアプリ）
文書テンプレートアプリでは、Template assistアプリにはない、文字列置換（全体）_csv・マスタ_csv・文字列置換（個別）_csv・正規表現が設定可能です。前3つ（_csvとついているもの）はcsvファイルを添付することで、正規表現は直接入力することで設定が可能です。

文書テンプレートアプリの詳細な設定方法：

今回はTemplate assistアプリで上手く取得できなかった、品名と単価を追加設定したいと思います。
まず、品名については、Template assistアプリでの設定結果は下記のようになっていました。問題は品名の前に「|」（たぶん罫線のご認識）と数字（SEQ番号）を取得していることですので、これらを除去していきます。

![TEMPLATE1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/82a01d37-d09f-e2b7-676a-3e4ba3fec46d.png)

品名には必ず1文字以上の数字以外の文字が含まれますので、正規表現に[^0-9]と入力します。これで数字だけの文字列である「3、5～12」は取得しなくなります。

「|」については、罫線がある文書ではよく見受けられるもので、基本的に他のKEYWORDでも値に「|」が含まれることは考え難いため、文字列置換（全体）_csvで除去します。文字列置換（全体）_csvに下記のcsvを添付します。
＊A列の値をB列の値に書き換えます。（B列が空欄の場合は文字を空文字に置き換えます）
＊「,」（カンマ）を変換する際はカタカナで「カンマ」と入力してください。
![TEMPLATE2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/979c69ff-1c37-c678-dc3f-656f2b7def06.png)

また、品名には数字は含まれません（と仮定します）ので、文字列置換（個別）_csvに下記のcsvを添付します。
![TEMPLATE3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/04cd736a-68d7-d122-f3d7-746aabafe1a1.png)

次に単価については、0を誤ってDと認識していました。
![TEMPLATE ASSIST 10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/3f08ff81-d8f0-4593-1960-cce97ea75e52.png)

そのため、文字列置換（個別）_csvでアルファベットを数字に変換します。今回はDだけではなく、よくありそうなアルファベットと数字の組み合わせをまとめて登録します。単価以外にも数量と金額列は数字しかありませんので、こちらにも同様のcsvを添付しておきます。
![アルファベット2数字.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/54410030-5bd3-b25b-d34e-4b60e0e6344f.png)

これで、文書テンプレートが完成しました。
![TEMPLATE4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/73dc638d-6fc1-ae22-67da-9e465c5363b8.png)

実際にOCRを実行したところ、上手く値が取得できました。
＊OCRプラグイン（Vision API arr.by LOM）利用方法：https://qiita.com/Lastonemile/items/a4b3888600cfa2bd37d2
![TEMPLATE5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/4d4702ec-8e25-7947-5330-ad14610b4ec9.png)

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

# 関連記事
[kintone OCRプラグイン　Vision API arr.by LOM 利用方法](https://qiita.com/Lastonemile/items/a4b3888600cfa2bd37d2)
[kintone OCRプラグイン　文書テンプレート作成方法](https://qiita.com/Lastonemile/items/c40cdd8543f14496c0c4)
[kintoneのOCRプラグインを開発する①](https://qiita.com/Lastonemile/items/55e6a159a4c2bcc9dab4)
[kintoneのOCRプラグインを開発する②](https://qiita.com/Lastonemile/items/cfc2df8005711a145d20)