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

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

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

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

Mixed Reality x Power Apps

PHYSICAL REALITY VIRTUAL REALITY

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

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

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

• https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-component-view-3d-store
• 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/

• https://docs.microsoft.com/ja-JP/powerapps/maker/canvas-apps/limits-and-config
• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/

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

キャンバス アプリに追加するデータ ソース • データソース 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

• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls
• https://netorg4603737-my.sharepoint.com/:f:/g/personal/developer_onginnovations_com/EtbMYeDiiv1LvCtb3wBKTKUBzKrLW-IazsDrZShq-Js_OA?e=yHPxf3

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

• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

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

• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

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

• 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 • スキーマ変更もこの画⾯から 柔軟に可能 • 保存を⾏うと新しい内容で スキーマがコンパイルされ 表⽰される テーブル更新の時は、テーブルエディタで⼀つ⼀つエディットする Command ＋ S または Control + S でテーブルがビルドされる OK ならそのまま作成・更新 簡単に更新ができデータも問題なし https://docs.microsoft.com/ja-jp/sql/azure-data-studio/extensions/add-extensions?view=sql-server-ver16

• https://docs.microsoft.com/ja-jp/sql/azure-data-studio/extensions/add-extensions?view=sql-server-ver16

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

• https://netorg4603737-my.sharepoint.com/:f:/g/personal/developer_onginnovations_com/EtbMYeDiiv1LvCtb3wBKTKUBzKrLW-IazsDrZShq-Js_OA?e=yHPxf3
• 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-realitycomponent-view-3d-store#known-constraints-when-loading-3d-models-incanvas-apps • Power Apps のセキュリティ アーキテクチャは、HTTP ではなく HTTPS リンクを必要とします。 • モデル ファイルをホストするサーバーは、認証を必要とせず、CORS に準拠している必要があります。

• https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-component-view-3d-store

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

• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

データの配置先には制約あり - 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 に⼊れておく

• https://raw.githubusercontent.com/
• https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb

データの配置先に関する考察まとめ 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 を使いたいのでパス アクセス権をブロブとコンテナーをパブリックに設定 ５.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

• https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-component-view-3d-store
• https://portal.azure.com/
• https://base64.guru/converter/encode/file
• https://www.youtube.com/watch?v=bIne3DD3HAg

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

• https://docs.microsoft.com/ja-jp/learn/modules/power-apps-tutorial/3-exercise-add-data-source-gallery-controls

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

• https://docs.microsoft.com/ja-jp/power-apps/maker/canvas-apps/mixed-reality-overview?WT.mc_id=spatial-13741-apspeigh
• https://www.youtube.com/watch?v=IA7UCP0W5ms
• https://zenn.dev/chomado/books/babylonjs-tutorial-ja

DEMO

リソース 参考︓ 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

• https://www.youtube.com/watch?v=GmYOjyUP9Hk
• https://www.youtube.com/watch?v=wjB54iD5qzo
• https://github.com/Dhruvinshah16/PowerApps-MR-Lab
• 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

• https://www.elastic.co/jp/virtual-event/developer-advocate-series-1/

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・モバイルアプリ開発について、各種パブリッククラウドと連携したデモを交えて、ご紹介していきます。

• https://enq.itmedia.co.jp/on24u/form/cnw2206?partnerref=itm_atit_ev

Thank you for your attention!