2021年1月29日 / 最終更新日時 : 2021年6月30日 user ノウハウ

ユーザーコードリファレンス：OCRによるUI要素の画像認識

UI要素の画像をOCR（光学文字認識）で認識し、テキスト情報を読み取る方法について検証しました。今回は、その時の検証内容について紹介します。

Ranorexでは、OCRの機能を提供していないため、今回は、Tesseractを使用しています。また、ユーザーコードを使用してOCRによるUI要素の画像認識の処理をおこないます。

※本記事で紹介しているユーザーコードは、Ranorex v9.3.2を使用しています。

※ユーザーコードの機能概要については、こちらの記事をご参照ください。

※本記事で紹介しているRanorex APIについては、API ドキュメントをご参照ください。

1. Tesseractのセットアップ

1.1. Tesseractのインストール

Ranorexの対象プロジェクトに対して、NugetパッケージにてTesseractをインストールします。

Ranorex Studioのプロジェクトビューにて、対象プロジェクトを右クリックし、ショートカットメニューからパッケージの管理を選択します。
表示されたManage packages画面にて、利用可能タブの検索フォームに、Tesseractと入力して検索をおこないます。検索結果として、Tesseractが見つかります。
検出されたTesseractを選択して、追加ボタンをクリックします。Tesseractのライブラリが対象プロジェクトのReferencesフォルダーに追加さます。

1.2. 日本語学習データの入手

日本語に対応させるために、日本語の学習データを取得します。

以下のGithubから学習データ（jpn.traineddata）をダウンロードします。https://github.com/tesseract-ocr/tessdata_fast/blob/master/jpn.traineddata
ダウンロードした学習データを任意のフォルダーに配置します。
今回は、以下のフォルダーに配置しました。
C:\/tmp/fast/

1.3. ユーザーコードの作成

Ranorexのユーザコードにて、OCRをおこなうためのコードを用意します。
コード例（言語：C#)：

public string TesseractOcr(RepoItemInfo repoItem)
{
  string text = "";
		
  // Additional Validation
  string dataPath = @"C:\tmp\fast"; // 学習データのあるフォルダーを指定
  string lanugage = "jpn"; // 言語指定
			
  // 対象オブジェクトの画像取得
  CompressedImage cmpImage = repoItem.CaptureCompressedImage();
  string imgPath = @"C:\tmp\img\ocrTarget.png";  // 画像を保存するファイルを指定
  cmpImage.Store(imgPath);  // 保存
			
  // 対象オブジェクトの画像ファイル読み込み
  using (var image = Pix.LoadFromFile(imgPath))
  {
    // オブジェクト生成
    using (var engine = new TesseractEngine(dataPath, lanugage))
    {
      // OCR 実行
      using (var page = engine.Process(image))
      {
        text = page.GetText();
      }
    }
  }
  return text;
}

※ユーザーコードについては、以下のBlog記事をご参照ください。

2. TesseractによるOCRの実行

作成したユーザーコードを実行します。コード例のユーザーコードでは、戻り値としてOCRで取得したテキストを返しますので、戻り値（テキスト）を変数に格納して使用することが可能です。
戻り値を格納する変数は、対象アクションのプロパティにあるReturn value variableにて設定できます。

今回は、OCRで取得したテキストをレポートに出力しています。

また、UI要素の画像は、以下のWebサイトにあるUI要素（赤枠の画像）を対象としています。

（URL：https://www.techmatrix.co.jp/product/quality.html）

下図は、ユーザーコードを実行した結果レポートになります。
UI要素の画像から取得されたテキスト（赤枠）がレポートされていることが確認できます。

まとめ

今回の検証において、以下のような画像においては、正しく文字が識別できない場合がありました。

文字の大きさ（大文字/小文字、フォントサイズ）が異なると認識できない場合がある。
大文字、小文字が混ざると認識の精度下がる。
例：URLは認識できるが、Urlだと認識できないなど。
画像の色で認識の精度が変わる。
文字以外の情報、ロゴマークやアイコンなどのイラストが含まれていると正確に文字を認識できない場合がある。
同じような形の文字や数字を誤認識する場合がある。
例：英字のO、Iと、数字の0、1など。
文字フォントによって認識の精度が変わる。

現在のところ、上記のようなケースが見られ、これらはOCRの精度の影響によるものと考えられます。このため、今回、紹介した方法をそのまま本番運用で使用することは難しいかと思われますが、将来的にOCRの精度が上がることで、文字の見切れの検証などに利用することができ、今以上に幅広い検証を期待できるかと思われます。