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の画像を操る
以上
記事、ありがとうございます!
めちゃくちゃ、参考になりました!!
関数 ‘JSON’ に複数の無効な引数が含まれています。
とエラーメッセージが出ます。
以下、ご確認いただけると幸いです。
SharePointのJSON列が複数行となっていますでしょうか?
[複数行テキスト] 列には最大 63,999 文字まで格納できますが、それを越えた容量の大きい画像となっていませんでしょうか?
そうした場合には、別のブログでご紹介している画像列を使うことをお勧めします。