Mixed Reality 写真を撮影してアップロードする

[アーティクル]
11/02/2023

この記事では、Mixed Reality セッションの写真を撮影して、OneDrive 上のフォルダーにアップロードできるアプリを作成します。この例では MR で表示 コントロールを使用しますが、MR で図形を表示 と 測定カメラ コントロールも同様に機能します。

次のタスクについて説明します。

3D オブジェクト コントロールを追加して、サンプルの 3D オブジェクトを表示および操作する
3D オブジェクト コントロールを MR で表示 コントロールに接続して、現実世界で 3D オブジェクトを表示する
ギャラリーコントロールを追加して、MR で表示 コントロールで撮影した写真を表示する
Microsoft Power Automate フローで写真を OneDrive にアップロードする
複合現実でキャプチャされた写真を Dataverse にアップロードする

前提条件

空白のキャンバスアプリを作成します。
MRPhotos というフォルダーを OneDrive に作成します。このフォルダーを使用して、アップロードした写真を保存します。

ヒント

Mixed Reality (MR) コントロールは、フラットテクスチャサーフェスの明るい環境で最適に動作します。 LIDAR 対応デバイスでは、トラッキングが優れています。

Mixed Reality で 3D オブジェクトの写真を撮影するためのボタンを追加する

この例には、3 つの部分があります。まず、Mixed Reality エクスペリエンスでユーザーが 3D オブジェクトの写真を撮影できるボタンを追加します。

3D オブジェクトコントロールを挿入する

Power Apps Studio でアプリを編集用に開いた状態で:

挿入タブを開いて、メディア を展開します。
3D object を選択して、アプリ画面に 3D オブジェクトを配置します。コントロールを画面にドラッグして、より正確に配置します。

コントロールには、透明なキューブの図形が用意されています。必要に応じて、コントロールの Source プロパティを変更して、別の 3D モデルを読み込みます。この例では、URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb を使用します。

MR で表示コントロールを挿入して接続する

挿入タブを開いて、Mixed Reality を展開します。
MR で表示 を選択して、アプリ画面にコントロールを配置するか、コントロールを画面にドラッグしてより正確に配置します。
コントロールの Source プロパティを 3DObject1.Source に変更します。 (3DObject1 は、先ほど追加した 3D オブジェクト コントロールの名前です。) この式は、MR で表示 コントロールに 3D モデルをデバイスのカメラフィード上に重ねるように指示します。
アプリを保存して公開し、モバイルデバイスで実行します。
View in MR を選択して、Mixed Reality で 3D オブジェクトを表示します。 MR ビューの写真を撮るには、カメラアイコンを選択します。

ギャラリーコントロールを挿入して、アプリで撮影した写真を表示する

次に、ギャラリーを追加して、ユーザーが撮影した写真を表示できるようにします。

アプリをもう一度編集します。挿入タブを開いて、画面上に 垂直ギャラリー コントロールを配置します。
コントロールの Items プロパティを ViewInMR1.Photos に変更します。 (ViewInMR1 は、先ほど追加した MR で表示 コントロールの名前です。)
必要に応じて、ギャラリーの Layout プロパティを 画像とタイトル に変更します。
アプリをプレビューして、View in MR を選択し、サンプル写真を生成します。ギャラリーにサンプル画像が表示されます。

注意

ユーザーが MR ビューを終了してギャラリーを表示し、MR ビューに戻ってさらに写真を撮ると、以前に撮った写真が新しい写真に置き換わります。

ギャラリーのサムネイル画像に大きなオーバーレイを追加する

ギャラリー内の写真を見やすくするために、ユーザーがサムネイル画像を選択したときに表示されるフルサイズのオーバーレイを追加できます。

アプリをもう一度編集します。挿入タブを開いて、メディア を展開します。
画像を選択して、画面に画像コントロールを配置します。サムネイル画像を選択したときに大きい写真をどのように表示するかに応じて、移動およびサイズを変更します。
画像コントロールのプロパティを次のように変更します: | Property | Value | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Image | Gallery1.Selected.Image2 (ギャラリーコントロールが ギャラリー1 で、最初のサムネイル画像が Image2 であると仮定します) | Visible | vVisibleImageZoom
ギャラリーコントロールで、最初のサムネイル画像を選択します。 OnSelect プロパティを UpdateContext({vVisibleImageZoom:true}) に変更します。
アプリを保存して公開し、モバイルデバイスで実行します。
View in MR を選択し、カメラアイコンを選択して写真を撮影します。画面上部の戻る矢印を選択して、MR ビューを終了します。
ギャラリーでサムネイルを選択すると、写真の大きなバージョンが表示されます。画像を選択して非表示にします。

Power Automate フローで写真を OneDrive にアップロードする

最後に、Power Automate ペインを使用してワークフローを作成します。ワークフローは、アプリの写真を OneDrive 上の MRPhotos という名前のフォルダーにアップロードします。

Power Automate でフローを作成する

アプリを編集します。アプリの作成メニューで、Power Automate > 新しいフローを作成するを作成します。
Power Apps ボタンテンプレートを検索して選択します。
フローを作成するウィンドウで、詳細モードで編集するを選択します。
ウィンドウの上部で Power Apps ボタン 選択して、フローの新しい名前を入力します。この例では、フロー MR 写真のアップロード に名前を付けます。
ウィンドウの上部で Power Apps ボタン選択して、フローの新しい名前を入力します。この例では、フロー MR 写真のアップロードに名前を付けます。
PowerApps (V2) を検索して、PowerApps (V2) トリガーを選択します。
入力の追加 を選択し、ファイル を選択します。
ラベル ファイルの内容 を画像に変更します。
新しいステップ を選択します。 OneDrive Create file を検索し、ファイルの作成 アクションを選択します。
フォルダーパス でフォルダーアイコンを選択し、先に作成した MRPhotos フォルダーに移動します。
ファイル名 に @{triggerBody()?['file']?['name']} と入力します (テキストが "file.name" に変わります。)
ファイルコンテンツ に @{triggerBody()['file']['contentBytes']} と入力します (テキストが Image" に変わります。)
使用しているフローを保存します。

完成したフローは次のようになります:

完成したワークフローを示す Power Automate 編集ウィンドウのスクリーンショット。

ワークフローをアプリのボタンに接続する

Power Apps Studio のアプリに戻ります。フローが 使用可能なフロー の下に表示されます。
挿入タブを開き、ボタン を選択します。ボタンコントロールを画面に配置し、必要に応じてサイズを変更します。
ボタンコントロールの Text プロパティを 写真のアップロード に変更します。
Power Apps ウィンドウの上部にある数式バーで、OnSelect プロパティを選択します。 アクション > Power Automate > MR 写真のアップロード を選択します。

ボタンコントロールの OnSelect プロパティが UploadMRPhoto.Run( に変更されます。
最後に撮影した写真をアップロードするには、左括弧の後に次のコードを貼り付けます: {file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})

ボタンコントロールをギャラリー内に配置した場合は、代わりに次のコードを貼り付けます: {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})

撮影したすべての写真をボタンにアップロードさせるには、UploadMRPhoto.Run( を削除して次のコードを貼り付けます: ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))
アプリをプレビューして View in MR を選択し、写真のアップロード 選択します。 OneDrive 上の MRPhotos フォルダーをチェックして、サンプル写真がアップロードされていることを確認します。

アプリにオフライン機能を追加する

SaveData と LoadData 関数を使用して、ネットワーク接続が制限されているか、ない場合でも、アプリを使用できます。

複合現実でキャプチャされた写真を Dataverse にアップロードする

Dataverse テーブルには、画像データ型の列を通して写真を追加することができます。 Dataverse の画像列には、Full と Value という 2 つの必須フィールドがあり、MR コントロールの ImageURI 出力に設定することができます。

たとえば、MR コントロールのマークアップでキャプチャした最初の写真を Image という Dataverse 列にアップロードする場合:

    Image: {Full: First(MarkupInMR.Photos).ImageURI, Value: First(MarkupInMR.Photos).ImageURI}

参照

注意

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

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

Mixed Reality 写真を撮影してアップロードする

前提条件