演習 - MR で表示と 3D で表示

  • 15 分

Easy-Sales は、ショッピング エクスペリエンスを向上させるために構築された販売指向の Mixed Reality アプリケーションです。 このアプリケーションを使用する営業担当者は、顧客の周囲を検査および測定して、空間内で実行可能な製品を判断できます。 また、顧客が Mixed Reality を使用して製品を視覚化するのにも役立ちます。

製品を正確に視覚化するために、Power Appsの3Dビュー機能とMRビュー機能を実装します。

SharePoint リストに 3D オブジェクトを追加する

アプリケーションに必要な 3D モデルと画像は、 SharePoint リストに格納されます。 まず、この一覧に必要なリソースを追加します。

  1. Easy Sales という名前の作成済み SharePoint リストで、[+ 列の追加] を選択し、[列の表示/非表示] を選択します。

    列を追加するスクリーンショット。

  2. [添付ファイル] が選択されていることを確認し、上部にある [適用] を押します。

    添付ファイルを適用するスクリーンショット

  3. リスト内の項目を選択し、[ 添付ファイルの追加] を選択します。 Power Apps カスタム フォルダーで、3D モデル (.glb ファイル) または Image (.jpg ファイル) を選択します。 リストのすべての項目に対して同じ手順に従います。

    添付ファイルを追加するスクリーンショット

  4. [ 添付ファイル ] 列の横にあるドロップダウンを選択し、最初に [ 添付ファイルの表示] を選択します。 私たちは、それが簡単にアクセスできるように最初に置かれることを望んでいます。

    最初に [添付ファイルの表示] を選択するスクリーンショット。

詳細ページを作成し、3D コンポーネントでビューを追加する

詳細ページには、選択した製品に関するすべての詳細と情報が含まれます。 製品の特定の機能を理解できます。 前のセクションで設計した製品ページと、このセクションで作成した詳細ページを接続する必要があります。 ここでは、Power Apps の 3D コンポーネントのビュー を使用して、キャンバス アプリに 3D コンテンツを追加します。 3D オブジェクトを回転およびズームインして、表示を改善することができます。

  1. 2 つの新しいページを作成し、 Product_details と Carpet_detailsの名前を変更します。

    詳細ページの作成のスクリーンショット。

  2. [>] ページと [カーペット] ページに含まれるギャラリー コントロールの アイコンを選択します。 次に、[関数] タブに次の行をそれぞれ追加して、OnSelect プロパティを構成します。

    Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})

    Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})

    次の詳細へのナビゲーションのスクリーンショット。

  3. Price、Dimensions、Weight、Color、Material などのいくつかのラベルを追加して、Product_details ページの作成を開始しましょう。 ラベル内のテキストを編集し、そのラベルの Text プロパティ内に目的のテキストを挿入できます。 それに応じて ラベル の名前を変更します。

    ラベルの追加のスクリーンショット

    注

    アプリケーションのテーマ、フォント、カラー パレットをカスタマイズして、ユーザー エクスペリエンスと外観を向上させることができます。

  4. 製品名という名前の別のラベルを挿入して、製品名を上部に表示し、中央揃えします。 次の行を追加して、ラベルの Text プロパティを構成します。

    content.'{Name}'

    タイトル ラベルの追加のスクリーンショット。

  5. [ メディア ] ドロップダウンを選択し、[ イメージ ] を選択して 、Product_details 画面に画像を挿入します。 次の方法で Image プロパティを構成します。

    content.ImageLink

    画像の追加のスクリーンショット。

  6. 3D で表示 コンポーネントをイメージ コンポーネントに重ねます。 3D モデルがアタッチされていない製品は、 Image コンポーネントを介して表示できます。 [3D ビュー] コンポーネントを追加するには、[メディア] ドロップダウンを選択し、[3D で表示] を選択します。

    3D でのビューの追加のスクリーンショット。

    注

    既定の図形がコンポーネントに含まれます。 この図形を別の図形に変更するには、 Source プロパティを変更します。

  7. 画像に示すように、イメージ コンポーネントの上にコンポーネントを配置し、SharePoint リストから 3D モデルを接続するように、次のように 3D コンポーネントのビューの Source プロパティを構成します。

    First(Gallery_products.Selected.Attachments).Value

    3D でのビューの構成のスクリーンショット。

  8. [添付ファイル] 列に格納されているファイルの種類に応じて製品を簡単に表示できるように、3D コンポーネントのイメージとビューの両方の Visible プロパティを変更します。 3D コンポーネントのイメージとビューのVisible プロパティを次のように構成します。

    • 画像 :

      If(Gallery_products.Selected.FileType = "Image", true, false)

      画像の可視性を変更するスクリーンショット。

    • 3D で表示 :

      If(Gallery_products.Selected.FileType = "Model", true, false)

      3D 表示でのビューの変更のスクリーンショット。

  9. 画像に示すように、[ 価格]、[ 寸法]、[ 重み]、[ 色]、 および [素材 ] ラベルの横に空白のラベルを追加して、それらの見出しの下に製品情報を表示します。 これらのラベルの Text プロパティを次のように構成します。

    • 価格 :

      content.Price

      価格の空白ラベルのスクリーンショット。

    • ディメンション :

      content.Dimensions

      Dimensions の空白ラベルのスクリーンショット。

    • 重み :

      content.Weight

      Weight の空白ラベルのスクリーンショット。

    • 色 :

      content.Color

      色の空白ラベルのスクリーンショット。

    • 素材 :

      content.PrimaryMaterial

      素材の空白ラベルのスクリーンショット。

  10. 前の画面に移動する 戻る アイコンを追加します。 [戻る] アイコンを追加するには、[アイコン] ドロップダウンを展開し、[戻る] アイコンを選択します。 [戻る] アイコンを正しく配置し、次を追加して OnSelect プロパティを構成します。

    Navigate('Products',ScreenTransition.Cover)

    戻るアイコンと OnSelect の追加のスクリーンショット

    Carpet_detailsの場合と同じ手順に従います。 それに応じて Navigate 関数をカスタマイズします。

    ヒント

    進行状況を保存するには、上部にある [ ファイル ] タブを選択し、[ 保存 ] オプションを選択します。 Ctrl + S キーを使用して進行状況を保存することもできます。

    注

    Carpet_details ページに [3D ビュー] コンポーネントを含めないでください。 カーペット カテゴリには 3D モデルは使用しません。

MR で表示コンポーネント

MR での表示 は、ユーザーが実際の環境に 3D オブジェクト または 画像 を配置できるようにする Power Apps によって提供される Mixed Reality 機能です。 アプリケーションに必要な 3D モデルと画像は、 SharePoint リストに格納されます。 まず、 SharePoint リストに必要なリソースを追加します。

  1. MR コンポーネント のビュー を Product_details 画面に追加します。 [ 挿入 ] タブを開き、[ Mixed Reality ] ドロップダウンを展開し、[ MR コンポーネントで表示 ] を選択します。

    [MR でビュー] ボタンを追加するスクリーンショット。

  2. MR コンポーネントのビューの [プロパティ] タブで、[ソース] フィールドを選択し、SharePoint リストに格納されている 3D モデルにアクセスするために入力します。

    First(Gallery_products.Selected.Attachments).Value

    MR でビューのソースを追加するスクリーンショット。

    注

    Carpets カテゴリには MR で表示機能を追加しません。 代わりに、MR セッションの測定で計算された面積に応じて、カーペットの価格を見積もります。

MR コンポーネントのビューで提供されるもう 1 つの一意のプロパティは、オブジェクトのスケーリングです。 3D モデルのサイズは、 オブジェクトの幅、オブジェクトの 高さ、オブジェクト 深度 のプロパティを変更することで、外部で編集できます。

  • 図に示すように、[プロパティ] ウィンドウで次の プロパティ を設定します。

    • オブジェクトの幅 = 1.5
    • オブジェクトの高さ = 1
    • オブジェクトの深さ = 1
    • 測定単位 = メートル

    これらの値は、このアプリケーションに含まれる 3D モデルに従って設定されます。

    MR でビューのオブジェクトをスケーリングするスクリーンショット。

    注

    必要に応じて、 オブジェクトの幅、 オブジェクトの高さ、オブジェクト の深さに 渡される値をカスタマイズすることもできます。 渡される値は、 測定単位で指定された単位で取得されます。 ドロップダウンから適切な測定単位を選択し、後で値を入力します。

    ヒント

    進行状況を保存するには、上部にある [ ファイル ] タブを選択し、[ 保存 ] オプションを選択します。 Ctrl + S キーを使用して進行状況を保存することもできます。

上記の手順を実装すると、詳細な製品情報を含む詳細ページを含むアプリケーションが生成されます。 アプリケーションには 3D コンポーネントのビュー も含まれるため、3D コンテンツを含めることができます。 MR コンポーネントのビューを使用して、3D モデルを実際の環境 に 配置することもできます。 これらの機能を実装する方法を学習したので、それらを将来のアプリケーションに組み込むことができます。

MR で 3d ビューとビューを実装した後のアプリケーション デモのアニメーション。