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

[アーティクル]
05/13/2022

この記事では、Mixed Reality セッションの写真を撮影して、OneDrive 上のフォルダーにアップロードできるアプリを作成します。この例では View in MR コントロールを使用しますが、View shape in MR と Measuring Camera コントロールも同様に機能します。

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

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

前提条件

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

ヒント

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

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

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

3D object コントロールを挿入する

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

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

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

View in MR コントロールを挿入して接続する

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

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

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

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

注意

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

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

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

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

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

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

Power Automate でフローを作成する

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

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

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

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

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

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

button コントロールをギャラリー内に配置した場合は、代わりに次のコードを貼り付けます: {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 フォルダーをチェックして、サンプル写真がアップロードされていることを確認します。