#PowerApps のJSON関数を利用した写真の一括登録

はじめに

PowerAppsではコレクションやテーブルからJSONデータを、画像、音声等からdatauriを生成するJSON関数が用意されています。
本投稿では、このJSON関数を利用して、PowerAppsのカメラで撮影した画像をFlowを経由してSharePointドキュメントライブラリに（複数画像を）一括登録する方法を記載します。
なお、JSON関数についてはこちらをごらんください。
※モバイル対応しています。

PowerApps側は簡単に

レシピ

PowerAppsサイド

カメラコントロール・・・1個
ギャラリー・・・1個（ためる写真を表示する用）
ボタン・・・2個 （CollectionをJSONに変換する用、Flow実行用）

Flowサイド

Parse JSON・・・1個（PowerAppsから受け取ったデータをParse）
Create file・・・1個（SharePointドキュメントライブラリにファイル作成）

カメラ画像をdatauriに変換する

まずカメラ画像をdatauriに変換します。カメラコントロールのOnSelectに以下の関数を設定します。

Camera.OnSelect

UpdateContext(
    {
        photouri: 
            JSON(Camera1.Photo,JSONFormat.IncludeBinaryData) //ここでdatauriを作成
    }
);

ポイントはJSON(Camera1.Photo, JSONFormat.IncludeBinaryData)です。これによってカメラ画像のdatauriがPowerAppsの変数にセットされます。

Collectionにためる

複数の画像（のdatauri）をCollectionに格納するためにCamera.OnSelectを書き換えます。

Camera.OnSelect

UpdateContext(
    {
        photouri: JSON(Camera1.Photo,JSONFormat.IncludeBinaryData)
    }
);
Collect(
    CamPhoto,
    {
        ID: idnum,
        data: Substitute(
            photouri,
            """", //ダブルクォーテーションを消す
            ""
        )
    }
);
UpdateContext({idnum: idnum + 1})

Collectionに入れる際には、のちのちFlowで処理しやすいように、変数に入れたdatauriの前後についている"をはずしておきます。

Flowに渡すためのJSONを作る

Flowに渡すためのJSONはたったの一行です。まさにこれがJSON関数のすごいところです。
Set(postBody,JSON(CamPhoto));
(SetかUpdateContextかはアプリに合わせてください)
これで撮りためた画像とIDを含むJSONが作成されました。

Flow実行＋Flow側の処理

Flowの実行は単純に、postBodyをFlowの引数に渡すだけです。
CreatePhotos.Run(postBody)

Flow側では以下のように処理しています。

ここではParseJSONのスキーマは

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "ID": {
                "type": "integer"
            },
            "data": {
                "type": "string"
            }
        },
        "required": [
            "ID",
            "data"
        ]
    }
}

CreateCreate fileのFile Contentは
dataUriToBinary(items('Apply_to_each')?['data'])
としています。

うごき

こんなかんじで動きます。

複数ファイルの一括登録 pic.twitter.com/fhYokTpd1N

— Hiro (@mofumofu_dance) July 22, 2019

できたファイル