#10 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/15fc23ff-db40-4732-30d3-cda003b623af.png)

今回（第10回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/5bbd5e73-4f4e-c758-01a5-23e66b5cd9aa.png)

第10回目は、[第３回](https://qiita.com/turupon/items/b48f56637e0056a46a00) で作成した API Management（以下、APIM） に [第9回](https://qiita.com/turupon/items/171de03b5734fe147b9e) で作成した Functions を登録し、前回と同様の結果が得られることを確認してみます。

---

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

---

## Azure Portal上での API Management と Functions の紐付け
第３回で作成した API Management の「apim-ituru-faceapi」に 前回作成した Functions の「iturufuncfacecosmos」を紐付けます。手順については[「第３回」](https://qiita.com/turupon/items/b48f56637e0056a46a00)を参照ください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/3524bdf5-3d30-e6db-ad71-6e345c43dbb9.png)

紐付け結果は以下とまります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/f30ca7f2-3816-d46a-012f-63f79a382aca.png)

---

## API の実装
次に、以下の順で 「iturufuncfacecosmos」の API を実装していきます。
「Design」タグで「GET HTTPTriggerGet」を選択し、「Frontend」ー「Oepn from-based editor」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/96b48596-8422-c332-20a5-474f3ae0d8a7.png)

画面中央タブ「Responses」を選択し、「Add Response」から「200 OK」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/0f6dcc35-0155-f1cc-78ea-9e1310840a75.png)

「200 OK」の「+ Add representation」 を押し 「CONTENT TYPE」 で 「application/json」 を選択します。
次に「SAMPLE」に以下を入力します。

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


次に「DEFINITION」を押し、「+ New definition」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/00b1319d-98dd-8137-a72a-44af0daf0c7c.png)

「Definition name」に「FaceCosmosGetResponse」と入力し、画面下部の「Create Definition」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/de67872c-5760-8f67-cefa-6b71d11934af.png)

元の画面に戻り、画面下部の「Save」ボタンを押します。
再度、「Design」タグの「Frontend」から「OpenAPI editor(JSON)」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/9c8f1db0-943f-e30a-581a-27a7c53d3dc1.png)

上記で定義（definition）された内容が反映されていることを確認します（もしくは、編集します）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/802aa280-5ef9-7d7d-df58-d6224b43ab33.png)

これで、APIの実装は完了です。

---

## APIM でのデータ取得確認
画面上部から「Test」タブを選択し、表示される画面の下部にある「Send」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/90a4314e-7f75-2a03-af3b-3249457b4352.png)

実行結果が表示され、APIM -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を Array型のJSON形式で取得できることを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/dd6a9a82-4e79-3056-dce3-4342a1721787.png)

---

## 次回について
次回[（第11回）](https://qiita.com/turupon/items/94cab9008e0bf10b8d89)は、PowerApps から 本APIM -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を Array型のJSON形式で取得できることを確認します。

---

## 参考情報
以下の情報を参考にさせていただきました。感謝申し上げます。
[Microsoft (Office365) PowerAppsからFlowに、マップデータを渡して、配列データを受け取る方法](https://www.kwbtblog.com/entry/2019/06/14/022309)
[PowerApps / PowerAutomate カスタムコネクタを OpenAPI（Swagger）Specから作成する](https://kageura.hatenadiary.jp/entry/customconnector01)