#4 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/ebcde39d-fb1e-5dae-5548-4ba628bf01f4.png)

今回（第４回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/04377187-8c98-e78d-4210-879a02fc5047.png)

第４回目は、[第３回](https://qiita.com/turupon/items/6f771a14aa011052ac23) で作成した API Management（以下、APIM） を PowerAppsカスタムコネクタ からコールし、同様の結果が得られることを確認してみます。


---

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

---

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

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

---

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

---

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

## Swagger定義
画面上部の「Swaggerエディター」をONにし編集します。編集完了後、「コネクタの更新」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/d1f5bcab-0022-22fa-1c44-daab45835490.png)

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

```
swagger: '2.0'
info: {title: iturufuncface, version: '1.0', description: Import from "iturufuncface"
    Function App}
host: apim-ituru-faceapi.azure-api.net
basePath: /iturufuncface
schemes: [https]
consumes: []
produces: []
paths:
  /HttpTrigger:
    post:
      operationId: Post-httptrigger
      summary: Face Emotion from FY21-DX
      description: Face Emotion from apim-ituru-faceapi - iturufuncface
      produces: [application/json]
      responses:
        '201':
          description: Created
          schema:
            type: object
            properties:
              emotion: {type: string, example: 笑}
              data: {type: string, example: 88.8%}
          examples:
            application/json: {emotion: 笑, data: 88.8%}
      parameters:
      - name: imagebinary
        in: body
        description: Camera Photo binary
        required: true
        schema: {type: string}
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/e5d248c4-1a21-4a17-69a5-4e509e4aa17f.png)

---

## PowerAppsからのテスト
カスタムコネクタ「apim-ituru-face-connect」の画面から「テスト」タブを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/07116881-6b45-6fd6-7e8a-5cb5846e07f2.png)

任意の画像のBase64テキストを [Base64エンコーダー](https://lab.syncer.jp/Tool/Base64-encode/) で生成し、上記の「ImageBinary」欄に貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/9075c482-e0b0-1e93-91ed-fd96ce927d35.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/d59876af-506a-8ad8-14d7-3351d831162d.png)

上記画面の「テスト操作」ボタンを押します。実行結果は以下となりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/07379a6a-131e-5236-cf9f-8b9c2229dccd.png)

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

---

## 次回について
次回[（第５回）](https://qiita.com/turupon/items/f3a739988a35f1647d65)は Flow から今回作成したカスタムコネクタ経由し、API Management -> Functions -> FaceAPI で同様の結果が得られることを確認してみます。

---

## 参考情報
以下の情報を参考にさせていただきました。感謝申し上げます。
[PowerApps / PowerAutomate カスタムコネクタを OpenAPI（Swagger）Specから作成する](https://kageura.hatenadiary.jp/entry/customconnector01)
[Swaggerの記法まとめ](https://qiita.com/rllllho/items/53a0023b32f4c0f8eabb)