見出し画像

名刺読み取りアプリの検証

Rie Kitame

はじめに

UPWARDの北明です。R&Dの一環で画像認識機能の開発をしています。今回はAzureの画像認識サービスであるDocument Intelligenceを利用した名刺の読み取りアプリの開発をご紹介します。

背景

UPWARDはUPWARD AGENT（以下AGENT）というモバイルCRMアプリをご提供しています。新規機能として、名刺画像から氏名や会社名などの属性情報を読み取る機能を開発しています。AGENTが連携しているSalesforceは無償でScan to Salesforceという名刺の読み取りアプリを利用できますが2024年5月にサービスが終了する予定です。

名刺の読み取り機能が具備されれば、Scan to Salesforceのサービス終了後も、名刺の属性情報をSalesforceに保存して管理することが出来ます。今回は、iOSアプリの試作品を作成しました。

ユースケース

AGENTでは取引先や取引先責任者を管理することが出来ます。ユースケースとして次を想定しています。アプリを起動して名刺を撮影し、画像認識で読み取った情報を取引先、または取引先責任者に登録します。名刺画像は取引先責任者に紐づけて登録します。新規の取引先の場合、取引先と取引先責任者、名刺画像を新規登録します。既存の取引先の場合、取引先責任者と名刺画像を既存の取引先に紐づけて登録します。既存の取引先と取引先責任者の場合、名刺画像を既存の取引先責任者に紐づけて登録します。既存の取引先、取引先責任者、名刺画像の場合、「既に登録済み」である旨をメッセージに表示します。

機能概要

画像認識サービスとしてAzureのDocument Intelligenceを採用しました。Document Intelligenceはドキュメントの読み取りに特化しており、標準でOCR読み取り、テーブル構造などのレイアウト読み取り、名刺読み取りモデルがあります。名刺読み取りモデルを使用して画像から文字を読み取ります。

図1が全体のシステム構成図です。

図1. システム構成図

  1. iOSアプリで名刺を撮影してAzureのContainer Appsに送信します。

  2. Container Appsにデプロイしたバックエンド機能でDocument Intelligenceと通信し、名刺の読み取りを実行します。

  3. 氏名や会社名など、名刺の属性情報を解析結果としてiOSアプリの画面に表示します。

  4. iOSアプリの画面で解析結果を修正し、登録します。

  5. 解析結果と修正結果、名刺画像をStorage Accountに保存します。

機能実装

バックエンド機能の開発

Azureポータルで開発用のリソースグループを作成し、次のリソースを設置しました。

  • Container Apps：バックエンド機能をデプロイします。

  • Container Registry：Container AppsにデプロイするアプリのイメージをGitHub Actionsでビルド＆プッシュします。

  • Document Intelligence：名刺の読み取りを実行します。

  • ストレージアカウント：名刺の解析結果と修正結果、名刺画像を登録します。

バックエンド機能の開発言語はTypeScript（Node.js＋GraphQL）です。
下記のAPIのリファレンスを参考にコードを記述します。Document Intelligenceと通信するクラスを作成し、画像の解析結果をJSONで取得します。

フロントエンド機能の開発

フロントエンドの開発言語はswiftです。カメラで名刺を撮影し、名刺の矩形を検出して名刺画像を取得します。取得した画像をバックエンド機能に送信します。名刺の矩形の検出は、標準カメラとOpenCV、AVFoundationで作成したカスタムカメラとAppleのVisionをそれぞれ組み合わせて検証しました。OpenCVはオープンソースの画像処理ライブラリです。VisionはAppleの画像認識フレームワークです。
標準カメラとOpenCVを利用する場合、撮影した画像をグレースケールに変換し、あらかじめ設定したしきい値を元に白黒の2色に変換します。コントラストをはっきりさせた状態で名刺の境界線を検出します。検出した境界線を矩形に近似して一定の大きさのものを抽出します。図2が標準カメラ＋OpenCVによる名刺の矩形検出の結果です。名刺の矩形が赤枠で表示されています。ただし、背景によってはコントラストがはっきりせず、矩形の検出率が悪くなることがありました。

図2. 標準カメラ＋OpenCV

カスタムカメラとVisionを利用する場合、VisionにはVNDetectRectanglesRequestという矩形を検出するクラスがあります。下記のようにクレジットカードの矩形を検出することが出来るので名刺に応用しました。

図3がカスタムカメラ＋Visionによる名刺の矩形検出の結果です。緑枠がVisionで検出した名刺の矩形です。撮影した名刺の画像は程度の差はあれど台形に歪んでいます。緑枠をそのまま切り取ると歪んだ画像になるので、保存する時に長方形に補正します。矩形が入る最小の長方形として境界ボックスを設定します。赤枠が境界ボックスです。名刺の矩形（緑枠）を境界ボックス（赤枠）に射影変換して補正します。

図3. カスタムカメラ＋Vision

また、白地の名刺だけでなく、色付きの名刺や背景を様々に変えて試してみたところ、問題のない精度で矩形を検出することが出来ました。標準カメラ＋OpenCVとカスタムカメラ＋Visionの検証結果を比較し、カスタムカメラ＋Visionを採用しました。

動作確認

バックエンド機能とフロントエンド機能を組み合わせて動作確認しました。
アプリを起動して撮影を開始します。名刺の矩形が検出されると赤枠が表示され、画面下部の撮影ボタンが有効になるのでタップします。撮影した画像をバックエンドに送信し、画像を解析します。名刺の画像、解析結果として取得した氏名や会社名などの属性情報を「名刺を編集」画面に表示します。既に登録済みの属性情報だった場合、画面に「既に登録済みです」というメッセージを表示します。属性情報は画面で編集することが出来ます。取引先をタップすると「取引先の編集」画面が開き、取引先の住所や電話番号を表示します。「保存」ボタンをタップすると名刺の画像、画面で編集した属性情報をバックエンドに登録します。

図4-1. 撮影ボタンをタップ
図4-2. 名刺を編集
図4-3. 取引先の編集

まとめ

Document Intelligenceを利用して名刺の読み取り結果を保存するシステムを実現しました。AppleのVisionを利用すると、名刺の矩形が精度よく検出できるので、撮影した画像をDocument Intelligenceの名刺読み取りモデルで解析することが可能です。今回はiOSアプリをターゲットにしていますが、Androidアプリの検証を進めています。

さいごに

部門問わず、少しでもUPWARDにご興味いただいた方は、まずはカジュアルにお話しすることも可能ですので、ぜひコンタクトをお待ちしております。

https://herp.careers/v1/upward/E9e-1BS_dLYc


この記事が気に入ったらサポートをしてみませんか？