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

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

Rev. 0, Y. Nishimura, 2021/6/12

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形式で保存されていることが確認できます。
  • 保存された画像が閲覧できることも確認しましょう。

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

参考文献

以上


コメントを残す