Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

クラウドAI by ナレコムAdvent Calendar 2021

Day 17
@Oxyride(M Y)

Power Apps から API 呼び出す（ついでに Face API で感情分析）

Last updated at Posted at 2021-12-17

はじめに

Power Apps から API どうやって叩くの？
結論：Power Automate使えばいい

今回やりたいこと

Power Apps から直接 API は叩けないので、Power Automate を利用します。
APIを使用する方法としては、Power Apps のカスタムコネクタを利用する方法もありますが、今回は簡易的に利用するだけなので Power Automate で POST する方法をとります。
Power Apps から API を使う一連の操作の練習として、Azure の Face API を使って感情分析をしてみます。

具体的には、Power Apps で写真とる→ Face API に画像投げる→返ってきた分析結果を Power Apps で表示
という簡易的なアプリを作成したいと思います。

Face API 立ち上げ方法は今回は割愛します。
API のエンドポイントとキーをメモっておいてください。

実装手順

  1. Power Automate で Face API 呼び出し分析結果取得
  2. Power Apps で撮った画像データをフローへ流す
  3. フローから出力された分析結果を Power Apps で表示

1. Power Automate で Face API 呼び出し分析結果取得

フローの全体像

全体像は以下になります。
2021-12-17_15h15_22.png

フローの作成

まず、Power Appsの編集画面(https://make.powerapps.com)で、サイドメニューからフローを選択します。

以下で入力して「作成」をクリックします。
フロー名：TestFlow
トリガーの方法：Power Apps
2021-12-17_15h12_40.png

変数の作成

まず、Power Apps からの入力を Power Automate で利用できるよう変数を作成します。
「新しいステップ」を選択。「作成」と検索し以下の操作を選択してください
2021-12-17_15h16_29.png

「動的なコンテンツ」をクリックし、「Power Apps で確認」を選択
2021-12-17_15h16_39.png

API フローの作成

次に、Power Apps から受け取った画像データで API を叩くステップを作成します。
「新しいステップ」を選択。「http」と検索し以下の操作を選択してください。
2021-12-17_15h17_27.png

ここで、API を叩くことができます。
今回は Face API の感情分析を利用するので以下のように入力してください。
URI と KEY はご自身の値に変更してください。
2021-12-17_15h20_18.png

返却結果の解析

次に、Face APIから帰ってきた JSONデータ を Power Automate で利用できるように、JSON解析を行います。
「新しいステップ」を選択。「json」と検索し以下の操作を選択してください。
2021-12-17_15h21_05.png

「動的なコンテンツの追加」で以下のように入力してください。
Face APIの仕様上、画像に移っている各人に対しての分析結果をリスト形式で返すため、今回は1人目の要素のみを指定しています。

2021-12-17_15h22_02.png
スキーマで想定しているJSONの構造を指定します。サンプルから生成もできます。
今回は以下のスキーマで定義しました。

{
    "type": "object",
    "properties": {
        "faceId": {
            "type": "string"
        },
        "faceRectangle": {
            "type": "object",
            "properties": {
                "top": {
                    "type": "integer"
                },
                "left": {
                    "type": "integer"
                },
                "width": {
                    "type": "integer"
                },
                "height": {
                    "type": "integer"
                }
            }
        },
        "faceAttributes": {
            "type": "object",
            "properties": {
                "emotion": {
                    "type": "object",
                    "properties": {
                        "anger": {
                            "type": "number"
                        },
                        "contempt": {
                            "type": "number"
                        },
                        "disgust": {
                            "type": "number"
                        },
                        "fear": {
                            "type": "number"
                        },
                        "happiness": {
                            "type": "number"
                        },
                        "neutral": {
                            "type": "number"
                        },
                        "sadness": {
                            "type": "number"
                        },
                        "surprise": {
                            "type": "number"
                        }
                    }
                }
            }
        }
    }
}

2021-12-17_15h22_30.png

解析結果の出力

最後に、解析結果をPower Appsへ出力します。
「新しいステップ」を選択。「power apps」と検索し以下の操作を選択してください。
2021-12-17_15h22_46.png
今回は各感情値を返すため以下のように作成しました。
2021-12-17_15h23_03.png

これで Power Automate で Face API を呼び出すことができました。

2. Power Apps で撮った画像データをフローへ流す

アプリの作成

まず、Power Appsの編集画面(https://make.powerapps.com)で、サイドメニューからアプリを選択します。
アプリ名を入力して、「作成」をクリックします。
2021-12-17_16h45_30.png
まっさらなアプリが立ち上がりました。
2021-12-17_16h49_09.png

カメラの設置

まず、写真を撮るためのカメラを設置します。
「挿入」→「カメラ」を選択します。
2021-12-17_16h50_33.png

撮影時のアクション追加

設置したカメラに先ほど作成したフローを呼び出す処理を追加します。
カメラの詳細設定から、「OnSelect」を選択します。
「アクション」→「Power Automate」→「TestFlow」(さっき作ったやつ)を選択します。
2021-12-17_16h52_19.png

これでカメラとTest Flow が連携できたので、処理を追加していきます。
「OnSelect」に以下を入力します。

UpdateContext( { photouri: Mid(Substitute(JSON(Camera1.Photo,JSONFormat.IncludeBinaryData), """", ""), 23) } ); 
UpdateContext({flow_res: TestFlow.Run(photouri)});
Collect( Emotions, flow_res );

処理内容としては、
カメラで撮った画像データ（base64形式）から不要文字列を削除して、バイナリデータへ変換
画像バイナリデータをフローへ送信
データテーブルにフローの結果を格納
となっています。
2021-12-17_17h01_29.png

Alt + クリック で写真を撮ることができます。
Power Appsのファイルタブからコレクションに移動すると、保管されているテーブルを確認することができます。
分析結果をしっかりと格納できていることが確認できました。
2021-12-17_17h07_10.png

3. 分析結果をApps に表示

「データテーブル」を追加し、データソースに「Emotions」を選択します。
2021-12-17_17h11_14.png
「カスタマイズウィンドウから～」を選択し、「フィールドの追加」ですべてにチェックを入れます。
2021-12-17_17h11_30.png
少し配置を整えて、完成です！
2021-12-17_17h16_07.png

おわりに

Power Platform を相互に連携させることで幅広い機能を実現できそうです。
連携もかなり楽にできたので、思いついたことぱぱっと実現するのに最適なサービスだと思います。
次はPower BIも連携させたもの作ってみようかと思います！

参考ドキュメント

・Face API
https://westus.dev.cognitive.microsoft.com/docs/services/563879b61984550e40cbbe8d/operations/563879b61984550f30395236
・Power Apps
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/
・Power Automate
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/using-logic-flows

6
5
3

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
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?