コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

Power Apps でOCRを行ってみよう！【Power Apps + Azure】

Power Apps Azure OCR

スポンサードリンク

はじめに

皆さんは「OCR」という単語をご存じでしょうか？
OCR とは、「Optical Character Recognition」の略で、日本語にすると、「光学文字認識」という言葉になります。
ざっくりとした概要を掴むにはこちらのWikipedia をご参照ください。

光学文字認識（こうがくもじにんしき、Optical character recognition）は、活字の文書の画像（通常イメージスキャナーで取り込まれる）を文字コードの列に変換するソフトウェアである。一般にOCRと略記される。OCRは、人工知能やマシンビジョンの研究分野として始まった。研究は続けられているが、OCRの中心はその実装と応用に移っている。紙に印刷された文書をデジタイズし、よりコンパクトな形で記録するのに必要とされる。さらに、文字コードに変換することで機械翻訳や音声合成の入力にも使えるようになり、テキストマイニングも可能となる。研究分野としては、パターン認識、人工知能、コンピュータビジョンが対応する。
（鏡やレンズといった光学技術を使った）光学文字認識と（スキャナーとアルゴリズムによる）デジタル文字認識は本来別の領域と考えられていた。光学技術として生き残った部分が非常に少ないため、光学文字認識という言葉は現在ではデジタル文字認識を含むものとみなされている。
初期のシステムは特定の書体を読むための「トレーニング」が必要であった（事前にその書体のサンプルを読ませることを意味する）。現在では、ほとんどの書体を高い識字率で変換することが可能である。いくつかのシステムでは読み込まれた画像からそれとほぼ同じになるようフォーマットされた出力（例えばワードプロセッサのファイルのようなもの）を生成することが可能であり、中には画像などの文書以外の部分が含まれていても正しく認識するものもある。

光学文字認識 - Wikipedia

さて今回はそんなOCR のテキスト認識技術をPower Apps 用いて簡単にアプリを作成していこうと思います！

今回使用するもの

OCR を行うのはAzureのComputer Vision というサービスになります。
Computer Vision の価格とそのプランで行える制限についてはこちらのCognitive Services の価格 - Computer Vision APIをご参照ください。

今回は試してみるだけなので、Free のF0 を利用します。

Computer Vision を利用する

まずは、Computer Vision API を利用できるようにするために、Azure Portalにてリソースの作成を行いましょう。

  1. Azure Portalにアクセスしログインします。

  2. 下図のように「リソースの作成」を選択します。
    f:id:koruneko:20200607022254p:plain

  3. 「AI + Machine Learning」より「Computer Vision」を選択するか上部の検索窓より「Computer Vision」で検索します。
    f:id:koruneko:20200607022523p:plain

  4. 以下を入力して「作成」を押してください。

    • 名前：任意の名前を入力してください
    • サブスクリプション：任意のサブスクリプションを選択してください。
    • 場所：任意の場所を選択してください。よくわからない場合は下図のように「東日本」を選択してください。
    • 価格レベル：先ほどの価格表より任意の価格を選択します。今回はF0 を利用します。
    • リソースグループ：任意のリソースグループを選択します。もしリソースグループをまだ作成していない場合は「新規作成」よりリソースグループの作成を行ってください。任意の名前を入力するだけで簡単に作成が可能です。
      f:id:koruneko:20200607022933p:plain

  5. 作成が完了したら「キーとエンドポイント」より「キー1」と「エンドポイント」をコピーしてください。なおこの情報は絶対に第三者に公開するなどしないでください。
    f:id:koruneko:20200607024655p:plain

以上でComputer Vision API を利用するための準備が整いました！

Power Automate でフローを作成する

Power Automate の役割はPower Apps から受け取った画像を先ほど作成したComputer Vision API に渡して、その結果得られたテキストを、Power Automate に返すだけです。

Power Automate の構成

フローはたったこれだけです！

f:id:koruneko:20200608002448p:plain

これらたった3つのトリガーとアクションとで作成されています。

Computer Vision API と接続する

Power Automate でComputer Vision API を利用できるように、接続情報を記載しましょう！

f:id:koruneko:20200607025155p:plain

  • 接続名：Power Automate の「データ」>「接続」の「接続の確認」で表示される名前です。任意の名前を入力してください。
  • Account Key：先ほどコピーした「キー1」を貼りつけてください。
  • Site URL：先ほどコピーした「エンドポイント」を貼りつけてください。

以上でPower Automate(Power Apps などでもこの接続情報を利用できます。)でComputer Vision API を利用する準備が整いました！

フローを作成する

まずは、トリガーとなる「Power Apps」を作成してください。
続いて、Computer Vision API の「Optical Character Recognition (OCR) to Text」を追加します。

  1. Computer Vision API と検索します。(「Optical Character Recognition (OCR) to Text」でも大丈夫です。)
    f:id:koruneko:20200608004302p:plain

  2. 「Optical Character Recognition (OCR) to Text」を選択します。
    f:id:koruneko:20200608004412p:plain

  3. 今回コンテンツを渡すので「Image Content」を選択します。
    f:id:koruneko:20200608004517p:plain

  4. 「Image　Content」には「Power Appsで確認」を選択します。(もし表示されない場合は「もっとみる」を選択してみてください。)
    f:id:koruneko:20200608004826p:plain

  5. 今回Power Apps から渡す画像はbase64 のData URI 形式としたいと思います。
    なので先ほどの「4. 」の手順で追加したコンテンツは削除してください。

  6. 「4. 」の手順ではPower Apps から渡す必要があるコンテンツを認識させるために行いました。
    先ほども説明しましたが、今回Power Apps から渡す画像はbase64 のData URI 形式とします。
    なのでData URI のフォーマットを バイナリー形式に変換してあげましょう。

    式で「dataUriToBinary()」と入力します。
    f:id:koruneko:20200608010223p:plain
    「動的なコンテンツ」を選択します。
    その後()の中にカーソルを合わせて、「4. 」の作業で追加された、「OpticalCharacterRecognition(OCR)toText_ImageContent'」を選択します。
    f:id:koruneko:20200608010748p:plain
    これらが完了すると、「Image Content」の式には「dataUriToBinary(triggerBody()['OpticalCharacterRecognition(OCR)toText_ImageContent'])」と入力されているかと思います。
    f:id:koruneko:20200608011114p:plain


最後にPower Apps に結果を返すためのアクションを作成します。
「PowerApps または Flow に応答する」を追加し、「Text」を選択し、OCR された結果である「Detected Text」を選択します。

f:id:koruneko:20200608011255p:plain

以上でPower Automate の作成は完了です！

Power Apps でアプリを作成する

Power Apps で作成するアプリは

  • 画像の選択・撮影
  • 画像をPower Automate に渡す
  • OCRされた結果を表示する

だけの機能になっています。
なので今回はさくっと説明しちゃいます。

画像選択機能

ローカルより画像を選択し、Power Apps に表示させるには、「メディア」より「画像の追加」を選択してください。
その後、「AddMediaButton」のみ切り取って、他に追加されたものは削除しちゃってください。
画像が選択されたのち、選択された画像をセットして、確認画面に遷移したいため以下のように記載します。

AddMediaButton.OnChange

Set(media, AddMediaButton.Media);
Navigate(CheckScreen, ScreenTransition.Fade)

これで「media」という変数に選択した画像を格納し、「CheckScreen」に遷移するという処理を作成できました。

画像撮影機能

画像の撮影には「カメラ」を利用します。
「メディア」より「カメラ」を選択します。
こちらのカメラはカメラの領域が選択されたときに撮影を行います。

Camera.OnSelect

Set(media, Camera.Photo);
Navigate(CheckScreen, ScreenTransition.Fade)

これで「media」という変数に撮影した画像を格納し、「CheckScreen」に遷移するという処理を作成できました。

外部にボタンを作成して、写真を撮影する方法もありますが、今回の主題とはずれるので割愛しました。気になる人は、@yamad365 さんの【PowerApps Tip's】撮影ボタンを実現する(注意点アリ)をご参照ください。

選択・撮影した画像を確認用に表示する

Navigate関数にてちょくちょくでてきていた、CheckScreenにて選択・撮影した画像を確認用に表示しておきましょう。
といってもそんな難しいことなく、「メディア」より「画像」を選択して「画像」の「Image」には「media」を指定します。

Image1.Image

media

これで、選択・撮影した画像が画面上に表示されましたね。

画像をPower Automate に渡す機能

先ほど作成したPower Automate をPower Apps に追加しましょう！
「アクション」より「Power Automate」を選択し、先ほど作成したPower Automate を選択します。

Power Automate を呼び出すには、「[フロー名].Run()」で呼び出すことができます。

Power Automate に渡す画像はbase64 のData URI 形式で渡します。
なので、「Run()」の引数には以下のように記載します。

[フロー名].Run(Substitute(JSON(Image1.Image, IncludeBinaryData),"""", ""))

JSON関数で画像をbase64 のData URI 形式に変換することができます。
これで得られた結果は文字列なので、Substitute関数にて「"」を除去しています。

最後に、こちらで得られた結果を変数に格納しておきましょう。

OCR された結果を表示する

これは簡単ですね。
さきほどの結果を「ラベル」の「Text」に設定するだけです。

さいごに

たったこれだけでOCR が行えるアプリを作成することができました！
すごい技術の進歩ですね！！

ただこちらのComputer Vision API ですが、複数言語が混在しているパターンには少し弱いようです。
f:id:koruneko:20200608013713p:plain

複数言語の処理なども行いたい場合は、Google Cloud Vision などの利用を選択肢にいれてみるといいかもですね。

ちなみに比較を行った検証結果はこちらが参考になるかと思います。
OCR 案件で Azure Computer Vision と他社サービス含めて徹底検証してみた


スポンサードリンク