LoginSignup
0
0

More than 1 year has passed since last update.

#12 PowerApps アプリ で撮影した画像を FaceAPI で感情分析してみました(累積分析)

Last updated at Posted at 2021-05-20

概要

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

今回(第12回目)の構成箇所は下図の部分となります。
image.png

第12回目は、第5回 と同様に、PowerAppsコネクタ から 前回 作成した API Management(以下、APIM) -> Functions 経由で CosmosDB から感情毎の件数と性別毎の件数を Array型のJSON形式で取得できることを確認します。今回構成する Flow の最終形は下図となります。
image.png


実行環境

macOS Big Sur 11.3
Python 3.8.3


PowerApps での Flow の作成

PowerApps のサイトに接続し、「フロー」-「新しいフロー」-「インスタントクラウドフロー」を選択します。
次の画面のフロー名に「iTuruFlowFaceCosmos」を入力し、フローをトリガーする方法から「PowerApps」を選択します。最後に「作成」ボタンを押します
image.png


① 処理フローの定義 : PowerAppsカスタムコネクタのコール

前回作成した PowerAppsカスタムコネクタ をコールするために、画面上で「新しいステップ」を押します。表示される操作選択画面の「カスタム」タブを選択し、表示される PowerAppsカスタムコネクタ「iturufuncfacecosmos」を選択します。その後、該当するアクションを選択します。
image.png


② 処理フローの定義 : PowerAppsへの応答

PowerAppsアプリケーションに応答(感情毎の件数、性別毎の件数)を返すために、画面上で「新しいステップ」を押します。表示される操作選択画面の上部検索欄に「応答」をいれ、「すべて」のところに表示されている「要求」を選択します。アクション欄に表示される「応答」を選択します。
image.png

応答画面の「本文」欄をアタッチし、その欄の下部表示され「動的コンテンツの追加」を選択します。新たに表示される画面から「body」を選択します。
image.png

応答画面の下部にある「詳細オプションを表示する」を選択し、その後、「サンプルから生成」ボタンを押します。
image.png

新たに表示される「サンプル JSON ペイロードの挿入」画面に以下のJSONを貼り付け、「完了」ボタンを押します。
第10回の「APIの実装」説明箇所で使用した「SAMPLE」と同じものとなります。

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

応答画面の「応答本文のJSONスキーマ」が表示されます。
image.png

生成されたJSONスキーマは以下となります。

{
    "type": "object",
    "properties": {
        "emo_graph": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "感": {
                        "type": "string"
                    },
                    "値": {
                        "type": "integer"
                    }
                },
                "required": [
                    "感",
                    "値"
                ]
            }
        },
        "gen_graph": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "性": {
                        "type": "string"
                    },
                    "値": {
                        "type": "integer"
                    }
                },
                "required": [
                    "性",
                    "値"
                ]
            }
        }
    }
}

これで、必要な処理フローが完成しました。「保存」ボタンを押します。
image.png


Flowでのテスト

Flow画面の右上部「テスト」タブを選択します。
最初の画面で「手動」を選択し、「テスト」ボタンを押します。
次の画面で「フローの実行」ボタンを押します。
フローの実行が正常に完了すると、最後の画面となります。
image.png

実行結果を確認するために、上記の最後の画面の中央部にある「フロー実行ページ」を選択します。実行履歴画面が表示されるので、該当するテスト開始時刻のものを選択し、フローの正常実行を確認します。
image.png

上記画面にて、最後の処理フロー「応答」を選択し、実行詳細を確認します。
image.png

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


次回について

次回最終回(第13回)は、PowerAppsアプリケーションから 本Flow をコールし、PowerAppsカスタムコネクタ -> API Management -> Functions -> CosmosDB から感情毎の件数と性別毎の件数を取得し、グラフ表示できることを確認します。


参考情報

以下の情報を参考にさせていただきました。感謝申し上げます。
Microsoft (Office365) PowerAppsからFlowに、マップデータを渡して、配列データを受け取る方法
PowerAppsとflowで入力チェック処理
#PowerApps のJSON関数を使ったFlowへのパラメータ渡し
PowerApps から Flow を呼び出して応答をコレクションとして受け取る際の注意点

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0