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

230 Views

May 28, 22

スライド概要

Power Apps Mixed Reality コントロール、Azure SQL Database 等を使用した 3D モバイル アプリの構築
https://dotnetlab.connpass.com/event/246279/

profile-image

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

Mixed Reality x Power Apps

5.

PHYSICAL REALITY VIRTUAL REALITY

6.

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

7.

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

8.

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

9.

MS Learn コンテンツご紹介

10.

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

11.

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

12.

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

13.

SharePoint (Excel) を使うのが本チュートリアル SharePoint (Excel も可) • • • • • • いくつかのやり⽅があるが、どこに格納するかが問題 SharePoint のリストに格納または Excel + OneDrive が⼀番便利 オフィス内での使⽤のみなら⼀番いい 今回は、SQL Azure Database に URL を格納して表⽰したい https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

14.

Azure SQL Database を設定する • Azure SQL Database https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

15.

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

16.

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

17.

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

18.

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

19.

データの配置先には制約あり - 2 • データの配置先を下記のように変更 • Azure Blob (.png 等) • GitHub (.glb ) https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

20.

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

21.

データの配置先に関する考察まとめ 1. Microsoft Power Automate を使⽤して Base64 でエンコード された 3D モデルを作成する https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/mixed-reality-component-view3d-store#create-a-base64-encoded-3d-model-withmicrosoft-power-automate 今回は使わない 4. Blob ストレージに全て格納 Button コントロールを配置 OnSelect で Gallery にある ファイルの Name をもとにとってくる Set(glbfiles1, AzureBlobStorage.CreateShareLinkByPathV2 (Galery_Products.Selected.AttachedFile).webUrl 2. Blob ストレージに格納 ⼤量データの管理が⾯倒なのは SharePoint や Excel と変わらずAzure SQL Database を使いたいのでパス アクセス権をブロブとコンテナーをパブリックに設定 5.Azure Blob には Image データ、GitHub には .glb データをホストする CORS を Power Apps Com 等に設定(念の為) これが⼀番スムースに可能なので今回はこれ(今後検討する必要がある) テキストでURL が来るだけでエンコードされず、表⽰されず Blob がダウン ロードされることもある https://docs.microsoft.com/ja-jp/power-apps/maker/canvasapps/mixed-reality-component-view-3d-store#host-your-3d-modelfiles-in-github https://portal.azure.com/#@koryoku.com/resource/subscrip tions/0c27fa1d-69fc-43e5-80d883da4f6a10c8/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

22.

キャンバスアプリから接続する際の注意点 • デフォルトオンに注意︕ • 設定 → 近⽇公開の機能 • 拡張 Microsoft SQL Server コネクタを有効にする • → オフにしないと繋がっているのにキャンバスに データが表⽰されない 認証 テーブル選択 https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

23.

Babylon.js 他 • 応⽤ • MR で表⽰に関連して • Babylon.js https://docs.microsoft.com/ja-jp/power-apps/maker/canvasapps/mixed-reality-overview?WT.mc_id=spatial-13741apspeigh 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

24.

DEMO

26.

リソース 参考︓ 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-realityoverview?WT.mc_id=spatial-13741-apspeigh

27.

デベロッパーアドボケート ウェビナーシリーズ (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

28.

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

29.

Thank you for your attention!