Slide 1
Slide 1 text
ホロラボでの HoloLens アプリ開発技術
株式会社ホロラボ
古田裕介
たるこす (@tarukosu)
Slide 2
Slide 2 text
自己紹介
古田裕介
たるこす (@tarukosu)
株式会社ホロラボ
Researcher
2
Slide 3
Slide 3 text
スライド中に登場する URL は以下のブログ記事にまとめてあります
3
https://tarukosu.hatenablog.com/entry/meetup21
Slide 4
Slide 4 text
ホロラボでの HoloLens アプリ開発技術
1. [Closed Source]
ホロラボ社内での取り組み
2. [Open Source]
ソースコードを公開している技術・ライブラリ
3. [Experimental]
開発中・実験中の技術
4
Slide 5
Slide 5 text
ホロラボでの HoloLens アプリ開発技術
1. [Closed Source]
ホロラボ社内での取り組み
2. [Open Source]
ソースコードを公開している技術・ライブラリ
3. [Experimental]
開発中・実験中の技術
5
Slide 6
Slide 6 text
6
HoloLab Toolkit
社内ライブラリ
Slide 7
Slide 7 text
社内ライブラリ: HoloLab Toolkit
7
Unity アプリ開発用社内ライブラリ
開発用ツール（エディタ拡張）
• アプリ用コンポーネントや MRTK の
インポート
• プロジェクトの設定変更
アプリ用コンポーネント
• QR コードトラッキング
• GLB モデルローダー
• お絵描きモジュール
などなど
Slide 8
Slide 8 text
[デモ動画] HoloLab Toolkit でのプロジェクトの設定変更とモジュールのインポート
8
Slide 9
Slide 9 text
プロジェクトのセットアップツールの機能
パッケージ名変更
詳細はブログで紹介: https://tarukosu.hatenablog.com/entry/packagename
アプリアイコン設定
アプリ用フォルダの作成
MRTK や社内モジュールのインポート
9
Slide 10
Slide 10 text
HoloLab Toolkit の開発フロー
GitHub Flow を利用
1. Issue を作成
2. master ブランチからブランチを切って開発
3. Pull Request を作成
4. CI
.NET Scripting Backend と IL2CPP の両方でビルドテスト
5. GitHub 上でマージ（Squash and merge)
10
Slide 11
Slide 11 text
ドキュメントページ
リポジトリ内のマークダウンファイルから
DocFX を使ってドキュメントページを生成
Azure Static Web Apps を使って社内向けに公開（Azure AD認証)
7/29 時点ではプレビューのため注意
11
Slide 12
Slide 12 text
HoloLab Toolkit での知見
プロジェクトの初期セットアップ機能が便利
利用頻度が高いため効果的
エディタ拡張でのフォントは重要
フォントによって見やすさが違う
HoloLab Toolkit ではM+ フォントを利用している
https://mplus-fonts.osdn.jp/about.html
CI は重要
12
Slide 13
Slide 13 text
WebRTC
13
Slide 14
Slide 14 text
WebRTC
WebRTC とは
映像、音声、データをリアルタイムに通信するための技術
主にボイスチャット、ビデオチャットで用いられている
14
Google Meets
Microsoft Teams
Slide 15
Slide 15 text
[デモ動画] HoloLens と iPad での WebRTC を利用したリアルタイムコミュニケーション
15
株式会社インフォマティクス様との共同プロジェクト
Slide 16
Slide 16 text
いまから 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
Slide 17
Slide 17 text
実践クリーンアーキテクチャ
17
Slide 18
Slide 18 text
HoloLens アプリでの実践クリーンアーキテクチャ
とある HoloLens アプリを作る際、
クリーンアーキテクチャを意識して実装を行った
クリーンアーキテクチャの説明は省略します。
詳しく知りたい方は「世界一わかりやすいClean Architecture」
(https://www.nuits.jp/entry/easiest-clean-architecture-2019-09) をご覧ください。
アプリで必要だった機能
- Web サーバから情報を取得して DB (SQLite) へ書き込み
- DB からデータを読み取りアプリ内に表示
- アプリ内で入力した情報を DB へ書きこみ
- 書き込まれた情報を Web サーバへアップロード
18
Slide 19
Slide 19 text
アーキテクチャ
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
アプリ
Slide 20
Slide 20 text
DLL プロジェクトの構成
Unity を一切使わずに、開発・テスト・実行・デバッグを行った
20
DLL のコードを格納
（共有プロジェクト）
.NET Framework 向けに
DLL をビルドするプロジェクト
UWP 向けに
DLL をビルドするプロジェクト
UWP 向け DLL を使った
テスト用 2D UWP アプリ
単体テスト
Slide 21
Slide 21 text
ホロラボでの HoloLens アプリ開発技術
1. [Closed Source]
ホロラボ社内での取り組み
2. [Open Source]
ソースコードを公開している技術・ライブラリ
3. [Experimental]
開発中・実験中の技術
21
Slide 22
Slide 22 text
22
ライブラリを
Git submodule で管理する
Slide 23
Slide 23 text
ライブラリを含むプロジェクトの 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/
…
…
…
…
Slide 24
Slide 24 text
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)
Slide 25
Slide 25 text
25
go-unity-cli
CLI で Unity プロジェクトを開きたい
Slide 26
Slide 26 text
CLI から Unity プロジェクトを開くツール
現在のフォルダの
Unity プロジェクトを開く
プロジェクトの Unity バージョン
ProjectSettings¥ProjectVersion.txt で判定
起動する Unity のパス
Unity Hub のコマンドで取得
26
https://github.com/tarukosu/go-unity-cli
Slide 27
Slide 27 text
[デモ動画] go-unity-cli で Unity プロジェクトを起動
27
alias uc=go-unity-cli しています
Slide 28
Slide 28 text
28
HoloBrowser
HoloLens 用 2D ブラウザ
Slide 29
Slide 29 text
HoloBrowser
3D アプリから立ち上げるための 2D ブラウザアプリ
詳しくは以下のブログをご覧ください
https://blog.hololab.co.jp/entry/holobrowser
29
ストアからインストール可能 ソースコードも公開
Slide 30
Slide 30 text
[デモ動画] 3D アプリから 2D ブラウザの立ち上げ
30
Slide 31
Slide 31 text
31
XR Line Renderer
XR 向け LineRenderer
Slide 32
Slide 32 text
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 でのキャプチャ画像
Slide 33
Slide 33 text
33
HoloLens App Manager
アプリパッケージの社内共有を楽にしたい
Slide 34
Slide 34 text
HoloLens App Manager
HoloLens アプリパッケージの社内共有・インストールアプリ
機能
・アプリパッケージのアップロード
・アプリパッケージのダウンロードとインストール
34
アップロード画面 インストール画面
Slide 35
Slide 35 text
[デモ動画] HoloLens App Manager
35
Slide 36
Slide 36 text
HoloLens App Manager の仕組み
36
Azure Storage
PC
アプリパッケージの
アップロード
PC
ダウンロード
インストール
Device Portal の API を利用
https://github.com/microsoft/
WindowsDevicePortalWrapper
HoloLens 2
Slide 37
Slide 37 text
HoloLens App Manager を社内で使うには
README に従って
- Azure Storage Account の作成
- プロジェクトの設定
ビルドしたアプリを社内共有
各自アプリをインストールし、
USB 接続でのインストールを有効にする
ためのコマンドを実行 (詳細はREADME)
37
https://github.com/HoloLabInc/HoloLensAppManager
Slide 38
Slide 38 text
ホロラボでの HoloLens アプリ開発技術
1. [Closed Source]
ホロラボ社内での取り組み
2. [Open Source]
ソースコードを公開している技術・ライブラリ
3. [Experimental]
開発中・実験中の技術
38
Slide 39
Slide 39 text
HoloLens アプリのフェーズの変化
39
DB・Web システム・HoloLens アプリ・社内システムとの連携、
すべてを作ろうとすると工数がかなり必要
小～中規模
HoloLens が主役
PoC
中～大規模
HoloLens はシステムの一部
外部サービス・アプリとの連携
実運用
Slide 40
Slide 40 text
40
Power Platform
Microsoft が提供しているローコード開発プラットフォーム
Slide 41
Slide 41 text
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 より引用
Slide 42
Slide 42 text
Power Platform と HoloLens
大規模なシステムを少ない工数で構築できるというメリット
データストア
2Dアプリ (PC/タブレット/スマートフォン)
データ分析
HoloLens アプリケーションの立ち位置
システム内のアプリケーションの1つ
HoloLens のメリットが活きる場面で利用する
- 3D モデル表示が有用な場面
- ハンズフリーで作業がしたい場面
42
Slide 43
Slide 43 text
[デモ動画] Power Apps での 3D モデル表示
43
Slide 44
Slide 44 text
[デモ動画] Power Apps での MR 表示
44
Slide 45
Slide 45 text
[デモ動画] HoloLens での 3D モデル表示
45
Slide 46
Slide 46 text
[デモ動画] PowerPlatform と HoloLens アプリの連携
46
Slide 47
Slide 47 text
Microsoft Dataflex Pro に保存された検査情報と記録データ
検査記録のメモ欄に
撮影された画像や動画を格納
47
Slide 48
Slide 48 text
48
HoloLens アプリで
Web サーバーを立てる
Slide 49
Slide 49 text
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 のサンプルページ
Slide 50
Slide 50 text
50
スクリプトによる UI 定義
Slide 51
Slide 51 text
スクリプトによる UI 定義
Flutter や UIWidgets のようなもの
C# スクリプトで UI を記述
ボタンクリックのコールバックを指定可能
51
Slide 52
Slide 52 text
ホロラボでの HoloLens アプリ開発技術
1. [Closed Source]
ホロラボ社内での取り組み
2. [Open Source]
ソースコードを公開している技術・ライブラリ
3. [Experimental]
開発中・実験中の技術
52
Slide 53
Slide 53 text
[再掲] スライド中に登場する URL は以下のブログ記事にまとめてあります
53
https://tarukosu.hatenablog.com/entry/meetup21
Slide 54
Slide 54 text
No content