>改版 2020/11/28

Microsoft MVP Hiroさんより、
PowerAutomate での「選択」時に、ヘッダを出力しない方法をご教示いただきました。
よって、後続のReplace処理は不要となり、さらに処理の簡素化、高速化が実現しました。
ありがとうございます。

概要

カメラで撮影した文書の文字を読み取り、日本語に翻訳するアプリを作成します。
完成した物はこんな感じ。

この記事のおかげで「撮って翻訳」が高速化！されちょっとだけ使い物になりました。25秒→7秒
AutomateのApply to each撲滅は本当に効きます！ありがとうございます。https://t.co/VQ24ZSGhOQ…#PowerApps #PowerAutomate #JPPUG pic.twitter.com/wyNofIkbmm
— Miyake Mito (@MiTo60448639) November 25, 2020

処理の流れ
① PowerApps で撮影し、Azure Blob Storage に画像を保存
② PowerAutomate を呼び出す
③ PowerAutomate で AI Builder を利用し、①の画像の文字を識別する
④ PowerAutomate から Cognitive services の翻訳機能を利用し、③の文字を翻訳する

こんなイメージになります

はじめに

Azure Blob Storage を利用するために、Azure でストレージアカウントを作成してください。
以下のDocsが参考になると思います。
https://docs.microsoft.com/ja-jp/azure/storage/common/storage-account-create?tabs=azure-portal
※今回はほぼ初期値で作成しました。

Cognitive Services を利用するために、Azure でCognitive Services を作成してください。
https://docs.microsoft.com/ja-jp/azure/cognitive-services/cognitive-services-apis-create-account?tabs=multiservice%2Cwindows
※今回はほぼ初期…

Blob storage作成

作成したストレージアカウントでの概要で、コンテナーを選択します。

画面左上の＋コンテナーを押下し、任意の名前を入力し（今回はuploadimageとしました）、作成ボタンをクリックします。

コンテナー作成後、アクセスキーを開き、ストレージアカウント名とKey1のキーを控えます。

以上でBlob Storageの作成は完了です。

Cognitive Services のキーとエンドポイントについて

Cognitive Services を利用するためには、キーとエンドポイントが必要です。
作成した Cognitive Services を開き、キーとエンドポイントで値を取得できます。
こちらも後程利用します。

PowerAppsで、Azure Blob Storage に画像保存

まず、Blob Storageとの接続を作成します。
PowerAppsのホームで、「データ」→「接続」→「新しい接続」→「一から作成」を選択します。

Azure ストレージアカウント名とアクセスキーには、上記で作成したストレージアカウントの値を設定します。

PowerAppsでキャンパスアプリを作成し、画像、ボタン、テキストラベルを配置します。

撮影した画像をblobストレージへアップロードします。
ボタンの「OnSelect」プロパティに下記を入力します。
OnSelect：

//GUIDを取得
UpdateContext({txtguid:Text(GUID())});
//画像ファイルをアップロード
AzureBlobStorage.CreateFile("uploadimage",txtguid,UploadedImage1.Image);
//アップロードしたファイルのURLを取得
UpdateContext({txtURL:First(Search(AzureBlobStorage.ListFolderV2("uploadimage").value,txtguid,"Name")).Path});

ファイル名はGUIDでunique値を設定し、ファイルURLを取得しています。

PowerAutomateで文字識別と翻訳

次に、PowerAutomateの作成を行います。
PowerAppsから呼び出すフローを作成するため、PowerAppsのホームで、「フロー」→「接続」→「新しい接続」→「インスタント一から作成」を選択します。

フロー名を入力し、トリガーをPowerAppsを選択しをクリック。

文字列変数を初期化します。

次に、「blobコンテンツの取得」を選びます

BLOBコンテンツの指定は、PowerAppsよりURLを受け取りますので、「PowerAppsで確認」を設定します。

AI Builder の「画像内のテキストを認識する」を選択します。

画像にはBLOBコンテンツより取得したファイルコンテンツを指定します。

認識されたテキストはJSON形式のため、JSONの解析を選択します。

コンテンツには「画像内のテキストを認識する」-「lines」を指定します。

さらにサンプルから生成で、下記JSONペイロードを入力して完了をクリックします。

サンプル：

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "@@odata.type": {
                "type": "string"
            },
            "text": {
                "type": "string"
            },
            "boundingBox": {
                "type": "object",
                "properties": {
                    "@@odata.type": {
                        "type": "string"
                    },
                    "left": {
                        "type": "number"
                    },
                    "top": {
                        "type": "number"
                    },
                    "width": {
                        "type": "number"
                    },
                    "height": {
                        "type": "number"
                    },
                    "polygon": {
                        "type": "object",
                        "properties": {
                            "@@odata.type": {
                                "type": "string"
                            },
                            "coordinates@odata.type": {
                                "type": "string"
                            },
                            "coordinates": {
                                "type": "array",
                                "items": {
                                    "type": "object",
                                    "properties": {
                                        "@@odata.type": {
                                            "type": "string"
                                        },
                                        "x": {
                                            "type": "number"
                                        },
                                        "y": {
                                            "type": "number"
                                        }
                                    },
                                    "required": [
                                        "@@odata.type",
                                        "x",
                                        "y"
                                    ]
                                }
                            }
                        }
                    }
                }
            }
        },
        "required": [
            "@@odata.type",
            "text",
            "boundingBox"
        ]
    }
}

解析したJSONより認識した文字を抽出するため、データ操作の「選択」を選びます。

開始にはJSONの解析で取得した本文を選択します。

出力のマップとして値の入力にtextを選択します。

さらに、「テキストモードに切り替え」ボタンを押下し、

下記、赤枠の部分を削除します。
↓
　　　　　　　　　　　　　　　　　↓↓↓↓↓↓

※ textのみに編集したのは「選択」により抽出された文字列に｛｝や、""：が付与されてしまうのを防ぐためです。

データ操作の「選択」は下記のようなデータ構造を出力します。
[
"Azure's Computer Vision service gives you access to advanced algorithms that process images and return",
"information based on the visual features you're interested in. For example, Computer Vision can determine",
"whether an image contains adult content, find specific brands or objects, or find human faces."
]
これらの文字列を繋ぎ、1行に整形したいのですが、Applay to eachでループ処理を作成すると処理時間が遅延します。
データ操作の参加を利用することで、高速化を図ります。

データ操作の「参加」を選びます。

結合する配列には、上記「選択」の出力を選びます。

結合文字は" "（SPACE）を指定します。

こういったApplay to eachによるループ制御を使用することなくフローを構築する手順は下記をご参照ください。
https://mofumofupower.hatenablog.com/entry/2020/08/12/093000

「参加」（結合）の出力を変数に設定します。

「Microsoft Translate」を選択します。

接続名を聞かれますので、上記のCognitive Services のキーとエンドポイントをセットします。

Target Language に日本語、TEXTに上記replaceの出力を指定します。

最後に、翻訳した文字列をPowerAppsに返却するため、「PowerappsまたはFlowに応答する」を選択します。

「テキスト」を選択し、PowerApps側の戻り値名を設定します。（今回はreturnという名前にしました）
値にはTranslatde Textを設定します。

PowerAppsでフローを呼び出し

上記で作成したPowerAppアプリに戻りアクション－Power Automateで開いたペインで、作成したフローを選択します。

すると、選択中のオブジェクトの任意のプロパティにフロー名が表示されるので、これを切り取ります。

ボタンの「OnSelect」プロパティのblobストレージへの画像アップ処理に続き、下記処理を追記します。

OnSelect：
UpdateContext({txtReturn:文字を認識し翻訳する.Run(txtURL)}); AzureBlobStorage.DeleteFile(Last( AzureBlobStorage.ListFolderV2("uploadimage").value).Id)
※blobストレージにアップロードした画像ファイルを削除します。

最後にテキストラベルのTextプロパティに、フローの戻り値を設定して完了です。

まとめ

出来上がったものはGoogle翻訳アプリの足元にも及ばない自己満足アプリです。
ですが、PowerAppsからAzureのストレージアクセスやCognitive servicesによるAIが活用できることで、色々なことが実現できそうです。