・はじめに

こんにちは、くらっちです。

今回は、PowerApps で撮影した写真を SharePoint のドキュメントライブラリに保存するアプリの作成方法を紹介します。

今回作成するアプリでは、PowerApps で写真の撮影を行い、PowerAutomate で写真データのバイナリ形式への変換と SharePoint へ保存、SharePoint で画像の管理を行います。
とてもシンプルなアプリですが、画像データを扱うアプリとして参考になるのではないかと思います。

完成イメージはこちら。 f:id:kurakurattyo:20211025235029p:plain

※この記事は Qiita から移行して、最新の情報に更新しています。

・写真保存用のドキュメントライブラリを作成する

サンプルとして下表の列をもつドキュメントライブラリを作成します。
リスト名は「写真アプリライブラリ」としました。

列名	内部名	既定/新規	列の種類
名前	Name	既定列	1行テキスト
サムネイル	Thumbnail	新規作成	ハイパーリンクまたは画像
登録者	Author	既定列	ユーザーまたはグループ
登録日時	Created	既定列	日付

・PowerAutoamte側を作成する

次に、PowerApps から送られた写真データを SharePoint に保存するための処理を PowerAutomate で用意します。
このフローは、PowerApps のボタンクリックをトリガーとして、PowerApps 側から受信したファイル名と画像データを SharePoint に保存します。

フローの種類は「インスタントクラウドフロー」を選択します。

フロー完成形は下図の通りです。 f:id:kurakurattyo:20211024011704p:plain

「ファイルの作成」アクションに必要な情報は以下の通りです。

項目名	入力する情報
サイトのアドレス	ファイルを保存するサイトを指定
フォルダーのパス	上記サイト内のドキュメントライブラリを指定
ファイル名	PowerApps から取得した文字列
ファイルコンテンツ	PowerApps から取得した画像データ

PowerAppsから受け取ったデータのままでは、SharePoint 側で画像として扱えません。
ファイルコンテンツでは、上図赤枠のように関数「dataUriToBinary('value')」を利用して画像データをバイナリ形式に修正します。

※DataUriToBinary については 公式サイト をご覧ください。

Power Automate 側の作成はこれで完了です。

・PowerApps側を作成する

PowerApps側では、２つの画面を作成します。
１．写真を表示・保存する画面　⇒　TopScreen
２．写真を撮影する画面　　　　⇒　CameraScreen

TopScreen（写真の表示・保存）

TopScreen の画面構成は下図の通りです。 f:id:kurakurattyo:20211025233337p:plain

構成するパーツと用途をまとめました。

名称	パーツ名	用途
FileName_Input	テキスト入力	画像のファイル名を入力します
Save_Icon	アイコン(保存)	フローを起動し画像を保存します
Camera_Icon	アイコン(カメラ)	CameraScreenに移動して撮影します
Image	画像	CameraScreenで撮影した画像を表示します

各パーツの変更内容については下記１～４を参照ください。

１.FileName_Input

画像のファイル名を入力するために設置します。
詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
Default	"Photo_" & Text(Now(),"[$-ja]yyyymmddhhmm")	ファイル名の初期値
HintText	"ファイル名入力"	未入力時のテキスト

２.Save_Icon

PowerAutomateのフローを起動し、SharePointに画像を保存するための処理を実行します。
詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
OnSelect	'フロー名'.Run(FileName_Input.Text & ".png",AppPhoto); Reset(FileName_Input); Set(AppPhoto,"")	PowerAutomate(フロー名)を起動します。

ここで設定するフローは「・PowerAutoamte側を作成する」で作成したフローです。
Save_Iconを選択した状態で下図の順序に従って対象のフローを選択します。
f:id:kurakurattyo:20211024235919p:plain

フローを選択すると、下図のように（）内に必要な値のヒントが表示されます。
ヒントに合わせて数式を完成させます。
f:id:kurakurattyo:20211025233639p:plain:w600

今回の例では下図のように入力しました。
フロー実行後にテキストボックス「FileName_Input」と変数「AppPhoto」を初期値に戻したいので、Reset関数とSet関数を設定します。
f:id:kurakurattyo:20211025000834p:plain

３.Camera_Icon

写真を撮影するために CameraScreen に移動させます。
詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
OnSelect	Navigate(CameraScreen,ScreenTransition.Fade)	CameraScreen に移動します

４.Image

CameraScreen で撮影した画像をプレビュー表示するために設置します。
詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
Image	AppPhoto	CameraScreen で撮影した画像を表示します

CameraScreen（写真撮影）

写真撮影画面の画面構成は以下の通りです。 f:id:kurakurattyo:20211025232736p:plain

構成するパーツと用途を下表にまとめました。

名称	パーツ名	用途
Button1	ボタン	写真を撮影します。撮影後はTopScreenに移動します
Camera1	カメラ	カメラ映像を表示します
CoverLabel	ラベル	Camera1 の操作をさせないようにします

各パーツの変更内容については下記１～３を参照ください。

１.Button1

Camera1 に表示された写真を撮影します。
詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
OnSelect	Set(AppPhoto,Camera1.Stream); Navigate(TopScreen,Fade);	Camera1 に表示されている写真を変数「AppPhoto」にセットします
Text	"撮影"	ボタン名

２.Camera1

デバイスのカメラを使用して写真を撮影します。
カメラコントロールの詳細については公式サイトを参照ください。

詳細設定で変更する項目は下記の通り。

変更箇所	変更後の値	用途
StreamRate	100	ストリームプロパティの画像を更新する頻度 (ミリ秒単位)。

３.CoverLabel

Camera1 をタップすると写真撮影ができてしまうため、「撮影」ボタンクリック時のみ撮影できるように Camera1 を触れないようにカバーします。