【PowerApps】「画像の追加」コントロールの画像をSharePointに保存する方法（Power Automate無し）
今PowerAppsの「画像の追加」コントロールは既定ではSharePointに保存しないです。その問題点とJSON関数を使った解決策を解説しています。またPower Automate無しでSharePointリストへの保存方法をご紹介。
（動画時間：9:55）
Udemyオンラインコースを作りました！
マイクロソフトPowerApps 中級編【SharePointで、実務で使える業務アプリの作り方：勤怠管理アプリ編】
⇒ 半額になる「ディスカウントリンクページ」へ
「カメラ」コントロールとの「画像の追加」コントロールを使う有利点
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今日はこの動画リクエストからです。
「画像の追加」コントロールで取得した写真をSharePointに保存したいのです。
クーリオさん、ご質問ありがとうございました。
PowerAppsで画像を撮るコントロールは二つあり、
一つは「カメラ」コントロールで、
それで撮った画像はPower Automateを使って
SharePointドキュメントライブラリに保存ができます。
それについては以前記事を書きました。
⇒「【PowerApps】画像ファイルをSharePointに保存するやり方（Power Automate使用）」
今回の方法はPower Automateを使わない便利な方法ですが、
Share Point（SP）リストに長いテキストデータを保存するので、
レコードが増えていくとSPリストを表示した時に不安定になります。
ですのでエンドユーザーはそのリストは表示しない事を前提にします。
（もしその時はリストを分けて運用するといいでしょう。）
もう一つは今日のテーマの「画像の追加」コントロールです。
最初にそのコントロールの詳しい説明をしますが、
もしSharePointリストへの保存の仕方を直ぐに知りたい方は
後の章（「外部保存を可能にするJSON関数とその使い方」）に飛んで下さい。
「カメラ」コントロールでは、
撮った画像の解像度が低くなるし、
ユーザーの端末によって挙動が変わってしまう問題があります。
そこで、「画像の追加」コントロールを使うと
その問題がなくなります。
更に、最近ではPowerAppsで作ったアプリを
Teams内で業務アプリとして使うケースが増えてますので、
その時も「画像の追加」コントロールだとPCから画像を選ぶ機能もあるので、
このコントロールを使う利点は多いです。
「画像の追加」コントロールの問題点
しかし、「画像の追加」コントロールには次の様な問題点があります。
これはPowerAppsの開発画面で、
左が「カメラ」コントロールで、
右が「画像の追加」コントロールです。
左のカメラアイコンのOnSelect属性で
「カメラ」コントロールの画像データを変数に入れて（上図内数式バー参照）、
左のカメラアイコンのOnSelect属性
Set(カメラコントロール,Camera1.Photo)
同じ画像をこの画像コントロールに表示し、
そのテキストデータをこのラベルに表示しようとしています。
その結果が、下図です。
それに対して右が「画像の追加」コントロールで、
全く同じ設定をしています。
右のカメラアイコンのOnSelect属性
Set(画像の追加コントロール, UploadedImage1.Image)
その結果も見てみますと、こうなります。
画像そのものが全く違うのですが、
テキストデータの文字数が圧倒的に違いますね。
「カメラ」コントロールで撮ったデータは画像データそのもので、
前述した様にPower Automateを使って
そのままSharePointに保存できます。
しかし、画像の容量が高いと、
アプリのパフォーマンスを下げるので、
その解像度を低く抑えられてしまっています。
一方、「画像の追加」コントロールでできたデータは
このアプリ内でのみ使える状態で保存されていて、
このままではSharePointなど、外部では使えないのです。
しかし、この方法だと高い解像度を保ったまま、
携帯端末の負担を少なくでき、
アプリのパフォーマンスを高く保てているのです。
ですので「画像の追加」コントロールの方が
アプリに最適化されているコントロールだと言えます。
外部保存を可能にするJSON関数とその使い方
携帯端末に最適化されていても、
やりたい事が出来なくては意味がありませんね。
ですが、外部データベースに保存できるやり方はあります。
それにはJSON関数を使います。
ここでは詳しく話しませんが、JSONとは簡単に言うと
表形式や画像などの特殊なデータを
決まったルールの文字列情報に変換して、
外部のシステムと情報のやり取りができる方式なのです。
これはWebやシステムの世界で色んな所で使われています。
PowerAppsでもJSON関数を使ってデータの形式を変換し、
外部との情報のやり取りができるのです。
それを実際にやってみましょう。
さっきの右のカメラアイコンのOnSelect属性内に
JSON関数を下記の様に入れます。
右のカメラアイコンのOnSelect属性
Set(
画像の追加コントロール,
JSON(
UploadedImage1.Image,
JSONFormat.IncludeBinaryData
)
)
JSON関数の第二引数で、どういう変換をしたいかを指定します。
ここでは「IncludeBinaryData」を使います。
ちなみにPowerAppsで使う画像形式はBase64と言い、
「カメラ」コントロールの長いテキストの始めに「base64」と出ています。
しかし、SharePointではBinary形式でないといけないのです。
だから、「Binaryデータを含める」と言う意味の
「IncludeBinaryData」を使うのです。
アイコンをクリックしたら、似たような長いテキストが出てきました。
しかし画像は出てきません。
JSON関数の結果をよく見ると一番最初と最後に
「”（ダブルクォーテーション）」が入っていて、
これが原因で画像として認識できないでいるのです。
そこでそのダブルクォーテーションを除く事ができる
Substitute関数を入れます。
この関数は本来第一引数のテキスト内にある、
第二引数で指定する文字を、
第三引数で指定する文字に置き換える関数です。
その特性を利用して、次の数式の様にSubstitute関数を入れると
右のカメラアイコンのOnSelect属性
Set(
画像の追加コントロール,
Substitute(
JSON(
UploadedImage1.Image,
JSONFormat.IncludeBinaryData
),
””””,
””)
)
全てのダブルクォーテーションを空白で置き換えているのです。
アイコンをクリックしてこの式を実行させましょう。
するとダブルコーテーションが消えて画像がちゃんと出てきました。
「画像の追加」コントロールで撮った画像のSharePointリストへの保存方法
この状態でさっきの変数を使ったら、
「カメラ」コントロールの画像と同じ様に
Power Automateを使ってSharePointのドキュメントライブラリに
画像ファイルを保存できます。
それでも良いのですが、実はPower Automateを使わずに
Patch関数で直接SharePointリストに画像を保存する方法もあります。
SharePointリストの準備の仕方
まず、SharePointリストの準備の仕方が重要です。
ここでは「画像の保存」と言う名前のSPリストで、
簡単に保存日と「Image_URL」と言う
画像データを保存する列を作りました。
SPリストのページ右上の「設定」、「リストの設定」から、
次のページから「Image_URL」の設定の仕方を確認します。
ここが重要で、「この列の情報種類」を「複数行テキスト」にして、
「使用可能なテキストの種類」を必ず「書式なしテキスト」にするのです。
（僕は昔これを選んでいない事によりバグ取りに
数時間を費やした苦い経験があります。）
これでSharePointリストの準備は完了です。
Patch関数を使ってSharePointリストに画像データを保存
PowerAppsの開発画面でボタンを一つ追加して、
そのOnSelect属性に次の式を入れます。
追加したボタンのOnSelect属性
Patch(
画像の保存,
{ID:Blank()},
{Date_Submitted:Today(),Image_URL:画像の追加コントロール}
)
Patch関数の第二引数の「{ID:Blank()}」により
新規にレコードの追加ができます。
そして、保存日の列に今日の日付、
Image_URLにさっきの画像データを入れた変数の名前を入れます。
これで、このボタンを押して画像が保存されます。
SharePointリストを確認したら、ちゃんとデータが追加されました。
LookUp関数を使ったSharePointリストの画像データの取得の仕方
今度はここで保存したデータをアプリ内で取得してみましょう。
「画像」コントロールを一つ追加して、
そのImage属性に、次の数式を入れます。
追加した画像コントロールのImage属性
LookUp(
画像の保存,
ID=6
).Image_URL
先ほど保存した画像のレコードのIDが６でしたので、
LookUp関数の第二引数で「ID=6」としています。
そして取得する列はImage_URLです。
これとちゃんと同じ画像が出てきました。
これで「画像の追加」コントロールで撮った画像が
ちゃんとSharePointリストに保存され、
そしてそれをアプリで取得できる事が確認できました。
「画像の追加」コントロールの「UseMobileCamera」属性で携帯端末の使い勝手を向上
「画像の追加」コントロールには
ユーザーの使い勝手の問題が一つあります。
携帯端末で使う時に既定では
最初に画像選択かカメラを使うかの選択画面が出てきます。
いつもカメラを使う場合はこれは患わしいです。
その時はそれを飛ばして直接カメラを起動させたいです。
その時はその「画像の追加」コントロールの
「UseMobileCamera」属性を「true」にすると
それができる様になります。
今日の内容を使えば、「カメラ」コントロールではなく、
「画像の追加」コントロールの一択になると思います。
Power Automate無しで手軽にSharePointリストに
画像の保存ができる様になるので、
カメラ機能を活用して飛躍的な業務改善が
もっとできる様になると思います。
ぜひ活用してみて下さい。PowerAppsの「画像の追加」コントロールは既定ではSharePointに保存ないです。その問題点とJSON関数を使った解決策を解説しています。またPower Automate無しでSharePointリストへの保存方法をご紹介。
Comment
いつもYou Tube拝見しております。
大変役立っており、ありがとうございます。
上記内容ですが、リストに画像を保存でき表示もできましたが、オーバーフローを起こします。画像保存後、リストにアクセス不能となってしまいます。
大変恐縮ですが、こちらの原因についてご教授いただけますでしょうか。
そうですね、画像データをテキスト型に変換し、長いテキストをSPリストのセルに入れるので、
レコード数が増えてそのSPリストを表示する時にオーバーフローが起きます。
もし、ユーザーがSPリストを表示する運用であればその画像テキストデータ列を別のSPリストにすると良いです。
英語のページですが、ご参照下さい。
https://powerusers.microsoft.com/t5/Building-Power-Apps/Uploading-images-to-SharePoint-list-without-using-Flow/td-p/482731/page/3
この注意点をこのページに加筆しました。コメントありがとうございました。