PowerAppsでは、スマートフォンやタブレットのカメラ機能を活用して、撮影した画像をアプリ内にアップロードし、その場でプレビュー表示することができます。
この記事では、PowerAppsの「カメラコントロール」と「追加画像コントロール(Add Picture)」を使って、画像をアップロードしてプレビュー表示する方法を、初心者の方にもわかりやすく解説します。
PowerAppsで画像を扱う2つの基本的な方法
PowerAppsでは、画像を扱う方法が主に2つあります。
カメラコントロールを使って撮影する方法
アプリ内でカメラを起動し、その場で撮影した画像を取得します。追加画像コントロール(Add Picture)を使う方法
スマートフォンやPCに保存されている画像を選択してアップロードします。
どちらの方法でも、取得した画像をアプリ上に表示したり、SharePointやDataverseなどのデータソースに保存することができます。

カメラコントロールを追加する手順
まずは、カメラコントロールをアプリに追加してみましょう。
PowerApps Studioを開きます。(スマホサイズで行います。)
上部メニューから「挿入」→「メディア」→「カメラ」を選択します。

画面上にカメラコントロールが追加されます。
このコントロールはデフォルトで「Camera1」という名前が付けられます。
撮影した画像は、Camera1.Photo というプロパティを通じて取得できます。
撮影した画像をプレビュー表示する方法
撮影した画像をその場で確認するために、画像コントロールを使います。
「挿入」→「メディア」→「画像」を選択して画面に追加します。

追加した画像コントロールを選択し、右側のプロパティの「画像」欄に次のように入力します。
これで、カメラコントロールで撮影した画像が、画像コントロールに自動的に表示されます。
画像をギャラリーに保存して一覧表示する方法
撮影した複数の画像を一覧表示したい場合は、「コレクション(Collection)」を使うのが便利です。
以下の手順で設定します。
カメラコントロールの「OnSelet」プロパティに次の式を入力します。
Collect(MyGallery, Camera1.Photo)

次に、画面に「ギャラリー」を追加します。(今回は水平を採用)
ギャラリーの「Items」プロパティに以下を設定します。
MyGallery
これで、撮影するたびに画像がギャラリーに追加され、一覧として表示されるようになります。
追加画像コントロールで画像をアップロードする方法
カメラ以外の画像を利用したい場合は、「追加画像コントロール(Add Picture)」を使います。
「挿入」→「メディア」→「追加画像」を選択します。
コントロールを画面に配置します。
このコントロールを使うと、ユーザーがデバイス内の画像を選択してアップロードできます。
選択した画像は、コントロール名(例:
AddMediaButton1.Media)で取得できます。
画像データを保存する方法
アップロードや撮影した画像は、SharePointのListsやDataverseなどに保存することもできます。
例えば、SharePointのListsの画像列に保存する場合は、以下のような式を使用します。Patch(ImagesList,Defaults(ImagesList), {Title:“New Photo”,Image: Camera1.Photo})
このようにすることで、撮影した画像をデータソースに直接保存できます。
Patch関数の基本構文
公式サイト
Patch( データソース, レコード, 更新内容 )
この構文を日本語にすると、「データソースの中の特定のレコードに、指定した内容を保存(または更新)する」という意味になります。
例のImagesListはSharepointo 内に作成したLists名
レコード箇所について、新規追加の場合はDefaultsを使用
更新内容に関しては、TitleとImageはListsの列名を指してします。
なので適宜列名に変更できれば対応可能です!
まとめ
PowerAppsでは、「カメラコントロール」と「追加画像コントロール」を使うことで、
アプリ上で簡単に画像を撮影・アップロードし、プレビュー表示することができます。
アプリの用途に応じて、リアルタイム撮影機能やアップロード機能を使い分けることで、
業務アプリや報告アプリをより便利に構築することができます。



コメント