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

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

# もくじ
[事前準備](https://qiita.com/yamad365/items/48d021bca0c99418ea80)：プレビュー環境構築方法など
[View in 3D ＃01](https://qiita.com/yamad365/items/61a327bbd52c133e9233) ：概要
[View in 3D ＃02](https://qiita.com/yamad365/items/b4ca0d8a7877de183efe) ：Source指定方法
[View In 3D ＃03](https://qiita.com/yamad365/items/2621b4f122b0bfa286a4) ：ODfB+Excelで表示 **当記事**

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

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> + MR View in 3D <a href="https://t.co/d3Ci17nIMU">pic.twitter.com/d3Ci17nIMU</a></p>&mdash; やま (Yama) (@yamad365) <a href="https://twitter.com/yamad365/status/1258729300972298240?ref_src=twsrc%5Etfw">May 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

[ペイント 3D の使い方](https://youtu.be/xvILUvJEEAA) (YouTube)
[ペイント3Dで3Dサンプルを読み込むには -Windows10 使い方解説動画](https://dekiru.net/article/17331/)

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

　■Docs
　[Loading models as attachments or media content](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/mixed-reality-component-view-3d#loading-models-as-attachments-or-media-content)

## 1．.glb ファイルを ODfB へ格納する
準備したファイルを ODfB へ格納（保存）します。まず拠点となるフォルダー(下イメージでは”zzz_3D"フォルダー)を作成します。
拠点フォルダーを作成したら、次に .glb ファイルを格納するフォルダー（下イメージでは"glb"フォルダー）を作成します。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/2a082c0d-7527-ef13-031d-e104705527fd.png)

glbフォルダーへ、事前に準備した3Dファイルを格納しましょう。
※ティラノサウルスの拡張子が異なっているのは意図的です。
※混乱するので、基本的に .glb ファイルだけを格納するようにしましょうね。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/c103edd9-40b4-2813-414b-a328cf01bc50.png)

## 2．Excel ファイルを準備する
拠点フォルダーの直下にExcelを用意します。glbフォルダーの中ではダメです。
重要なので繰り返します。***「Excel は glbフォルダーの中ではダメ」***です。
つまり、拠点フォルダー直下にExcel、その配下に3D画像を管理するフォルダーを作成する、という構造にしてください。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/0c44b1e4-31ec-05fe-23ab-98675699e320.png)

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

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

### 2-1．※ Excelファイルの注意点 その1
Docs では下イメージのようにバックスラッシュ（\）でパスが指定してあります。しかしながら、当方が試した限りではバックスラッシュも、UNCでディレクトリーを表す"￥"（本来は半角）も正しく動作しませんでした。
![図3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/17d6f09b-f626-e933-2527-7f588ca2d632.png)
プレビューの機能なので、不具合なのか？Docsが誤っているのか？は不明ですが、前述スクリーンショットのように「./＜glbフォルダー名＞/＜.glbファイル名＞」と指定する必要あります。URLのようにスラッシュ（/）を利用してください。
ほかにも罠があるのですが、それは後述。

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

画面構成としては下記のような感じ。前手順で用意したExcelファイルに対して、ODfB データコネクター で接続しています。なお、下イメージではテーブル名が”テーブル1”のままですね。
![図5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/08a71178-60b4-8f94-7cc5-84594a63a87b.png)

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

```ViewIn3D.Source
Dropdown.Selected.'3DModel'
```

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

## 4．'3DModel'を解析
ラベルコントロールにも「3D で表示」コントロールの[Source]プロパティと同じ設定をしてみます。
![図6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/25665d86-e38f-0433-3d05-428a4069bce6.png)
ラベルに「appres://datasources/～」で始まる文字列が表示されます。Excelファイルで指定した'3DModel [image]'は glb ファイルのパスを指定しただけでしたが、データコネクターを利用して接続するだけで自動的に3D表示が可能な情報に置き換わっているのがわかります。

### 4-1．※ Excelファイルの注意点 その2
データソースとして指定したExcelファイルの構造を変更してみました。”3DModel [image]	”の列名を別名称へ変更（今回は"hogehoge"）してみます。
![図8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/4129cf6f-4810-e68b-eae8-eabde11ff0cb.png)
先ほどのアプリにデータコネクターを追加して、ドロップダウンのデータベースを変更してみます。そうすると、3D表示がされなくなります。
![図9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/33115529-1760-a878-699b-5aa18380c975.png)
ラベルを確認すると、Excelファイルで指定したファイルパスが表示されています。確認した限りでDocsのドコにも明記されてないのですが、この結果から**「Excelファイルの列名は決まったモノを使うべき」**というコトがわかります。

### 4-2．※ Excelファイルの注意点 その2 補足
さらに深堀りしてみました。Power Apps のデバッグ機能でデータコネクターで取得した内容を比較してみました。
![図10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/7dd0c378-e7e4-01ec-3082-10469793af4b.png)
![図11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/bff884fe-4c18-dccb-918c-e1d01e9f50f3.png)
上記の結果から、Excelファイルに指定された列名でテーブルを準備してデータコネクター経由でアクセスすると、3Dモデルが自動的に解析されて「3DModel」というプロパティでアクセスできる、というのが把握できます。

## 5．OneDrive＋Excel利用の.glb以外の表示はできません(現状
ティラノサウルスの拡張子が異なっていた理由ですｗ
今回紹介している手順で試してみた結果ですが、.glbファイル以外は現状表示できない模様です。OneDrive ＋ Excel の組み合わせでデータコネクター経由でのアプローチは .glb ファイルを利用すべき、と考えられます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> 3D表示は .glb 以外はダメぽい <a href="https://t.co/oj0U98a04t">pic.twitter.com/oj0U98a04t</a></p>&mdash; やま (Yama) (@yamad365) <a href="https://twitter.com/yamad365/status/1258732885881663493?ref_src=twsrc%5Etfw">May 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
[@koruneko32767](twitter.com/koruneko32767)さんが教えてくださったのですが、.glbファイルでもPower Appsで表示できないパターンもあるようです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あと、glbでも読み込めない形式(多分これは私のファイルが悪い)があるっぽいです<br>OneDrive の表示では表示できてるっぽいのに、Power Apps で表示しようとするとこうなりますね...<br>これはShare Pointに格納した際も同様でした。<br><br>ブログ書かれるとのことなので参考になれば... <a href="https://t.co/HYmRET1pGp">pic.twitter.com/HYmRET1pGp</a></p>&mdash; コルネ (@koruneko32767) <a href="https://twitter.com/koruneko32767/status/1259278962900926464?ref_src=twsrc%5Etfw">May 10, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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