3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

#PowerApps 3Dで表示(View in 3D) #03 ODfB+Excel

Last updated at Posted at 2020-05-10

「3D で表示」(View in 3D)に対して、OneDrive と Excel を準備してデータコネクターを利用して3Dモデルを表示する方法、詳細編です。

もくじ

事前準備:プレビュー環境構築方法など
View in 3D #01 :概要
View in 3D #02 :Source指定方法
View In 3D #03 :ODfB+Excelで表示 当記事

動作イメージ

OneDrive for Business(以降、ODfB)に .glb ファイルを格納して、Excel(Excel Online)データコネクターを利用して Power Apps 上に View in 3D しているだけ、です。詳細はこの後に解説します。

シングルタッチ、マルチタッチに対応しています。MR はPCのブラウザー上では動作しませんが、3Dで表示(View in 3D)はブラウザー上でも動作します。
この View in 3D で表示しているデータを、MR系コントロールへ受け渡すコトで、MR側で配置させる等の利用方法が可能です。MRコントロールとの連携方法は前回#02で紹介しているYouTubeを参照ください。

3D画像を用意する

「3D で表示」コントロールと ODfB + Excel の話題に入る前に、表示するためのファイルを用意しましょう。当方は Windows 10 の「ペイント3D」を使って、サンプルを保存して試しました。

ペイント 3D の使い方 (YouTube)
ペイント3Dで3Dサンプルを読み込むには -Windows10 使い方解説動画

View in 3D + ODfB + Excel

3D画像(.glb)ファイルの準備ができたら、Power Apps の 3D表示を試してみましょう。まず、準備した3DファイルをODfBへ仕込みをします。手順としては、公式のDocsにある説明と殆ど一緒です。ただし、記事投稿時点で素直に従うとハマるトコがあるので、その点もフォローしたいと思います。

 ■Docs
 Loading models as attachments or media content

1..glb ファイルを ODfB へ格納する

準備したファイルを ODfB へ格納(保存)します。まず拠点となるフォルダー(下イメージでは”zzz_3D"フォルダー)を作成します。
拠点フォルダーを作成したら、次に .glb ファイルを格納するフォルダー(下イメージでは"glb"フォルダー)を作成します。
図1.png

glbフォルダーへ、事前に準備した3Dファイルを格納しましょう。
※ティラノサウルスの拡張子が異なっているのは意図的です。
※混乱するので、基本的に .glb ファイルだけを格納するようにしましょうね。
図2.png

2.Excel ファイルを準備する

拠点フォルダーの直下にExcelを用意します。glbフォルダーの中ではダメです。
重要なので繰り返します。***「Excel は glbフォルダーの中ではダメ」***です。
つまり、拠点フォルダー直下にExcel、その配下に3D画像を管理するフォルダーを作成する、という構造にしてください。
図3.png

Docs にも記載されていますが、Excelで上記のようなテーブルを作成して保存しておきます。なお、新規作成の際は「Name」と「3DModel [image]」の2列あればOKです。末尾の列は Power Apps からデータコネクターで接続した際に自動で付与されます。テーブル名は任意でかまいません。

列名 説明
Name 3Dイメージの名称。識別以外では利用しない。
3DModel [image] .glb ファイル名を含むパス。
Excelファイルからの相対パスであること。
※注意点アリ
PowerAppsId Power Apps からデータコネクターで接続すると自動生成される値。
※自作する必要はない

2-1.※ Excelファイルの注意点 その1

Docs では下イメージのようにバックスラッシュ(\)でパスが指定してあります。しかしながら、当方が試した限りではバックスラッシュも、UNCでディレクトリーを表す"¥"(本来は半角)も正しく動作しませんでした。
図3-2.png
プレビューの機能なので、不具合なのか?Docsが誤っているのか?は不明ですが、前述スクリーンショットのように「./<glbフォルダー名>/<.glbファイル名>」と指定する必要あります。URLのようにスラッシュ(/)を利用してください。
ほかにも罠があるのですが、それは後述。

3.Power Apps キャンバスアプリ作成

glbファイルとExcelファイルの準備ができたら、Power Apps でキャンバスアプリを作成します。なお、記事投稿時点ではプレビュー機能が利用可能な環境のみコントロールが利用可能です。

画面構成としては下記のような感じ。前手順で用意したExcelファイルに対して、ODfB データコネクター で接続しています。なお、下イメージではテーブル名が”テーブル1”のままですね。
図5.png

「Dropdown」コントロールには、前述ExcelファイルのNameを表示しているだけ、です。「3D で表示」コントロールは[Source]プロパティに下記を指定します。これで、ドロップダウンで選択した3D画像で切り替えるコトが可能になります。

ViewIn3D.Source
Dropdown.Selected.'3DModel'

「ラベル」コントロールについては続けて解説します。なお、解析のためにラベルを設置しているだけですので、少なくとも View in 3D したいだけならラベルは無視でOKかと思います。

4.'3DModel'を解析

ラベルコントロールにも「3D で表示」コントロールの[Source]プロパティと同じ設定をしてみます。
図6.png
ラベルに「appres://datasources/~」で始まる文字列が表示されます。Excelファイルで指定した'3DModel [image]'は glb ファイルのパスを指定しただけでしたが、データコネクターを利用して接続するだけで自動的に3D表示が可能な情報に置き換わっているのがわかります。

4-1.※ Excelファイルの注意点 その2

データソースとして指定したExcelファイルの構造を変更してみました。”3DModel [image] ”の列名を別名称へ変更(今回は"hogehoge")してみます。
図8.png
先ほどのアプリにデータコネクターを追加して、ドロップダウンのデータベースを変更してみます。そうすると、3D表示がされなくなります。
図9.png
ラベルを確認すると、Excelファイルで指定したファイルパスが表示されています。確認した限りでDocsのドコにも明記されてないのですが、この結果から**「Excelファイルの列名は決まったモノを使うべき」**というコトがわかります。

4-2.※ Excelファイルの注意点 その2 補足

さらに深堀りしてみました。Power Apps のデバッグ機能でデータコネクターで取得した内容を比較してみました。
図10.png
図11.png
上記の結果から、Excelファイルに指定された列名でテーブルを準備してデータコネクター経由でアクセスすると、3Dモデルが自動的に解析されて「3DModel」というプロパティでアクセスできる、というのが把握できます。

5.OneDrive+Excel利用の.glb以外の表示はできません(現状

ティラノサウルスの拡張子が異なっていた理由ですw
今回紹介している手順で試してみた結果ですが、.glbファイル以外は現状表示できない模様です。OneDrive + Excel の組み合わせでデータコネクター経由でのアプローチは .glb ファイルを利用すべき、と考えられます。

[@koruneko32767](twitter.com/koruneko32767)さんが教えてくださったのですが、.glbファイルでもPower Appsで表示できないパターンもあるようです。

まとめ

  • Windows 10 なら 3Dペイントで3D画像の準備が簡単にできますよ
  • Power Apps の View in 3D は現状 .glb ファイルしか表示できない
    • 稀に表示できないパターンもあるのでご注意(※詳細不明)
  • OneDrive を 利用する場合は、glbファイルを格納するフォルダー構造に注意
    • glbファイルを格納するだけのフォルダーを作成する必要アリぽい
  • さらに、glbファイルを指定するためのExcelファイルが必要
    • Excelファイルを置く場所にも注意が必要
  • Excelファイルのテーブル、列名が重要
    • 間違えると意図した動作をしない
    • glbファイルを指定するのはURL形式で相対パス
  • データコネクターを利用してアクセスすることで、自動的に3D表示可能にしているっぽい

知らないとハマりそうな部分がありますねぇ・・・。現段階ではプレビュー機能なのでしょうがないね!って気持ちです。今後のVerUpに期待しましょう。

それでは皆さま、素晴らしい Power Platform Life を!

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?