【PowerApps】アプリにカメラ機能を付ける。(画像の追加コントロール)
PowerAppsではカメラ機能をつけるのに「画像の追加コントロール」を使います。この記事では「画像の追加コントロール」の設置の仕方、スマホ上での動き、その画像をアプリ内に一時保存が出来る「コレクション」の使い方を書いています。
（動画時間：5:39）
初級編：「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました！
⇒ 半額になる「ディスカウントリンクページ」へ
アプリ内にカメラを設置する。
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
今、承認ワークフローのシステムを
PowerAppsとPower Automateで作る動画シリーズをやっています。
- 第一回：Microsoft Flowの基本と承認ワークフローの改善プロジェクト
- 第二回：今回の記事
- 第三回：【PowerApps】画像ファイルをSharePointに保存するやり方（MS Flow使用）
- 最終回：【Power Automate：旧名Microsoft Flow】承認ワークフロー機能を使ってみる
画像はテキストより情報量がはるかに多いので
カメラ機能をつける事で今までにない業務改善が出来るのです。
最初にアプリ画面の部品を配置します。
もしPowerAppsの基本的な使い方を知りたい方は
次のリンクからそれについての記事をご覧下さい。
⇒「PowerAppsの使い方 （PowerApps Studioの操作画面）」
申請タイプを選択出来るドロップダウンと
申請予算額を入力出来るテキスト入力コントロールを付けました。
これについての記事もあります。
⇒「【PoweApps】ドロップダウンコントロールの使い方とコンボボックスとの違い」、
⇒「【PowerApps】テキスト入力コントロールとその属性（プロパティ） の使い方」
「画像の追加（Add Picture）コントロール」の使い方
次が本題のカメラ機能の設置です。
メニューバーから「挿入」、「メディア」から
「画像の追加（Add Picture）コントロール」を選んで、
それを好きなサイズで好きな場所に配置します。
ＰＣからだとカメラまで行けません。既存の画像を選べるだけです。
スマホ上でやると大丈夫です。
写真を撮るか、ライブラリから既存の画像を選ぶか選択肢があります。
ここでは「Take Photo」を選び写真を撮ります。
僕のiPhoneは英語版で、英語表示なのをご了承下さい。
「Retake」を選んで撮り直しも簡単です。
「Use Photo」をタップしたらその写真が僕のアプリ上に出てきます。
「Change Picture」をタップするとまた撮り直しが出来ます。
この様な便利な機能がこの画像の追加コントロールに既に内臓されています。
PowerAppsは多くのこの様な便利なコントロールがあるから
アプリ作成が短時間で簡単に出来てしまうのです。
これで部品の設置は完成です。
Collectionに画像を一時保存する。
左のコントロールの一覧（ツリービュー）を見ると、
この画像の追加コントロールは二つの部品から出来ているのが分かります。
下のが「画像コントロール」で、
その「Image」属性でさっき撮った画像を出力しています。
その数式を見て分かるのが、
画像の追加コントロール（AddMediaButton1）の「Media」属性にその画像が保存されています。
写真を一枚だけ使うならこのMedia属性を使って次の作業が出来ますが、
複数使いたい場合は撮った写真をどこかに保存しておかなければいけません。
さもなければ、2枚目を撮った時に最初のが消されてしまいます。
PowerAppsではCollectionと言うアプリ内のメモリーに
好きなデータを一時的に保存出来ます。これについての記事も書きました。
⇒「【PoweApps】コレクションとCollect関数の基本と使い方」
結論を言うとCollect関数を使うとCollectionにデータを保存出来るのです。
「画像の追加」というボタンを作って、
そのOnSelect属性に命令文を入れると
そのボタンをタップした時にその命令が実行されます。
ここでCollect関数を使うのです。
エクセルの様に関数名をタイプしていくと
使用可能な関数名やデータ名が出てきますのでそこから選ぶと良いでしょう。
関数を選ぶと必要な引数の構造が上に出てきてくれます。
「OnSelect」属性＝
Collect(MyPix, {Photo: AddMediaButton1.Media}); Reset(AddMediaButton1)
これが僕のCollect関数を使った数式です。
これの意味は「MyPixと言う名のCollectionに
さっき撮った写真をPhotoと言う列に保存しなさい」です。
MyPixやPhotoは自分で自由に決められます。
Collect関数の後にセミコロンがあります。
これで複数の命令を入れられるのです。
Reset関数は画像の追加コントロールを初期化しなさいという意味です。
つまり、写真を撮る前の状態になるのです。
プレビューを見るのに上の三角アイコンを押す以外に
キーボードのアルトキーを押すと簡単にプレビュー状態に出来ます。
ＰＣだと写真が撮れないので今回は画像を選びます。
Imageコントロールを使って保存した写真を確認する。
自分で作った「画像の追加」ボタンを押すと
カメラが初期化された事が分かります。
それでは実際に画像は保存が出来たのでしょうか？
メニューバーから「ビュー」、「コレクション」を選択すると、
このアプリ内で作られたコレクションの一覧が見えます。（下図参照）
「MyPix」を選ぶと「Photo」の列に何かが保存されています。
しかしよく分かりませんね。確かめる方法はあります。
「挿入」、「メディア」から「画像」コントロールを選びます。
それのImage属性でどの画像を出力するかを指定します。
先ほどのMyPixコレクションをただ指定しても（Image属性=MyPix）
写真がうまく出てきません。エラーが出てます。
今回はデータが一つですが、本来コレクションはテーブルです。
つまりデータの集まりなので、どのデータかを指定する必要があります。
色々やり方がありますが、今回はFirst関数を使います。
これはそのテーブルの中の一番上のデータを指定します。
括弧を閉じてピリオドと列名の「Photo」を指定すると、
先ほどの画像が出てきてちゃんと保存されたのが確認できました。
アプリにこの写真機能を入れると
遠隔での確認作業に使ったり写真を記録として将来参照したりと
今まで出来なかったような業務改善が出来るようになります。
まさに業務改善のイノベーションを起こせるのです。
この後のコレクションに入れた画像を
どの様にSharePointリストに入れるかの記事をQiita.comに記載しました。
⇒「【PowerApps】カメラで撮った画像をSharePointリストに保存し、他のアプリで見る。」
初級編：「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました！
⇒ 半額になる「ディスカウントリンクページ」へ
「こちらの記事も読まれてます｡」
