SE の雑記

PowerApps には、 データソースから Computer Vision API と接続ができるようになっています。
これにより、カメラで撮った画像を、画像認識の分類器にかけ、画像内の情報の分析や、OCR のような機能を API コールで実現することができるようになります。

先日実施された、PowerApps のハッカソンの記事が ASCII で公開されており、その中でも Computer Vision API との連携を実施されたという記載がありました。

• 制限時間はだいたい2時間、ノンコーディングでアプリ開発するハッカソン

まだ、PowerApps を触り始めて間もなく、この辺をやってみたことが無かったので試してみた際に、微妙にはまりどころがありましてのでメモを残しておこうかと。

• Sending Images from PowerApps to Microsoft Flow
• powerapps computer vision connector

投稿時点の内容ですので、後日解消されている可能性もあります。

PowerApps から、外部の API をコールする場合、いくつかの方法があり、一般的には以下の 3 種類の利用を検討するのではないでしょうか。

1. PowerApps のデータソースからコネクタを作成し API を利用する
2. Flow から該当の API / サービスをコールするコネクタを利用する
3. Flow の要求のコネクタを利用して自分で HTTP 要求を送信する

Computer Vision API は専用のコネクタが Preview ではありますが、用意されており、Flow のデータソースとしても選択できますので「1.」「2.」の方法を使うことで、簡単に Computer Vision API を利用することができます。
コネクタのリファレンスについては、Computer Vision API (Preview) で公開されており、この仕様で API をコネクタ経由で利用することができます。
Computer Visoin API を PowerApps のデータソースとして追加した場合は、数式として、API を直接呼び出すことができるようになります。

Computer Visoin API のコネクタが提供している機能は一通り呼び出すことができるのですが「カメラで撮影した画像を直接 API に渡して解析を行う」場合には、現時点では 「DescribeImageContent」以外は、カメラ画像の直接の連携には対応していないのではないでしょうか？
カメラで撮影した画像 (Camera コントロールの Photo に設定されている画像) であれば、次のような数式で Computer Vision API で解析することができます。

ClearCollect(ret, ComputerVisionAPI.DescribeImageContent(Camera1.Photo))

ただし、結果が、複合型 (Complex Field Type) として戻されるので加工が結構難しいかと。

• Collect complex field type value like PersonField.Email

DescribeImageContent 以外の API についてですが、現時点では、PowerApps のデータソース経由でこれらの API を利用しようとしてもうまくいかないかと。
画像系のコントロールの画像情報ですが、バイナリではなく、コントロールによって、リソースの URI だったり、Data URI の形式が使用されており、Camera コントロールの Photo だと Data URI の形式で画像の情報が保持されているようです。
実際の値については、テキストやラベル系のコントロールの Text のプロパティに、「Camera1.Photo」のようにカメラコントロールの画像の値を出力してもらうと確認できますが、次のような Data URI の形式の情報となっています。

 
現状、PoweApps の Computer Vision API のデータソースで、この辺を良しなに変換してくれるのが、DescribeImageContent だけのようで、それ以外のメソッドについては、PowerApps のカメラの画像を直接渡してもおそらく結果化が返ってこないかと。
現状、カメラで撮影した画像と、Computer Vision API との連携については、Flow 経由で連携するのが簡単な方法のようですね。
Flow にも Computer Vision API のコネクタがあり、Flow の数式 (ワークフロー定義言語の関数) には、Data URI のフォーマットをバイナリに変換するという関数 (dataUriToBinary) が用意されており、この関数にカメラコントロールの Photo プロパティの値を渡すことで、Computer Vision API の 「Image Content」として解析可能な情報を生成することができます。
フローの作成方法ですが、最初に PowerApps から呼び出される Flow を作成し、Computer Vision API の Describe Image のコネクタを追加します。

この時、イメージソースはカメラで撮影した画像を直接渡しますので「Image Content」を選択しておきます。


次に、「Image Content」の内容を設定するのですが、コンテンツの情報は PowerApps から渡しますので、最初に「PowerApps で確認」をクリックして、情報を受けるようにします。

そうすると、PowerApps の欄に、選択可能な項目 (以下の画像であれば DescribeImage ～) が増えますので、これを利用した関数を設定します。

一度、Image Content は空にして、

式として、「dataUriToBinary()」を入力します。

あとは、この関数に先ほど設定した、PowerApps から受け取る項目を渡しますので、「dataUriToBinary(」の後ろにカーソルを置いた状態で、「動的なコンテンツ」のタブをクリックして、「DescribeImage～」を選択します。

そうすると、このように関数内に PowerApps から受け取る値が設定されます。

これで、カメラの画像が解析された結果を作ることができましたので、次に応答としてこの内容を PowerApps に戻します。
「要求 – 応答」のアクションを追加し、

本文には、解析されたイメージのキャプション (Captions) を追加しておきます。

最後に、「応答本文の JSON スキーマ」に次の内容を入れます。

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "text": {
                "type": "string"
            },
            "confidence": {
                "type": "number"
            }
        },
        "required": [
            "text",
            "confidence"
        ]
    }
}

これで Flow が完成しました。

全体像がこちら。

作成が終わったら、保存して PowerApps に戻ります。
PowerApps で Flow を呼び出す際ですが、戻ってきた値をコレクションとして利用したいので、ボタン等の「OnSelect」のアクションとしては次のような設定をしておきます。

ClearCollect(ret,PowerAppsボタン.Run(Camera1.Photo))

これで、ret というコレクションに解析された値を入れることができますので、データテーブル等のデータ (Items) として、値が設定されたコレクションの内容を表示すれば、次のような結果を受け取ることができます。


PowerApps から各種コネクタを利用する場合「このコントロールのデータを渡すとどのようなフォーマットで渡るのか？」「PowerApps のデータソースから追加したコネクタはそれ単体では細かな制御が実施することができないことがあるため、その場合は Flow で実行してデータを連携する」ということを行うのがポイントとなるみたいですね。
PowerApps の環境内の接続の情報は、Flow と同じなので、どちらから実行してもいいと言えばいいのですが、個人的には、単一処理であれば Flow を介さずに PowerApps で直接実行したいかなと。