Power Apps でのカメラ コントロール

ユーザーがデバイスのカメラを使用して画像を撮影することを可能にするコントロール。

内容

カメラ コントロールを使用して、デバイスのカメラで画像をキャプチャします。 デバイスにはカメラが必要であり、ユーザーはアプリがカメラを使用することを許可する必要があります。

カメラ コントロールをタップまたは選択して、カメラから写真をキャプチャします。

直前にキャプチャした画像は、Photoプロパティを通じて利用できます。 このプロパティを使用すると、画像は次のようになります:

• 画像 コントロールで表示されます。 画像 コントロールを使用して、キャプチャした画像を表示します。 詳細については、 例 を参照してください。
• 一時的に変数またはコレクションに保存されます。 Set または Collect 関数を使用して、 変数またはコレクションに画像を保存します。 コレクション内の複数の画像を同時に使用する場合には、デバイスのメモリが限られているため注意が必要です。 SaveData および LoadData 関数を使用して、画像をデバイスのローカル ストレージと オフラインのシナリオ に移動します。
• データベースに格納されます。 Patch 関数を使用して、画像をデータベースに保存します。
• base64 でエンコードされたテキスト文字列として送信されます。 JSON 関数を使用して、画像を base64 エンコードします。

Stream、StreamRate、および OnStream プロパティを使用して、タイマーで画像を自動的にキャプチャします。たとえば、毎分画像をスナップしてタイムラプス シーケンスを作成します。

キャプチャされたメディアは、テキスト文字列 URI によって参照されます。 詳細については、データ型ドキュメント をお読みください。

注意

• カメラ コントロールは、Microsoft Edge、Chrome、Firefox、Opera ブラウザ、および Android、iOS デバイスでのみサポートされています。 他のすべてのブラウザやプラット フォームでは、アプリの一部の機能が動作しない旨の警告メッセージが表示されます。
• カメラ コントロールによって生成された画像の最大解像度は 640x 480px です。 最大解像度の画像が必要な場合は、代わりに 画像の追加 コントロールを検討してください。
• モバイル デバイスのメーカーとモデルによっては、カメラ コントロールを使用するときに、デバイスのカメラが初期化されるまでに数秒かかる場合があります。

重要なプロパティ

AvailableDevices – デバイスで使用可能なカメラのテーブル。

テーブルには 2 つの列が含まれます:

• Camera プロパティで使用される ID 番号
• カメラを識別するデバイスによって提供される名前。 一部のプラットフォームには、カメラを見つけるのに役立つ前または後が含まれる場合があります。

注意: テーブルのすべてのデバイスがアプリで使用できるとは限りません。 一部は、特定の目的を対象とした特殊なドライバーまたはアプリケーションである場合があります。

Camera – 使用するカメラの数値 ID。 複数のカメラを備えたデバイスで役立ちます。

OnStream – Streamプロパティが更新されたときに実行するアクション。

Photo – ユーザーが画像の撮影時にキャプチャされる画像。

Stream – StreamRate プロパティに基づいて自動的に更新された画像。

StreamRate – Stream プロパティの画像を更新する頻度 (ミリ秒単位)。 この値の範囲は、100 (0.1 秒) から 3,600,000 (1 時間) です。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。 画像撮影の目的を説明する必要があります。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が実線、破線、点線、またはなしかどうか。

BorderThickness – コントロールの境界線の太さ。

Brightness – ユーザーが画像で認識する可能性のある光量。

Contrast – ユーザーが画像内の似た色をどれだけ容易に区別できるか。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効)。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

Height – コントロールの上端と下端間の距離。

OnSelect - ユーザーがコントロールをタップまたはクリックしたときに実行するアクション。

TabIndex – 他のコントロールと比較したキーボード ナビゲーションの順序。

Tooltip – ユーザーがコントロールにカーソルを置くときに表示される説明テキスト。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナまたはスクリーンの左端との間の距離。

Y – コントロールの上端と親コンテナまたはスクリーンの上端との間の距離。

例

これらの例では、カメラ付きのデバイスが必要です。 アプリをテストするには、ブラウザーからアクセスできる Web カメラを使用します。 またはアプリを保存して iOS またはカメラ付き Android デバイスに読み込みます。

キャプチャした画像の簡単な表示

1. カメラ コントロールを 追加 します。

2. 要求された場合は、アプリがデバイスのカメラを使用することを許可します。

3. 画像 コントロールを追加します。

4. 画像コントロールの画像プロパティを次の数式に設定します:

   Camera1.Photo
   

   注意

   必要に応じて、カメラ コントロール名を カメラ1 に置き換えます。

5. F5 キーを押してアプリをプレビューします。

6. カメラ コントロールを選択またはタップして画像を撮影します。 画像コントロールに結果が表示されます。

画像ギャラリー コントロールへの画像の追加

1. カメラ コントロールを追加して、MyCamera という名前を付け、その OnSelect プロパティを次の数式に設定します:

   Collect( MyPix, MyCamera.Photo )
   

   詳細情報:

   • コントロールの追加、名前付け、構成する方法
   • については、Collect 関数または その他の関数 をお読みください。

2. F5 キーを押した後、MyCamera を選択またはタップして画像を撮影します。

3. 垂直ギャラリー コントロールを追加します。 その後、画像 コントロール、テンプレート、および画像ギャラリー コントロール自体のサイズを画面内に収まるようにサイズ変更します。

4. 画像ギャラリー コントロールの Items プロパティを次の数式に設定します:

   MyPix
   

5. ギャラリーで、画像コントロールの Image プロパティを次の数式に設定します:

   ThisItem.Url
   

   撮影した画像が画像ギャラリー コントロールに表示されます。

6. 必要な枚数の画像を撮影してから、Esc キーを押して既定のワークスペースに戻ります。

7. (オプション) 画像ギャラリー コントロールで画像コントロールの OnSelect プロパティを次の数式に設定します:

   Remove( MyPix, ThisItem )
   

8. F5 キーを押してから、画像を選択して削除します。

SaveData 関数を使用して画像をローカルに保存するか、Patch 関数を使用してデータ ソースを更新します。

有効なカメラをドロップ ダウンから変更する

1. カメラ コントロールを 追加 します。

2. 要求された場合は、アプリがデバイスのカメラを使用することを許可します。

3. ドロップダウン コントロールを 追加 します。

4. ドロップダウン Items プロパティの設定 :

   Camera1.AvailableDevices
   

   注意

   必要に応じて、カメラ コントロール名を カメラ1 に置き換えます。

5. カメラのCamera プロパティを次のように設定します:

   Dropdown1.Selected.Id
   

   注意

   必要に応じて、ドロップダウン コントロール名を カメラ1 に置き換えます。

6. F5 キーを押してから、ドロップダウンから項目を選択してカメラを変更します。

アクセシビリティ ガイドライン

カメラ コントロールは、カメラ フィードを示し、画像を撮影するボタンとしても機能します。 そのため、ボタンと同様のアクセシビリティの考慮事項があります。

ビデオの代替手段

視覚障碍があるユーザー向けに、代替の入力形式を追加することを検討してください。 たとえば、画像の追加 を使用して、ユーザーはデバイスから画像をアップロードできます。

色のコントラスト

FocusedBorderColor と外側の色との間に適切な色コントラストが必要です。

スクリーン リーダー サポート

AccessibleLabel が存在する必要があります。

キーボードのサポート

• TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。

• フォーカス インジケーターは明確に表示する必要があります。 FocusedBorderColor および FocusedBorderThickness を使用して、フォーカス インジケーターの可視性を更新します。

関連項目

Power Apps でのコントロールの制限

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。