#11 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/837aad2a-5c05-c074-f008-de325e771233.png)

今回（第11回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/24234ba6-c2b0-ab23-a20d-4dc933bf77a7.png)

第11回目は、[第４回](https://qiita.com/turupon/items/c445272d15eab7977554) と同様に、PowerAppsコネクタ から [前回](https://qiita.com/turupon/items/7b317cc99fb9de797137) 作成した API Management（以下、APIM） -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を Array型のJSON形式で取得できることを確認します。

---

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

---

## APIM から OpenAPI のエクスポート
PowerApps と APIM が属する Azureのテナント が異なるため、PowerApps から OpenAPI を通じて、APIM にアクセスさせます。そのため、前回作成した APIM の「iturufuncfacecosmos」から「OpenAPI v2 (JSON)」をエクスポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/0a709019-be63-2697-b170-e5419edcaa1a.png)

ローカルに「iturufuncfacecosmos.swagger.json」というファイル名で OpenAPI がエクスポートされました。

---

## PowerApps での OpenAPI のインポート
PowerApps のサイトに接続し、「データ」-「カスタムコネクタ」から上記でエクスポートされたJSONファイルをインポートします。
画面の手順に従い、コネクタ名には「iturufuncfacecosmos」を定義し、最後に「続行」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/fbf2c5fb-ccc7-ed92-1613-bc267ed76930.png)

---

## PowerApps のカスタムコネクタの定義
上記手順完了後、各タムコネクタの編集画面に切り替わります。任意でコネクタアイコンをアップロードします。必要であれば説明欄を記載します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/22a8869c-a3de-a372-056f-15d2dd03c7db.png)

## Swagger定義
画面上部の「Swaggerエディター」をONにし編集します。編集完了後、「コネクタの更新」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/089360f9-1e06-5a99-316d-87f321932892.png)

Swaggerは下記のように編集しました。

```
swagger: '2.0'
info: {title: iturufuncfacecosmos, version: '1.0', description: Import from "iturufuncfacecosmos"
    Function App}
host: apim-ituru-faceapi.azure-api.net
basePath: /iturufuncfacecosmos
schemes: [https]
consumes: []
produces: []
paths:
  /HttpTriggerGet:
    get:
      description: HttpTriggerGet
      operationId: Get-httptriggerget
      summary: HttpTriggerGet
      produces: [application/json]
      responses:
        '200':
          description: OK
          schema:
            type: object
            properties:
              emo_graph:
                type: array
                items:
                  type: object
                  properties:
                    感: {type: string}
                    値: {type: integer, format: int32}
              gen_graph:
                type: array
                items:
                  type: object
                  properties:
                    性: {type: string}
                    値: {type: integer, format: int32}
          examples:
            application/json:
              emo_graph:
              - {感: 幸, 値: 1}
              - {感: 無, 値: 1}
              gen_graph:
              - {性: male, 値: 1}
              - {性: female, 値: 1}
definitions: {}
parameters: {}
responses: {}
securityDefinitions:
  API キー: {type: apiKey, in: header, name: Ocp-Apim-Subscription-Key}
security:
- API キー: []
tags: []
```

作成されたコネクタは以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/17f0ffa6-36a1-4e31-ce3f-b92b859e06cf.png)

---

## PowerAppsコネクタからのテスト
カスタムコネクタ「iturufuncfacecosmos」の画面から「テスト」タブを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/0a1f1b1f-7eda-61ca-b468-46e67d11db11.png)

上記画面の「テスト操作」ボタンを押します。実行結果は以下となりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/57e46802-9335-d40a-9dac-e5cae5601ee0.png)

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

---

## 次回について
次回[（第12回）](https://qiita.com/turupon/items/40af9bd86915cc1ab2fa)は、Flow から今回作成したカスタムコネクタ経由し、API Management -> 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)
[Swaggerの記法まとめ](https://qiita.com/rllllho/items/53a0023b32f4c0f8eabb)