概要

PowerApps のカメラで撮影した画像を API Management 経由で FaceAPI に転送し、その画像の分析結果「感情、性別、年齢」を PoweApps に表示するアプリの実装手順を数回に分け記載しています。また、並行して、その分析結果を CosmosDB に保存しておき、PowerApps からの累積情報取得リクエストにより累積クエリ結果「感情分布、性別分布」を PowerApps に返し、円グラフ表示する機能の実装手順も複数回に分け記載します。なお、PowerApp の画面作成については省略し、APIコール部分とその戻り値の部分に焦点をあてて記載しています。
本アプリの全体構成は下図となります。

最終回（第13回目）の構成箇所は下図の部分となります。

最終回である第13回目は、第６回と同様に、PowerAppsアプリケーションから前回作成した Flow -> PowerAppsカスタムコネクタ -> API Management（以下、APIM） -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を取得し、円グラフ表示できることを確認します。

実行環境

macOS Big Sur 11.3
Python 3.8.3

PowerAppsアプリケーション構成

画面構成とそれぞれのオブジェクトは以下となります。

分析情報の感情毎の件数は、コレクション「Emotion2021」に保存され、性別毎の件数は、コレクション「Gender2021」に保存されます。

PowerAppsアプリケーションの仕様

PowerAppsアプリケーションの簡単な仕様は以下となります。
最新情報「Button5」を押すと、Flowがコールされ、その結果の感情毎の件数がコレクション「Emotion2021」に、性別毎の件数がコレクション「Gender2021」に保存されます。
コレクション「Emotion2021」は、円グラフ「CompositePieChat2.PieChat2.Items」に紐付けされ、「Labels」に「感」、「Series」に「値」として表示されます。
コレクション「Gender2021」は、円グラフ「CompositePieChat3.PieChat3.Items」に紐付けされ、「Labels」に「性」、「Series」に「値」として表示されます。

ボタン「Button5（最新情報）」の「OnSelect」には以下の設定をおこないます。

Clear(Emotion2021);
Clear(Gender2021);
UpdateContext({flow_res: iTuruFlowFaceCosmos.Run()});
Collect(Emotion2021, flow_res.emo_graph);
Collect(Gender2021, flow_res.gen_graph)

Flowコール

前述の

UpdateContext({flow_res: iTuruFlowFaceCosmos.Run()});

において、「iTuruFlowFaceCosmos.Run()」により Flow がコールされます。　Flowの戻り値は「flow_res」に返されます。

Collect(Emotion2021, flow_res.emo_graph);
Collect(Gender2021, flow_res.gen_graph)

戻り値の「flow_res」はArray型のJSON形式ですので、コレクション「Emotion2021」へは「flow_res.emo_graph」、「Gender2021」へは「flow_res.gen_graph」としてその結果を反映させます。

PowerAppsアプリケーションのテスト

親画面の「累積情報」ボタンを押すことにより「感情分析累積情報」画面に切り替わります。画面下部にある「最新情報」ボタンを押すと、感情毎の件数と性別毎の件数の円グラフが表示されます。

最後に

全13回にわたった「PowerApps アプリで撮影した画像を FaceAPI で感情分析してみました」の実装手順のサマリは以下となります。

第１回
- PowerAppアプリでのカメラ画像の書式確認と、その画像書式によるFaceAPIの感情分析をローカルプログラムで確認
第２回
- Azure Functions -> FaceAPI での感情分析
第３回
- API Management -> Azure Functions -> FaceAPI での感情分析
第４回
- PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
第５回
- Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
第６回
- PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析、その結果をPowerAppsアプリに表示
第７回
- 感情分析結果を CosmosDB への登録と累積されている感情分析の取得をローカルプログラムで確認
第８回
- 第２回で作成した Azure Function に CosmosDBへのデータ登録機能を追加
第９回
- 新たに Azure Functions を作成し、Azure Functions -> ConmosDB での感情分析の取得
第10回
- API Management -> Azure Functions -> ConmosDB での感情分析の取得
第11回
- PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
第12回
- Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
第13回
- PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得、その取得結果をPowerAppsアプリに円グラフ表示

参考情報

以下の情報を参考にさせていただきました。感謝申し上げます。
Microsoft (Office365) PowerAppsからFlowに、マップデータを渡して、配列データを受け取る方法
 PowerAppsとflowで入力チェック処理
 #PowerApps のJSON関数を使ったFlowへのパラメータ渡し
 PowerApps から Flow を呼び出して応答をコレクションとして受け取る際の注意点