More than 3 years have passed since last update.

#11 PowerApps アプリで撮影した画像を FaceAPI で感情分析してみました（累積分析）

Last updated at 2021-05-20Posted at 2021-05-20

概要

PowerApps のカメラで撮影した画像を API Management 経由で FaceAPI に転送し、その画像の分析結果「感情、性別、年齢」を PoweApps に表示するアプリの実装手順を数回に分け記載しています。また、並行して、その分析結果を CosmosDB に保存しておき、PowerApps からの累積情報取得リクエストにより累積クエリ結果「感情分布、性別分布」を PowerApps に返し、円グラフ表示する機能の実装手順も複数回に分け記載します。なお、PowerApp の画面作成については省略し、APIコール部分とその戻り値の部分に焦点をあてて記載しています。
本アプリの全体構成は下図となります。

今回（第11回目）の構成箇所は下図の部分となります。

第11回目は、第４回と同様に、PowerAppsコネクタから前回作成した 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)」をエクスポートします。

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

PowerApps での OpenAPI のインポート

PowerApps のサイトに接続し、「データ」-「カスタムコネクタ」から上記でエクスポートされたJSONファイルをインポートします。
画面の手順に従い、コネクタ名には「iturufuncfacecosmos」を定義し、最後に「続行」ボタンを押します。

PowerApps のカスタムコネクタの定義

上記手順完了後、各タムコネクタの編集画面に切り替わります。任意でコネクタアイコンをアップロードします。必要であれば説明欄を記載します。

Swagger定義

画面上部の「Swaggerエディター」をONにし編集します。編集完了後、「コネクタの更新」を押します

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: []

作成されたコネクタは以下のように表示されます。