【PowerApps】アプリにカメラ機能を付ける。(画像の追加コントロール)

PowerAppsではカメラ機能をつけるのに「画像の追加コントロール」を使います。この記事では「画像の追加コントロール」の設置の仕方、スマホ上での動き、その画像をアプリ内に一時保存が出来る「コレクション」の使い方を書いています。

【PowerApps】アプリにカメラ機能を付ける。画像の追加コントロール

(動画時間:5:39)

 

アプリ内にカメラを設置する。

 

こんにちは、リーンシグマ、ブラックベルトのマイク根上です。

 

今、承認ワークフローのシステムをPowerAppsとMicrosoft Flowで作る動画シリーズをやっています。⇒「Microsoft Flowの基本と承認ワークフローの改善プロジェクト」

 

画像はテキストより情報量がはるかに多いのでカメラ機能をつける事で今までにない業務改善が出来るのです。

 

最初にアプリ画面の部品を配置します。もしPowerAppsの基本的な使い方を知りたい方は次のリンクからそれについての記事をご覧下さい。⇒「PowerAppsの使い方 (PowerApps Studioの操作画面)」

 

申請タイプを選択出来るドロップダウンと申請予算額を入力出来るテキスト入力コントロールを付けました。これについての記事もあります。

⇒「【PoweApps】ドロップダウンコントロールの使い方とコンボボックスとの違い」

⇒「【PowerApps】テキスト入力コントロールとその属性(プロパティ) の使い方」

 

「画像の追加(Add Picture)コントロール」の使い方

 

次が本題のカメラ機能の設置です。メニューバーから「挿入」、「メディア」から「画像の追加(Add Picture)コントロール」を選んで、それを好きなサイズで好きな場所に配置します。

 

PowerApps 画像の追加コントロールの設置

 

PCからだとカメラまで行けません。既存の画像を選べるだけです。スマホ上でやると大丈夫です。写真を撮るか、ライブラリから既存の画像を選ぶか選択肢があります。ここでは「Take Photo」を選び写真を撮ります。

 

スマホ上での画像の追加コントロールの動き

 

僕のiPhoneは英語版で、英語表示なのをご了承下さい。「Retake」を選んで撮り直しも簡単です。「Use Photo」をタップしたらその写真が僕のアプリ上に出てきます。「Change Picture」をタップするとまた撮り直しが出来ます。

 

スマホ上での画像の追加コントロールの動き2

 

この様な便利な機能がこの画像の追加コントロールに既に内臓されています。PowerAppsは多くのこの様な便利な機能があるからアプリ作成が短時間で簡単に出来てしまうのです。これで部品の設置は完成です。

 

Collectionに画像を一時保存する。

 

左のコントロールの一覧を見ると、この画像の追加コントロールは二つの部品から出来ているのが分かります。下のが「画像コントロール」で、その「Image」属性でさっき撮った画像を出力しています。

 

左のPowerAppsのコントロールの一覧

 

その数式を見て下さい。画像の追加コントロールの「Media」属性にその画像が保存されています。

 

画像の追加コントロールのメディア属性

 

写真を一枚だけ使うならこのMedia属性を使って他の作業が出来ますが、複数使いたい場合は撮った写真をどこかに保存しておかなければいけません。さもなければ、2枚目を撮った時に最初のが消されてしまいます。

 

PowerAppsではCollectionと言うアプリ内のメモリーに好きなデータを一時的に保存出来ます。これについての記事も書きました。結論を言うとCorrect関数を使うとCollectionにデータを保存出来るのです。

 

「画像の追加」というボタンを作って、そのOnSelect属性に命令文を入れるとそのボタンをタップした時にその命令が実行されます。ここでCollect関数を使うのです。

 

エクセルの様に関数名をタイプしていくと使用可能な関数名やデータ名が出てきますのでそこから選ぶと良いでしょう。

 

PowerApps 関数名選択支援機能

 

関数を選ぶと必要な引数の構造が上に出てきてくれます。下の画像が僕のCollect関数を使った数式です。これの意味は「MyPixと言う名のCollectionにさっき撮った写真をPhotoと言う列に保存しなさい」です。

 

画像をコレクションに保存する数式

 

MyPixやPhotoは自分で自由に決められます。Collect関数の後にセミコロンがあります。これで複数の命令を入れられるのです。Reset関数は画像の追加コントロールを初期化しなさいという意味です。

 

プレビューを見るのに上の三角アイコンを押す以外にキーボードのアルトキーを押すと簡単にプレビュー状態に出来ます。PCだと写真が撮れないので今回は画像を選びます。

 

Imageコントロールを使って保存した写真を確認する。

 

自分で作った「画像の追加」ボタンを押すとカメラが初期化された事が分かります。それでは実際に画像は保存が出来たのでしょうか?

 

メニューバーから「ビュー」、「コレクション」を選択すると、このアプリ内で作られたコレクションの一覧が見えます。「MyPix」を選ぶと「Photo」の列に何かが保存されています。しかしよく分かりませんね。確かめる方法はあります。

 

コレクションの一覧

 

「挿入」、「メディア」から「画像」コントロールを選びます。それのImage属性でどの画像を出力するかを指定します。先ほどのMyPixコレクションをただ指定しても(Image属性=MyPix)写真がうまく出てきません。エラーが出てます。

 

今回はデータが一つですが、本来コレクションはテーブルです。つまりデータの集まりなので、どのデータかを指定する必要があります。

 

色々やり方がありますが、今回はFirst関数を使います。これはそのテーブルの中の一番上のデータを指定します。括弧を閉じてピリオドと列名の「Photo」を指定すると、先ほどの画像が出てきてちゃんと保存されたのが確認できました。

 

画像コントロールのImage属性

 

アプリにこの写真機能を入れると遠隔での確認作業に使ったり写真を記録として将来参照したりと今まで出来なかったような業務改善が出来るようになります。まさに業務改善のイノベーションを起こせるのです。

 

「こちらの記事も読まれてます

 

Comments