PowerAppsで画像を保存・閲覧する

Rev. 1, Y. Nishimura, 2022/12/4

PowerAppsで画像をJSON形式でSharePointに保存、それをPowerAppsで閲覧することができます。

ここではPower Automateを使わずに、PowerAppsのJSON関数を用いてこれらの機能を実現します。

以下のようなトレーニングアプリを作成して、その機能を確認してみましょう。

SharePointのリストを作成する

ここではSharePointのリストを使って、画像データを保存します。

「ホーム」ー「＋新規」ー「リスト」をクリックします。

「リストを作成」ー「空白のリスト」を選択します。

ここでは「名前」を「ImageJSON」として、「作成」をクリックします。

以下のように、リストの列を追加します。

列	種類	説明
Name	一行テキスト	画像データの名前
JSON	複数行テキスト	画像データ（JSON形式）

「ID」列を表示します。

「タイトル」列を「必須でない」ようにして、非表示に設定します。

キャンバスアプリを立ち上げる

新しくキャンバスアプリを一から立ち上げます。

アプリ名：「画像JSON演習」

形式：「タブレット」

「作成」をクリックします。

データを追加する

先ほど作成したSharePointのデータベース「ImageJSON」を接続します。

「データ」ー「データの追加」をクリックして、「SharePoint」の該当のサイトを選び、リスト「ImageJSON」を選択します。

アプリの画面を作成する

画面に「ImageScreen1」と名前をつけて、以下のように、コントロールを配置します。

以下のように、プロパティとその関数を設定します。

コントロール種別	名前	プロパティ	fx
ラベル	Label1	Text	“PowerAppsで画像を保存・閲覧する”
画像の追加	AddMediaWithImage1		（デフォルトのままでOK）
ボタン	Button1	OnSelect	（詳細＊）
画像	Image1	Image	Substitute(Last(ImageJSON).JSON,””””,””)

（詳細＊）

Button1.OnSelect =

Set(
ImageJson1,
JSON(UploadedImage1.Image,IncludeBinaryData)
);
Collect(
ImageJSON,
{
Name: “TestImage” & Text(Now(),”yyyymmdd-hhmmss”),
JSON: ImageJson1
}
)

解説します。

画像の追加コントロール「AddMediaWithImage1」をクリックして、画像をローカルドライブから開きます。画像「UploadedImage1」に格納します。
ボタン「Button1」をクリックすると、「UploadedImage1.Image」を、Binaryデータを含んだJSONフォーマットに変換して、グローバル変数「ImageJson1」に格納します。「Name」列を「TestAudio{yyyymmdd-hhmmss}」、「JSON」列を「ImageJson1」と設定し、SharePointのリスト「ImageJSON」にこのアイテムを追加します。
画像「Image1」で、SharePointに最後に保存した画像を閲覧することができます。「JSON」列は、複数行テキストですから、ダブルコーテーションがついています。Substitute関数を用いて、それを取り除きます。

アプリの動作を確認する

ブラウザで動作を確認してみましょう。

画像の追加が可能なことを確認します。

保存ボタンを押すと、SharePointのリスト「ImageJSON」にJSON形式で保存されていることが確認できます。

保存された画像が閲覧できることも確認しましょう。

また、タブレットでも動作を確認してみましょう。

参考文献

SharePointのイメージ列でPower Appsの画像を操る

2022/11/23付の新しいブログです。

SharePointのイメージ列を使って、Power Appsから画像を保存・読み出しする手法をご紹介しています。

JSONで画像を扱うと、パフォーマンスが低下することがあります。

その時には、SharePointのイメージ列を使って、画像を操りましょう。

SharePointのイメージ列でPower Appsの画像を操る

以上