#12 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/87ab48c9-194d-ff64-9a8a-2da2b9c9094e.png)

今回（第12回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/72b68f6c-63ca-8dea-5acb-99f276c8b89c.png)

第12回目は、[第５回](https://qiita.com/turupon/items/f3a739988a35f1647d65) と同様に、PowerAppsコネクタ から [前回](https://qiita.com/turupon/items/94cab9008e0bf10b8d89) 作成した API Management（以下、APIM） -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を Array型のJSON形式で取得できることを確認します。今回構成する Flow の最終形は下図となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/d66b00ee-7c51-89bc-f7f8-05a999750eee.png)

---

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

---

## PowerApps での Flow の作成
PowerApps のサイトに接続し、「フロー」-「新しいフロー」-「インスタントクラウドフロー」を選択します。
次の画面のフロー名に「iTuruFlowFaceCosmos」を入力し、フローをトリガーする方法から「PowerApps」を選択します。最後に「作成」ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/cd34ce1f-2bec-1a2f-7fa5-fd3ab58564cc.png)


---

## ① 処理フローの定義 ： PowerAppsカスタムコネクタのコール
前回作成した PowerAppsカスタムコネクタ をコールするために、画面上で「新しいステップ」を押します。表示される操作選択画面の「カスタム」タブを選択し、表示される PowerAppsカスタムコネクタ「iturufuncfacecosmos」を選択します。その後、該当するアクションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/d1768954-2e96-c2bd-ccde-5b412a824c18.png)

---

## ② 処理フローの定義 ： PowerAppsへの応答
PowerAppsアプリケーションに応答（感情毎の件数、性別毎の件数）を返すために、画面上で「新しいステップ」を押します。表示される操作選択画面の上部検索欄に「応答」をいれ、「すべて」のところに表示されている「要求」を選択します。アクション欄に表示される「応答」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/85dd28ef-87d2-1b3e-1e7b-02a930f9210a.png)

応答画面の「本文」欄をアタッチし、その欄の下部表示され「動的コンテンツの追加」を選択します。新たに表示される画面から「body」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/b3e77d17-9cf4-0b37-cbf5-00a85a6ed71b.png)

応答画面の下部にある「詳細オプションを表示する」を選択し、その後、「サンプルから生成」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/a8e7a131-6a75-9ffb-ed3e-ad0824d48097.png)

新たに表示される「サンプル JSON ペイロードの挿入」画面に以下のJSONを貼り付け、「完了」ボタンを押します。
※ [第10回](https://qiita.com/turupon/items/7b317cc99fb9de797137)の「APIの実装」説明箇所で使用した「SAMPLE」と同じものとなります。

```
{
    "emo_graph": [
        {
            "感": "幸",
            "値": 2
        },
        {
            "感": "無",
            "値": 1
        }
    ],
    "gen_graph": [
        {
            "性": "male",
            "値": 1
        },
        {
            "性": "female",
            "値": 2
        }
    ]
}
```

応答画面の「応答本文のJSONスキーマ」が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/f7ea360e-bfb9-0331-c2bb-f0b476ce87f8.png)

生成されたJSONスキーマは以下となります。

```
{
    "type": "object",
    "properties": {
        "emo_graph": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "感": {
                        "type": "string"
                    },
                    "値": {
                        "type": "integer"
                    }
                },
                "required": [
                    "感",
                    "値"
                ]
            }
        },
        "gen_graph": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "性": {
                        "type": "string"
                    },
                    "値": {
                        "type": "integer"
                    }
                },
                "required": [
                    "性",
                    "値"
                ]
            }
        }
    }
}
```

これで、必要な処理フローが完成しました。「保存」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/6cf31d4b-676b-05db-0c3b-7c95153c8d83.png)

---

## Flowでのテスト
Flow画面の右上部「テスト」タブを選択します。
最初の画面で「手動」を選択し、「テスト」ボタンを押します。
次の画面で「フローの実行」ボタンを押します。
フローの実行が正常に完了すると、最後の画面となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/2e5f46a6-8929-c4f4-4634-723b3e6656e6.png)

実行結果を確認するために、上記の最後の画面の中央部にある「フロー実行ページ」を選択します。実行履歴画面が表示されるので、該当するテスト開始時刻のものを選択し、フローの正常実行を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/42fc631a-8bad-2080-90ad-38b6da965fdb.png)

上記画面にて、最後の処理フロー「応答」を選択し、実行詳細を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/5eeea88b-d082-c99b-afd6-49e318ff7cd2.png)

問題なく分析結果を取得できました。これで Flow から PowerAppsカスタムコネクタ -> APIM -> Functions -> CosmosDB にて、想定する戻り値をArray型のJSON形式で取得できていることを確認できました。

---

## 次回について
次回最終回[（第13回）](https://qiita.com/turupon/items/07800b1e400219cd8f22)は、PowerAppsアプリケーションから 本Flow をコールし、PowerAppsカスタムコネクタ -> API Management -> Functions -> CosmosDB から感情毎の件数と性別毎の件数を取得し、グラフ表示できることを確認します。

---

## 参考情報
以下の情報を参考にさせていただきました。感謝申し上げます。
[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/)