LoginSignup
7
3

More than 3 years have passed since last update.

@MiyakeMito(Mito Miyake)

PowerAppsとPowerAutomateで撮って翻訳アプリを作成する

Last updated at Posted at 2020-11-26

>改版 2020/11/28

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

概要

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

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

こんなイメージになります
image.png

はじめに

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作成

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

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

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

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

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

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

PowerAppsで、Azure Blob Storage に画像保存

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

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

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

撮影した画像を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のホームで、「フロー」→「接続」→「新しい接続」→「インスタント 一から作成」を選択します。
image.png

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

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

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

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

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

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

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

コンテンツには「画像内のテキストを認識する」-「lines」を指定します。
image.png
さらにサンプルから生成で、下記JSONペイロードを入力して完了をクリックします。
image.png

サンプル：

{
    "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より認識した文字を抽出するため、データ操作の「選択」を選びます。
image.png

開始にはJSONの解析で取得した本文を選択します。
image.png
出力のマップとして値の入力にtextを選択します。
image.png
さらに、「テキストモードに切り替え」ボタンを押下し、
image.png
下記、赤枠の部分を削除します。
image.png↓
　　　　　　　　　　　　　　　　　↓↓↓↓↓↓
image.png
※ 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でループ処理を作成すると処理時間が遅延します。
データ操作の参加を利用することで、高速化を図ります。

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

結合する配列には、上記「選択」の出力を選びます。
image.png
結合文字は" "（SPACE）を指定します。

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

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

「Microsoft Translate」を選択します。
image.png

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

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

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

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

PowerAppsでフローを呼び出し

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

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

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

OnSelect：

UpdateContext({txtReturn:文字を認識し翻訳する.Run(txtURL)});
AzureBlobStorage.DeleteFile(Last( AzureBlobStorage.ListFolderV2("uploadimage").value).Id)

※blobストレージにアップロードした画像ファイルを削除します。

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

まとめ

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

7
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
3