#13 PowerApps アプリ で撮影した画像を FaceAPI で感情分析してみました（累積分析）


## 概要
PowerApps のカメラで撮影した画像を API Management 経由で FaceAPI に転送し、その画像の分析結果「感情、性別、年齢」を PoweApps に表示するアプリの実装手順を数回に分け記載しています。また、並行して、その分析結果を CosmosDB に保存しておき、PowerApps からの累積情報取得リクエストにより累積クエリ結果「感情分布、性別分布」を PowerApps に返し、円グラフ表示する機能の実装手順も複数回に分け記載します。なお、PowerApp の画面作成については省略し、APIコール部分とその戻り値の部分に焦点をあてて記載しています。
本アプリの全体構成は下図となります。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/22dcf80d-031a-8639-87a0-d2103c855569.png)

最終回（第13回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/912da193-bc4a-1263-bdb9-2419c09207c5.png)

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

---

## 実行環境
macOS Big Sur 11.3
Python 3.8.3

---

### PowerAppsアプリケーション構成
画面構成とそれぞれのオブジェクトは以下となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/e115b1fd-4412-9485-3c25-db6bd494a56c.png)

分析情報の感情毎の件数は、コレクション「Emotion2021」に保存され、性別毎の件数は、コレクション「Gender2021」に保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/99abf208-2f22-ef3d-086b-d831fb53f33a.png)

---

## PowerAppsアプリケーションの仕様
PowerAppsアプリケーションの簡単な仕様は以下となります。
最新情報「Button5」を押すと、Flowがコールされ、その結果の感情毎の件数がコレクション「Emotion2021」に、性別毎の件数がコレクション「Gender2021」に保存されます。
コレクション「Emotion2021」は、円グラフ「CompositePieChat2.PieChat2.Items」に紐付けされ、「Labels」に「感」、「Series」に「値」として表示されます。
コレクション「Gender2021」は、円グラフ「CompositePieChat3.PieChat3.Items」に紐付けされ、「Labels」に「性」、「Series」に「値」として表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/594ce4ae-15cd-37a9-8140-73a4e5ae4ab1.png)

ボタン「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アプリケーションのテスト
親画面の「累積情報」ボタンを押すことにより「感情分析 累積情報」画面に切り替わります。画面下部にある「最新情報」ボタンを押すと、感情毎の件数 と 性別毎の件数の円グラフが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/102f3850-2ad0-9531-1654-d7ee1abd95c1.png)

---

## 最後に
全13回にわたった「PowerApps アプリ で撮影した画像を FaceAPI で感情分析してみました」の実装手順のサマリは以下となります。
- [第１回](https://qiita.com/turupon/items/b903b3d9483c5bab7e99)
    - PowerAppアプリでのカメラ画像の書式確認と、その画像書式によるFaceAPIの感情分析をローカルプログラムで確認
- [第２回](https://qiita.com/turupon/items/6f771a14aa011052ac23)
  - Azure Functions -> FaceAPI での感情分析
- [第３回](https://qiita.com/turupon/items/b48f56637e0056a46a00)
  - API Management -> Azure Functions -> FaceAPI での感情分析
- [第４回](https://qiita.com/turupon/items/c445272d15eab7977554)
  - PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
- [第５回](https://qiita.com/turupon/items/f3a739988a35f1647d65)
  - Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析
- [第６回](https://qiita.com/turupon/items/2475ae4e9e39e1faf07a)
  - PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> FaceAPI での感情分析、その結果をPowerAppsアプリに表示
- [第７回](https://qiita.com/turupon/items/a7c5459028b142ee6839)
  - 感情分析結果を CosmosDB への登録と累積されている感情分析の取得をローカルプログラムで確認
- [第８回](https://qiita.com/turupon/items/cc61092729a696b30ef1)
  - 第２回で作成した  Azure Function に CosmosDBへのデータ登録機能を追加
- [第９回](https://qiita.com/turupon/items/171de03b5734fe147b9e)
  - 新たに Azure Functions を作成し、Azure Functions -> ConmosDB での感情分析の取得
- [第10回](https://qiita.com/turupon/items/7b317cc99fb9de797137)
  - API Management -> Azure Functions -> ConmosDB での感情分析の取得
- [第11回](https://qiita.com/turupon/items/94cab9008e0bf10b8d89)
  - PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
- [第12回](https://qiita.com/turupon/items/40af9bd86915cc1ab2fa)
  - Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得
- [第13回](https://qiita.com/turupon/items/07800b1e400219cd8f22)
  - PowerAppsアプリ -> Flow -> PowerAppsカスタムコネクタ -> API Management -> Azure Functions -> ConmosDB での感情分析の取得、その取得結果をPowerAppsアプリに円グラフ表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/8ac77839-16cf-1b3e-0cc6-6c6243e6723f.png)

---

## 参考情報
以下の情報を参考にさせていただきました。感謝申し上げます。
[Microsoft (Office365) PowerAppsからFlowに、マップデータを渡して、配列データを受け取る方法](https://www.kwbtblog.com/entry/2019/06/14/022309)
[PowerAppsとflowで入力チェック処理](https://qiita.com/sukkyxp/items/bdeb6d214419a662448b)
[#PowerApps のJSON関数を使ったFlowへのパラメータ渡し](https://qiita.com/h-nagao/items/83fa46547eece917d496)
[PowerApps から Flow を呼び出して応答をコレクションとして受け取る際の注意点](https://blog.engineer-memo.com/2018/08/25/powerapps-%E3%81%8B%E3%82%89-flow-%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%97%E3%81%A6%E5%BF%9C%E7%AD%94%E3%82%92%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%97%E3%81%A6/)