Power Appsにおける画像の扱いについて

新年一発目はPower Apps。

Power Appsアプリは画像を扱えますが、作り込む前に把握しておかないと面倒な点が幾つかあります。
この記事ではそれら画像を扱う際のTipsや注意点を書いていきます。

Power Appsで画像を扱えるコントロール

画像を扱えるのコントロールは以下の三つです。

画像の追加

カメラ

画像

Power Appsにおける画像

Power Appsにおいて、画像は画像というデータ型で扱われます。
キャンバスアプリのデータ型

この画像データ型を使える形式は以下の五つです。

形式	参照先
アプリのリソースに追加した画像	appres://resources/ImageFileName
コントロールで取り込んだ画像	appres://blobmanager/xxx.../n
Web上の画像へのリンク	https://northwindtraders.com/logo.jpg
データURIスキームを使用するインラインイメージ	data:image/png;base64,xxxxx....
Binary データ

形式 : URI

Power Appsは基本的にURIテキスト文字列を利用したURI参照を行って画像を読み出します。

該当するのはこの三つです。

形式	参照先
アプリのリソースに追加した画像	appres://resources/ImageFileName
コントロールで取り込んだ画像	appres://blobmanager/xxx.../x
Web上の画像へのリンク	https://northwindtraders.com/logo.jpg

データは画像コントロールに画像が表示されるタイミングで取得されるため、不必要な画像データを取得することなくアプリを構築できます。

下の例では、データ テーブルで選択した国旗だけが画像コントロールに表示されています。
それ以外の画像は他のアイテムを選択するまで読み込まれません。

形式 : データURIスキームを使用するインラインイメージ

画像コントロールは、文字列で記されたデータURIスキームを使用するインラインイメージを表示する事もできます。
Imageプロパティに文字列として設定するだけです。

Binary データ

画像そのものです。

Binaryの取り込みは即ち画像自体の取り込みなので、表示非表示に関係なくファイルサイズに応じてアプリに負荷が掛かります。

これはアプリのリソースに追加した画像も同様で、下手に使うとアプリ起動時の読み込みが遅くなります。

画像の追加コントロール

画像の追加コントロールを挿入すると、AddMediaButtonコントロールとUploadedImageコントロールで構成されたグループAddMediaWithImageがスクリーンに追加されます。

この内、画像の追加コントロール特有の物はAddMediaButtonだけです。
UploadedImageはただの画像コントロールなので消しても問題ありません。

AddMediaButtonの挙動

AddMediaButtonは特殊なボタンです。
AddMediaButtonのOnSelectプロパティは初期値がfalseですが、クリックすると画像を取り込めます。

つまりOnSelectの内容に関係なく、画像の取り込みだけに使える専用のボタンです。

画像の格納場所

画像はAddMediaButtonに紐付いたappres://blobmanager/path/nに格納されます。
複数枚の画像を格納できず、取り込みごとに上書きです。

格納先のappres://blobmanager/path/nは各AddMediaButtonのAddMediaButton.Mediaから文字列として読み出せます。

アプリ起動時のAddMediaButton.MediaはBlankで、各コントロールごとに最初に画像を取り込んだ際に初めてappres://blobmanager/path/nが割り当てられます。

また、appres://blobmanager/path/nのpathは同一アプリ内であれば共通です。
注意点としてpathはアプリ起動毎に変わる為、アプリにハードコーディングする事はできません。

末尾のnは画像の取り込みごとに+1されます。

取込回数	appres://blobmanager
1回目	appres://blobmanager/path/1
2回目	appres://blobmanager/path/2
3回目	appres://blobmanager/path/3

このURIはAddMediaButton.Mediaから読み出せる最新のURIのみ有効で、直接上書済みのn番台URIを指定してもBlankが返ってきます。

複数の画像の追加コントロールを配置した場合

複数の画像の追加コントロールを配置した場合、コントロールごとに格納場所が区別されます。

例えば3枚画像を取り込んだ状況で、更に以下の三つのAddMediaButtonコントロールで順番に画像を取り込んだ場合、appres://blobmanagerのURIは以下のようになります。

コントロール名	appres://blobmanager
AddMediaButton1	appres://blobmanager/path/4
AddMediaButton2	appres://blobmanager/path/5
AddMediaButton3	appres://blobmanager/path/6

この時、AddMediaButton.Mediaから読み出せるURIは各コントロールごとに有効です。
つまりAddMediaButton1で新しい画像を取り込んでも他のAddMediaButtonのURIは有効のままです。

カメラコントロール

カメラコントロールを挿入すると、Cameraコントロールがスクリーンに追加されます。

Cameraの挙動

Cameraは画像の表示とボタンが一体化した特殊なコントロールです。
OnSelectプロパティの初期値はfalseですが、クリックするとカメラに表示されている画像をCamera.Photoに格納します。

これもOnSelectの内容に関係なく、画像の取り込みだけに使える専用のボタンです。

画像の格納場所

画像はカメラコントロールごとのCamera.Photoに格納されます。
複数枚の画像は格納できず、撮影ごとに上書きされます。

画像の追加コントロールで使ったAddMediaButtonのAddMediaButton.Mediaの中身はappres://blobmanager/path/nという文字列でしたが、Camera.PhotoにはBinaryの画像が格納されています。

複数のカメラコントロールを配置した場合

配置されたコントロールごとに別々のCamera.Photoに画像が格納されます。
Camera.Photoはコントロール名.Photoなので、画像もコントロールごとに区別されます。

Power Appsで画像を扱う際のTips・注意点

URIとBinary

画像はURIとBinaryの場合で扱いが異なります。

URI

URIは画像コントロールのImageプロパティに設定し、画像として読み込まれないとBinaryになりません。

例えば画像の追加コントロールのAddMediaButton.Mediaを直接Collectした場合、中身はURIの文字列なのでappres://blobmanager/path/nだけがコレクションに格納される。

画像の取り込みNG

ClearCollect(画像取り込み,AddMediaButton1.Media) = {Value:"appres://blobmanager/path/n"}

URIやデータURIスキームを使用するインラインイメージの画像をCollectする場合、必ず画像コントロールを介してCollectする必要があります。

画像の追加コントロールであれば、AddMediaButtonのOnChangeにグループAddMediaWithImageでセットになっているUploadedImage.ImageとCollectを組み合わせる事で楽にCollectできます。

AddMediaButton.OnChange

ClearCollect(取り込んだ画像,UploadedImage.Image) = {Value:画像Binary}

また画像コントロールのVisibleをfalseにしても、コントロールが非表示なだけで画像は読み込まれています。

Binary

カメラコントロールのCamera.Photoのように既にImageが表示されていて、それを保存している場合はBinaryです。

画像が表示されているという事は、読み込み済みの画像であるという事です。

BinaryをデータURIスキームを使用するインラインイメージに変換する

画像のBinaryに対し、JSON関数を使うとbase64のDataURI文字列に変換できます。

これは画像をPower Automateに渡したり、画像ファイルをサポートしていないデータソースに画像を保存するのにとても役立ちます。

但し画像コントロール.Imageを直接JSON関数の引数にするとエラーになります。

これは一旦コレクションか変数に格納してあげれば解決します。

画像のbase64DataURI化

Set( ImageJSON, JSON( Image.Image, JSONFormat.IncludeBinaryData ) )

JSON関数の戻り値は文字列

JSON関数の戻り値は文字列なので、"で括られている。

"で括られてたままではPower Appsは勿論のこと、Power Automateで画像として扱う際にも支障が出るので"を外してDataURI文字列にしてあげる必要があります。

これはJSON関数や、その戻り値をSubstitute関数でラップして、"を取り除けば解決します。

"を外す

Substitute(ImageJSON,"""","")

まとめ

• URIとBinaryの違いに気を付ける
  • Power Appsのアプリは「使う時まで読み込まない」思想で動いています。
  • 使う時にBinaryにしてあげましょう。
• 画像の場所を意識する
  • 「今どこにあるのか」「どこに格納されたか」を把握していれば、行うべき処理も見えてきます。
• JSON関数は便利
  • 戻り値の"をどうにかしてしまえば可能性は無限大です。

この記事は以下の勉強会で発表された問題を解決した結果、生まれました。
PowerAppsでローコーディングな勉強会 #11 寄って集ってみんなで問題を解決する会

皆さんも色々と試行錯誤してみてください。