#3 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/46fd1b0b-5503-0c3c-8d48-272c4731e84d.png)

今回（第３回目）の構成箇所は下図の部分となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/67e80545-d69c-f6b3-93b4-e7e08662ec0e.png)

第３回目は、[第２回](https://qiita.com/turupon/items/6f771a14aa011052ac23) で作成した Functions を API Management（以下、APIM） からコールし、同様の結果が得られることを確認してみます。結果確認のための APIM へのアクセスプログラムを別途作成しています。


---

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

---

## Azure Portal上での API Management の作成
Resource name : apim-ituru-faceapi として API Management を作成します。作成には１時間弱？かかりました、、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/5804f8a3-eccb-a240-a3a9-e632b065ebef.png)

---

## Azure Portal上での API Management のサブスクリプションキーの取得

先程作成した「apim-ituru-faceapi」のサブスクリプションキーを確認しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/67450632-93b0-fc75-1eb3-ad1e1d6f0fa7.png)

---

## Azure Portal上での API Management と Functions の紐付け
API Management の「apim-ituru-faceapi」と Functions の「iturufuncface」を以下の手順で紐付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/6a9ec4ed-7047-a236-91cf-0bf33c039023.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/0400b7d9-40e4-a560-8d47-9188336b7b0d.png)

紐付け結果は以下とまります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/f35d3369-9223-2248-5a69-9ed851d766a8.png)


---

## API の実装
次に、以下の順で 「iturufuncface」の API を実装していきます。
１．「Design」タグで「POST HTTP Trigger」を選択し、「Frontend」ー「Oepn from-based editor」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/273bec8e-70ef-5e1b-7a79-6ddae0f47728.png)

２．画面中央タブ「Responses」を選択し、「Add Response」から「201 Created」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/406e1911-b570-ec41-a8fe-59d409509713.png)


「201 Created」で以下の設定を行い、「Save」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/7a748f74-3228-abf6-dc99-d33c82c4f0c7.png)

３．再度、「Design」タグの「Frontend」から「OpenAPI editor(JSON)」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/408bf24d-8868-ade9-da7f-b728b9185ae7.png)


上記 「２.」で設定された内容が反映されていることを確認します（必要であれば、編集します）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/ed2d2757-84b6-6221-1f1f-70db12da0735.png)

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

---

## APIM へのアクセスプログラムの実行
動作確認のための APIM へのアクセスプログラムは以下となります。

```apimPostImage.py
import urllib.request
import requests
import base64

url = "https://apim-ituru-faceapi.azure-api.net/iturufuncface/HttpTrigger"
headers = {
    'Host': 'apim-ituru-faceapi.azure-api.net',
    'Ocp-Apim-Subscription-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    'Content-Type': 'application/octet-stream',
}

with open("001.png", "rb") as f:
    data = "data:image/png;base64," + base64.b64encode(f.read()).decode("UTF-8")

try:
    response = requests.post(url, headers=headers, data=data)
    print(response.text)
except Exception as e:
    print(e)
```

実行結果は以下となります（画像はローカルにあるものを使用）。

```
$ python apimPostImage.py
{"emotion": "幸", "data": "98.2%,  female,  18.0"}
```

問題なく処理できました。これで APIM から Functions -> FaceAPI をコールし、想定する戻り値をJSON形式で取得できていることを確認できました。

---

## 次回について
次回[（第４回）](https://qiita.com/turupon/items/c445272d15eab7977554)は PowerApps から、本API Management 経由で Functions -> FaceAPI をコールし、同様の結果が得られることを確認してみます。

---

## 参考情報
以下の情報を参考にさせていただきました。感謝申し上げます。
[API ManagementにAzure Functionsを連携してみた](https://tech-lab.sios.jp/archives/22372)
[AzureのAPI Gateway(API Management)を用いてOpenID Connect Providerより発行されたJWTを検証](https://tech-lab.sios.jp/archives/10606)
[PowerApps / PowerAutomate カスタムコネクタを OpenAPI（Swagger）Specから作成する](https://kageura.hatenadiary.jp/entry/customconnector01)