ホロラボでの HoloLens アプリ開発技術 / App Development at HoloLab

Tokyo HoloLens ミートアップ vol.21 での登壇資料です。

発表動画
https://www.youtube.com/watch?v=-QLk_Qo4YLk

リンクや動画をまとめたブログ記事はこちら
https://tarukosu.hatenablog.com/entry/meetup21

Transcript

1. ホロラボでの HoloLens アプリ開発技術 株式会社ホロラボ 古田裕介 たるこす (@tarukosu)
2. 自己紹介 古田裕介 たるこす (@tarukosu) 株式会社ホロラボ Researcher 2
3. スライド中に登場する URL は以下のブログ記事にまとめてあります 3 https://tarukosu.hatenablog.com/entry/meetup21
4. ホロラボでの HoloLens アプリ開発技術 1. [Closed Source] ホロラボ社内での取り組み 2. [Open Source] ソースコードを公開している技術・ライブラリ 3. [Experimental] 開発中・実験中の技術 4
5. ホロラボでの HoloLens アプリ開発技術 1. [Closed Source] ホロラボ社内での取り組み 2. [Open Source] ソースコードを公開している技術・ライブラリ 3. [Experimental] 開発中・実験中の技術 5
6. 6 HoloLab Toolkit 社内ライブラリ
7. 社内ライブラリ: HoloLab Toolkit 7 Unity アプリ開発用社内ライブラリ 開発用ツール（エディタ拡張） • アプリ用コンポーネントや MRTK の インポート • プロジェクトの設定変更 アプリ用コンポーネント • QR コードトラッキング • GLB モデルローダー • お絵描きモジュール などなど
8. [デモ動画] HoloLab Toolkit でのプロジェクトの設定変更とモジュールのインポート 8
9. プロジェクトのセットアップツールの機能 パッケージ名変更 詳細はブログで紹介: https://tarukosu.hatenablog.com/entry/packagename アプリアイコン設定 アプリ用フォルダの作成 MRTK や社内モジュールのインポート 9
10. HoloLab Toolkit の開発フロー GitHub Flow を利用 1. Issue を作成 2. master ブランチからブランチを切って開発 3. Pull Request を作成 4. CI .NET Scripting Backend と IL2CPP の両方でビルドテスト 5. GitHub 上でマージ（Squash and merge) 10
11. ドキュメントページ リポジトリ内のマークダウンファイルから DocFX を使ってドキュメントページを生成 Azure Static Web Apps を使って社内向けに公開（Azure AD認証) 7/29 時点ではプレビューのため注意 11
12. HoloLab Toolkit での知見 プロジェクトの初期セットアップ機能が便利 利用頻度が高いため効果的 エディタ拡張でのフォントは重要 フォントによって見やすさが違う HoloLab Toolkit ではM+ フォントを利用している https://mplus-fonts.osdn.jp/about.html CI は重要 12
13. WebRTC 13
14. WebRTC WebRTC とは 映像、音声、データをリアルタイムに通信するための技術 主にボイスチャット、ビデオチャットで用いられている 14 Google Meets Microsoft Teams
15. [デモ動画] HoloLens と iPad での WebRTC を利用したリアルタイムコミュニケーション 15 株式会社インフォマティクス様との共同プロジェクト
16. いまから WebRTC を始めたい場合は？ まずは Web アプリで WebRTC について学ぶ ライブラリ選択 • [Deprecated] WebRTC UWP SDK https://github.com/webrtc-uwp/webrtc-uwp-sdk • MixedReality-WebRTC https://github.com/microsoft/MixedReality-WebRTC - Release v1.0.3 (https://github.com/microsoft/MixedReality-WebRTC/releases/tag/v1.0.3) - Release v2.0.0 (preview) (https://github.com/microsoft/MixedReality-WebRTC/releases) 趣味プロジェクト or 社内調査から始めるのがおすすめ ハマりどころが多いので、納期があるとつらい 16
17. 実践クリーンアーキテクチャ 17
18. HoloLens アプリでの実践クリーンアーキテクチャ とある HoloLens アプリを作る際、 クリーンアーキテクチャを意識して実装を行った クリーンアーキテクチャの説明は省略します。 詳しく知りたい方は「世界一わかりやすいClean Architecture」 (https://www.nuits.jp/entry/easiest-clean-architecture-2019-09) をご覧ください。 アプリで必要だった機能 - Web サーバから情報を取得して DB (SQLite) へ書き込み - DB からデータを読み取りアプリ内に表示 - アプリ内で入力した情報を DB へ書きこみ - 書き込まれた情報を Web サーバへアップロード 18
19. アーキテクチャ 19 Use Cases Controller Presenter Repository Unity UI DB https://blog.cleancoder.com/uncle- bob/2012/08/13/the-clean-architecture.html より引用 アプリケーションのコア部分を DLL (Managed Plugin) として作成 Presenter 2D UWP UI Controller 開発用 2D UWP アプリ HoloLens アプリ
20. DLL プロジェクトの構成 Unity を一切使わずに、開発・テスト・実行・デバッグを行った 20 DLL のコードを格納 （共有プロジェクト） .NET Framework 向けに DLL をビルドするプロジェクト UWP 向けに DLL をビルドするプロジェクト UWP 向け DLL を使った テスト用 2D UWP アプリ 単体テスト
21. ホロラボでの HoloLens アプリ開発技術 1. [Closed Source] ホロラボ社内での取り組み 2. [Open Source] ソースコードを公開している技術・ライブラリ 3. [Experimental] 開発中・実験中の技術 21
22. 22 ライブラリを Git submodule で管理する
23. ライブラリを含むプロジェクトの Git 管理 MRTK などのライブラリを含むプロジェクトを Git で管理する場合 短期プロジェクト Unity Package をインポートして、普通に Git で管理 長期プロジェクトやライブラリ Git submodule として追加 - ライブラリのコードが自分のリポジトリに 入らない (コミットIDのみ管理される) - バージョン変更が楽 23 自分のリポジトリ Assets/ Scripts/ SampleScript.cs Scenes/ SampleScene.scene _external/ MixedRealityToolkit-Unity MixedRealityToolkit-Unity Assets/ MRTK/ Core/ XR/ Documentation/ … … … …
24. Git submodule として追加したライブラリを Assets に入れるには Assets 内に追加したいフォルダへのシンボリックリンクを作成 詳しくはブログをご覧ください https://tarukosu.hatenablog.com/entry/UnitySubmodule 24 Assets/ Scripts/ SampleScript.cs Scenes/ SampleScene.scene MRTK/ Core Providers _external/ MixedRealityToolkit-Unity/ Assets/ MRTK/ Core Providers … Submodule を含めて clone したフォルダ構成 それぞれ 対応するフォルダへの シンボリックリンク … SymlinkSettings.yaml go-symlink-creator シンボリックリンクを作成するツール (OSS)
25. 25 go-unity-cli CLI で Unity プロジェクトを開きたい
26. CLI から Unity プロジェクトを開くツール 現在のフォルダの Unity プロジェクトを開く プロジェクトの Unity バージョン ProjectSettings¥ProjectVersion.txt で判定 起動する Unity のパス Unity Hub のコマンドで取得 26 https://github.com/tarukosu/go-unity-cli
27. [デモ動画] go-unity-cli で Unity プロジェクトを起動 27 alias uc=go-unity-cli しています
28. 28 HoloBrowser HoloLens 用 2D ブラウザ
29. HoloBrowser 3D アプリから立ち上げるための 2D ブラウザアプリ 詳しくは以下のブログをご覧ください https://blog.hololab.co.jp/entry/holobrowser 29 ストアからインストール可能 ソースコードも公開
30. [デモ動画] 3D アプリから 2D ブラウザの立ち上げ 30
31. 31 XR Line Renderer XR 向け LineRenderer
32. XR Line Renderer Unity Technologies が公開している、 XR 用に最適化された軽量 Line Renderer HoloLens では正常に動作しなかったため、 Fork して改良 リポジトリ: https://github.com/HoloLabInc/XRLineRenderer/tree/hololab/for-hololens Unity Package: https://github.com/HoloLabInc/XRLineRenderer/releases/tag/hololab-v1.0.0 32 HoloLens でのキャプチャ画像
33. 33 HoloLens App Manager アプリパッケージの社内共有を楽にしたい
34. HoloLens App Manager HoloLens アプリパッケージの社内共有・インストールアプリ 機能 ・アプリパッケージのアップロード ・アプリパッケージのダウンロードとインストール 34 アップロード画面 インストール画面
35. [デモ動画] HoloLens App Manager 35
36. HoloLens App Manager の仕組み 36 Azure Storage PC アプリパッケージの アップロード PC ダウンロード インストール Device Portal の API を利用 https://github.com/microsoft/ WindowsDevicePortalWrapper HoloLens 2
37. HoloLens App Manager を社内で使うには README に従って - Azure Storage Account の作成 - プロジェクトの設定 ビルドしたアプリを社内共有 各自アプリをインストールし、 USB 接続でのインストールを有効にする ためのコマンドを実行 (詳細はREADME) 37 https://github.com/HoloLabInc/HoloLensAppManager
38. ホロラボでの HoloLens アプリ開発技術 1. [Closed Source] ホロラボ社内での取り組み 2. [Open Source] ソースコードを公開している技術・ライブラリ 3. [Experimental] 開発中・実験中の技術 38
39. HoloLens アプリのフェーズの変化 39 DB・Web システム・HoloLens アプリ・社内システムとの連携、 すべてを作ろうとすると工数がかなり必要 小～中規模 HoloLens が主役 PoC 中～大規模 HoloLens はシステムの一部 外部サービス・アプリとの連携 実運用
40. 40 Power Platform Microsoft が提供しているローコード開発プラットフォーム
41. Power Platform とは 以下の4製品からなる - Power BI - Power Apps - Power Automate - Power Virtual Agents データプラットフォーム Microsoft Dataflex Pro （旧: Common Data Service) 41 https://docs.microsoft.com/ja-jp/powerapps/maker/common-data- service/data-platform-intro より引用
42. Power Platform と HoloLens 大規模なシステムを少ない工数で構築できるというメリット データストア 2Dアプリ (PC/タブレット/スマートフォン) データ分析 HoloLens アプリケーションの立ち位置 システム内のアプリケーションの1つ HoloLens のメリットが活きる場面で利用する - 3D モデル表示が有用な場面 - ハンズフリーで作業がしたい場面 42
43. [デモ動画] Power Apps での 3D モデル表示 43
44. [デモ動画] Power Apps での MR 表示 44
45. [デモ動画] HoloLens での 3D モデル表示 45
46. [デモ動画] PowerPlatform と HoloLens アプリの連携 46
47. Microsoft Dataflex Pro に保存された検査情報と記録データ 検査記録のメモ欄に 撮影された画像や動画を格納 47
48. 48 HoloLens アプリで Web サーバーを立てる
49. HoloLens アプリで Web サーバーを立てる HTTP 通信には以下のライブラリを利用 [Unity Editor/IL2CPP] System.Net.HttpListerner [.NET Scripting Backend] NETStandard.HttpListener https://github.com/StefH/NETStandard.HttpListener ルーティングは自前実装 StreamingAssets フォルダ内の ファイルを返す (html/js など) 49 Blazor WebAssembly のサンプルページ
50. 50 スクリプトによる UI 定義
51. スクリプトによる UI 定義 Flutter や UIWidgets のようなもの C# スクリプトで UI を記述 ボタンクリックのコールバックを指定可能 51
52. ホロラボでの HoloLens アプリ開発技術 1. [Closed Source] ホロラボ社内での取り組み 2. [Open Source] ソースコードを公開している技術・ライブラリ 3. [Experimental] 開発中・実験中の技術 52
53. [再掲] スライド中に登場する URL は以下のブログ記事にまとめてあります 53 https://tarukosu.hatenablog.com/entry/meetup21