Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Database, etc..pdf

Power Apps Mixed Reality コントロール、
Azure SQL Database 等を使⽤した
3D モバイルアプリの構築
鈴⽊章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁省庁業務グループソリューションアーキテクト

Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
省庁業務グループ
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

• Mixed Reality x Power Apps
• MS Learn コンテンツご紹介
• データソースを Azure SQL Database 等に変更する
• まとめ
• リソース
アジェンダ

PHYSICAL
REALITY
VIRTUAL
REALITY

MIXED
REALITY
DIGITAL
REALITY
PHYSICAL
REALITY
物理世界とデジタル世界とのブレンド

Mixed Reality のスペクトラム
Smart Phone、HoloLens 2、他
VR Headset 他
VR
today
AR today
PHYSICAL
REALITY
DIGITAL
REALITY
MIXED REALITY
(MR)
物理世界とデジタル世界とをミックスし、新たな環境を創造
両オブジェクトが、現実世界のように、共存し、協同

Power Apps での 3D コンテンツの表⽰
•
• 3D コンテンツのギャラリーから選択
•
•
•
•
https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-component-view-3d

MS Learn コンテンツご紹介

Power Apps での 3D コンテンツの表⽰
•
•
•
•
•
•
•
• キャンバスアプリ
•
•
https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/

データソースを Azure SQL Database 等に
変更する

キャンバスアプリに追加するデータソース
• データソース
https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls
Power Apps のカスタムフォルダー
• データはどう準備するか︖
• PowerAppsでは基本的には
（.glb）ファイルのみ
• 他のデータから変換等でき
る場合にはそれらを使える
• 難しい場合、⾯倒な場合
・今回のチュートリアル
に付属のデータ
・Windows 11の 3D
ビューアの3D のモデル
（.glb）
• GitHub 等にあるデータ
など

SharePoint (Excel) を使うのが本チュートリアル
• SharePoint
• (Excel も可）
• いくつかのやり⽅があるが、どこに格納するかが問題
• SharePoint のリストに格納または Excel + OneDrive が⼀番便利
• オフィス内での使⽤のみなら⼀番いい
• 今回は、SQL Azure Database に URL を格納して表⽰したい

Azure SQL Database を設定する
• Azure SQL Database

Azure Data Studio 拡張機能による
データインポート - 1
• データはどうインポート︖
• Azure Data Studio 拡張機能
インストール
• インポートしたいデータ
ベース上で右クリック
（Import Wizard が追加され
ている）
• Easy Sales.csv を指定して
インポート
https://docs.microsoft.com/ja-jp/sql/azure-data-studio/extensions/add-extensions?view=sql-server-ver16

Azure Data Studio 拡張機能による
データインポート - 2
• 注意点
• Price_cm2 カラムは
decimal(5,5) にしておく
• あとは URL 格納等⻑めの⽂
字列になりそうなところは
nvarchar(MAX) にしておく
• その他はデフォルト、全て
NULL 可能で OK
• スキーマ変更もこの画⾯から
柔軟に可能
• 保存を⾏うと新しい内容で
スキーマがコンパイルされ
表⽰される
https://docs.microsoft.com/ja-jp/sql/azure-data-studio/extensions/add-extensions?view=sql-server-ver16
テーブル更新の時は、テーブルエディタで⼀つ⼀つエディットする
Command ＋ S または Control + S でテーブルがビルドされる
OK ならそのまま作成・更新
簡単に更新ができデータも問題なし

3D .glb データの取得
• 3D .glb データの取得
• 今回のチュートリアルに
付属の 3D Models を使う
• .glb データが⾜りないので
3D ビューア等から保存
Power Apps のカスタムフォルダー
https://apps.microsoft.com/store/detail/3d-viewer/9NBLGGH42THS?hl=ja-jp&gl=JP

データの配置先には制約あり - 1
• キャンバスアプリに 3D モデルを読み込む場合の既知の制約
• https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-
component-view-3d-store#known-constraints-when-loading-3d-models-in-
canvas-apps
• Power Apps のセキュリティアーキテクチャは、HTTP ではなく HTTPS
リンクを必要とします。
• モデルファイルをホストするサーバーは、認証を必要とせず、CORS
に準拠している必要があります。

• データの配置先を下記のように変更
• Azure Blob (.png 等)
• GitHub (.glb )

• GitHub に格納するときの注意点
• raw データを参照する
• URL を書き換える
1. GitHub にパブリックでリポジトリを作成
2. .glbファイルをローカルでコミットしてプッシュ
3. URL から /blob/ 部分を削除、冒頭を https://raw.githubusercontent.com/ に置換
https://raw.githubusercontent.com/microsoft/experimental-pcf-control-
assets/master/robot_arm.glb (例)
4. Power Appsで3Dコントロールを追加しその src プロパティに上記 URL をセット
(これでファイルが 3D 表⽰される)
5. その内容をすべて Azure SQL Database に⼊れておく

データの配置先に関する考察まとめ
1. Microsoft Power Automate を使⽤して Base64 でエンコード
された 3D モデルを作成する
https://docs.microsoft.com/ja-jp/power-
apps/maker/canvas-apps/mixed-reality-component-view-
3d-store#create-a-base64-encoded-3d-model-with-
microsoft-power-automate
今回は使わない
2. Blob ストレージに格納
アクセス権をブロブとコンテナーをパブリックに設定
CORS を Power Apps Com 等に設定（念の為）
テキストでURL が来るだけでエンコードされず、表⽰されず Blob がダウン
ロードされることもある
https://portal.azure.com/#@koryoku.com/resource/subscrip
tions/0c27fa1d-69fc-43e5-80d8-
83da4f6a10c8/resourceGroups/appdev/providers/Microsoft.
Storage/storageAccounts/glbfiles1/storagebrowser
3. Blob ストレージに格納された URL をそのままBase 64に変換しな
がらロードして表⽰
⼤きなものだと変換に時間がかかり PowerApps Studio がクラッシュする
こともあり
https://base64.guru/converter/encode/file
https://www.youtube.com/watch?v=bIne3DD3HAg
4. Blob ストレージに全て格納
Button コントロールを配置
OnSelect で Gallery にあるファイルの Name をもとにとってくる
Set(glbfiles1, AzureBlobStorage.CreateShareLinkByPathV2
(Galery_Products.Selected.AttachedFile).webUrl
⼤量データの管理が⾯倒なのは SharePoint や Excel と変わらずAzure SQL
Database を使いたいのでパス
５.Azure Blob には Image データ、GitHub には .glb データをホストする
これが⼀番スムースに可能なので今回はこれ（今後検討する必要がある）
https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-
apps/mixed-reality-component-view-3d-store#host-your-3d-model-
files-in-github

キャンバスアプリから接続する際の注意点
• デフォルトオンに注意︕
• 設定 → 近⽇公開の機能
• 拡張 Microsoft SQL Server コネクタを有効にする
• → オフにしないと繋がっているのにキャンバスに
データが表⽰されない
認証
テーブル選択

Babylon.js 他
• 応⽤
• MR で表⽰に関連して
• Babylon.js
https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-
apps/mixed-reality-overview?WT.mc_id=spatial-13741-
apspeigh
Power Apps の MR コントロールは、Babylon と Babylon
React Native を活⽤します。この共有型 MR プラット
フォームの結果として、Power Apps で機能する 3D コン
テンツは Babylon サンドボックスで機能するはずです。
コンテンツが Babylon で機能するが、Power Apps では機
能しない場合、Power Apps コミュニティフォーラムで
質問してください。Babylon との統合に関する詳細をお
読みください。
• Developing Immersive XR Experiences on the Web
https://www.youtube.com/watch?v=IA7UCP0W5ms
Babylon.js 公式⼊⾨チュートリアルざっくり和訳
https://zenn.dev/chomado/books/babylonjs-tutorial-ja

Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Database, etc..pdf

リソース
参考︓
Mixed Reality in Power Apps – View in 3D Component
https://www.youtube.com/watch?v=GmYOjyUP9Hk
Mixed Reality in Power Apps - View in MR Component
https://www.youtube.com/watch?v=wjB54iD5qzo
Dhruvinshah16/PowerApps-MR-Lab
https://github.com/Dhruvinshah16/PowerApps-MR-Lab
Babylon.js
https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-
overview?WT.mc_id=spatial-13741-apspeigh

デベロッパーアドボケートウェビナーシリーズ (Vol.1) VMware、Microsoft、Elastic
- Java 18、Azure Spring Apps そして Elastic x Azure Spring Cloud コラボレーションの最新技術情報
2022/5/31 13:00-15:00
https://www.elastic.co/jp/virtual-event/developer-advocate-series-1/
Apps

IT Media Cloud Native Week 2022 Summer
2022/６/22
https://enq.itmedia.co.jp/on24u/form/cnw2206?partnerref=itm_atit_ev#keynote2
Elastic 最新バージョンを使って Web・モバイルアプリ開発をしてみよう︕
Elastic 8.x を使った Web・モバイルアプリ開発について、各種パブリッククラウドと連携したデモを交えて、ご紹介していきます。

Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Database, etc..pdf

Recommended

More Related Content

Similar to Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Database, etc..pdf (20)

More from Shotaro Suzuki (20)

Building 3D mobile apps using Power Apps Mixed Reality controls, Azure SQL Database, etc..pdf