勉強会『HoloLens Meetup Kobe (#AR_KOBE)』での登壇資料です。記事版はこちら：https://qiita.com/chomado/items/d4ff1edae797dfbd3c45

1. 手乗り (*ﾟ▽ﾟ* っ)З ちょまぎょ
アプリでMRTK 入門
Microsoft
Cloud Developer Advocate
千代田まどか（ちょまど）

2. 当日ツイートしてくださった方々ありがとうございました！

3. 当日ツイートしてくださった方々ありがとうございました！

4. 当日ツイートしてくださった方々ありがとうございました！

5. 自己紹介
千代田まどか（ちょまど）
• C# が好きで 現在 Microsoft 社員
• 休日はゲーム廃人 (15 時間 /日)
• Twitter: @chomado

6. #xRDCC #HoloMagicians#HoloLens #AR_KOBE
HoloLens の父、Alex Kipman や
友達の いくちょんを描いた (HL2 装備)

7. #xRDCC #HoloMagicians#HoloLens #AR_KOBE
描いた絵

8. #xRDCC #HoloMagicians#HoloLens #AR_KOBE
Twitter やっています！
• Twitter @chomado
• フォロワー 約 8 万人

9. #xRDCC #HoloMagicians#HoloLens #AR_KOBE
実は今日の内容はブログにまとめました
https://aka.ms/TenoriChomagyo

10. すぐに活用できる
ビジネスアプリケーション
アプリケーション開発を加速する
サービスとSDK
MR 開発に便利な (MS 公式) サービス

11. HoloLens の OS
Windows 10 Holographic
が載っている

12. HoloLens で動くアプリケーション

13. HoloLens アプリの形態は大きくわけて2種類

14. 2D アプリ → 通常の UWP アプリ開発
Visual Studio 2019
C# (or VB) + XAML
XAML (Extensible Application Markup Language):
主にアプリの UI を記述するときに使うマークアップ言語。
XAML で画面 UI を定義して、その裏の挙動を C# で書いていきます。

15. 2D アプリ：UWP 公式ドキュメント
https://aka.ms/uwp-jp

16. Unity を使った HoloLens 2D アプリ
ハローワールドは、ホロラボさんの資料に詳しい手順
HoloLens 2 ハンズオン(セッ
トアップ) – Speaker Deck
https://speakerdeck.com/hol
olab/set-up-the-
development-environment-
for-hololens-2-20200705

17. 3D アプリ

18. 主な 3D アプリ開発ツール・環境
HoloLens 1 から
使われてきている
ゲームエンジン
HoloLens 2 から
開発に利用できる
ようになった
ゲームエンジン

19. Unity プロジェクト
ビルド
UWP プロジェクト UWP アプリ
ビルド インストール
HoloLens 上で
実行可能
3D のシーンの開発
C# スクリプトの開発
UWP アプリビルド用 配布用パッケージ
HoloLens アプリ開発の流れ (Unity の場合)

20. ぜひ利用したい公式 SDK :
MRTK (Mixed Reality Toolkit)
https://github.com/microsoft/MixedRealityToolkit-Unity
https://github.com/microsoft/MixedRealityToolkit-Unreal
Unity, UE それぞれ向けに
Microsoft が
オープンソースで開発している

21. 例）「ボタンを押す」という動作を Unity で作るとき
[ボタンを押す動作] MRTK を ** 使わなかったら **
1. HoloLens 2 の API から、直接、手の入力イベント取って、
2. 人差し指の位置をとって、
3. アタリ判定を付けて、
4. ボタン側にもアタリ判定付けて、
5. ボタンに触れてから 10cm 押し込んだことをロジックで検出して
6. イベントを起こす
ちょっと大変そうね

22. 例）「ボタンを押す」という動作を Unity で作るとき
[ボタンを押す動作] MRTK を ** 使ったら **
1. シーンに PressableButton のプレハブを置く
2. （終了）
え！終わり！？
一瞬じゃん！
MRTK やば
MRTK は いいぞ！

23. MRTK の色々な UI/インタラクションの部品
https://github.com/microsoft/MixedRealityToolkit-Unity

24. HoloLens 2 開発に必要な環境 (Unity)
MRTK-Unity の
トップページを
見るのが良いかも
https://github.com/microsoft/MixedRealityToolkit-Unity

25. MRTK 公式ドキュメント
https://microsoft.github.io/MixedRealityToolkit-Unity/Documentation/WelcomeToMRTK.html

26. ホロラボさんが翻訳してくれてる日本語版ドキュメント
https://hololabinc.github.io/MixedRealityToolkit-Unity/Documentation.ja/GettingStartedWithTheMRTK.html

27. ホロラボさんが翻訳してくれてる日本語版ドキュメント
https://hololabinc.github.io/MixedRealityToolkit-Unity/Documentation.ja/GettingStartedWithTheMRTK.html
https://twitter.com/tarukosu/status/
1311932355561488386

28. (*ﾟ▽ﾟ* っ)З ちょまぎょ！をハンドメニューに
https://twitter.com/chomado/status/1284098255433785344

29. (*ﾟ▽ﾟ* っ)З ちょまぎょ！が 3D モデルに
いつも僕のブログを
ツイートで紹介してくれるお礼に
ちょまぎょを
3D モデリングしてみました！
by 神モデラー の モンさん (@HoloAdventure)
マジ神
しかも慈悲深いほうの神
モンさんが毎日
更新してるブログ

30. 手載り (*ﾟ▽ﾟ* っ)З ちょまぎょ！
を作ってみた！（動画）
MRTK の Solvers 機能を使っています。
また、机や床にキャラを置けます

31. （デモ動画再生できなかったとき用の静止画）
床や机も
認識して
置ける

32. 作り方はモンさんのブログ『MRが楽しい』に！
https://bluebirdofoz.hatenablog.com/entry/2020/07/21/232553
（URL 長いからセッション後にツイートします！）

33. おととい MRTK 2.5 リリース
https://bluebirdofoz.hatenablog.com/entry/2020/07/21/232553
参考にしているモンさんの記事
(2020/7/21) は
MRTK 2.4 の内容なので
自分で手元で 2.5 でやってみた
→ 結果ほぼ手順は変わらんかった
https://techcommunity.microsoft.com/t5/mixed-
reality-blog/mrtk-2-5-0-is-now-available-on-github-
and-unity-package-manager/ba-p/1732715

34. MRTK (Mixed Reality Toolkit) とは
Mixed Reality アプリケーション向けの
オープンソースの
クロスプラットフォーム開発キット(SDK) です。
(引用元：MS 公式ドキュメント https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrtk-getting-started )
とくに HoloLens アプリ開発するならほぼほぼ必須だと思う

35. MRTK の機能例

36. MRTK の機能例 今回使うコンポーネント 6 種
ハンドメッシュの
表示に使用
プロファイル設定
に使用
手乗りの
オブジェクトの
追従に使用
床に落ちる判定
の空間認識に
使用
手乗りちょまぎょの
台の見た目で使用
エディタ内の
シミュレーターでの
実行に使用

37. MRTK: ハンドメッシュについて
ちなみに、ハンド メッシュの表示は
パフォーマンスに影響を与える場合があるので、
無効にすることもできる。
手の形を表示する機能。
(写真だとメッシュがズレて見えるけど、これを見てる本人はちゃん
と手の位置に一致して見えてる。目の位置とカメラの位置の違
い。キャプチャ時に位置を一致させる設定もある)

38. #xRDCC #HoloMagicians#HoloLens #AR_KOBE
手乗りちょまぎょ!(*ﾟ▽ﾟ* っ)З アプリ

39. Unity プロジェクトの新規作成

40. Unity プロジェクトの新規作成

41. MRTK インポート
今まで：
GitHub の Releases から
直接 .unitypackage ダウンロード
MRTK 2.5 から：
Unity Package Manager が
使える

42. MRTK 2.5 を 取り込む
プロジェクトフォルダの
Packages/manifest.json を
テキストエディタで開く

43. MRTK 2.5 を 取り込む
manifest.json に
これを追記。
(パッケージの置いてある場所など
を手動で追記)

44. MRTK 2.5 を 取り込む
保存して
Unity Editor に戻ると
何かが動く

45. MRTK 2.5 を 取り込む
Packages の下に
MRTK 関連のフォルダが
できている
注意すること）
今までは Assets フォルダに MRTK が入っていたけど
今回 Packages に入るから
これまで Assets/MRTK/SDK/Features/... みたいな
path があったら
Assets を Packages (例：Packages/Mixed Reality
Toolkit Foundation/SDK/...) ) に置き換えて読む感じに
なる

46. ブログ書いた https://qiita.com/chomado/items/ff21e57aa563191f3be0

47. MRTK がちゃんと入ると出て来る ①
MRTK (の Foundation) パッ
ケージが入ると、
MRTK Project Configurator
ダイアログ が上がってくる
MRTK 用に Unity プロジェクトの
設定をよしなにやってくれる人

48. MRTK がちゃんと入ると出て来る ②
Unity エディタのメニューバーに
『Mixed Reality Toolkit』が
追加される

49. ビルド対象プラットフォームを UWP に切り替え
HoloLens 上で動くアプリは
UWP (Universal Windows
Platform) アプリ

50. シーンとコンフィグレーションの設定
• MixedRealityToolkit : MRTK 本体
• MixedRealityPlayspace : ヘッドセットの親オブジェクト
• Main Camera : もともとあったメインカメラが子オブジェクトとして移動してきた

51. HoloLens 2 用のプロファイル選択
MixedRealityToolkit オブジェク
トの inspector ビュー
HoloLens 2 向けに
最適化されたプロファイル

52. プロジェクト名をデフォルト (“Template3D”) から変更
ここを変えないと、
インストール時に同名のアプリが
上書きされてしまう。
(デフォルト “Template3D”)

53. 手乗りちょまぎょのモデルを配置

54. 手の平に追従するソルバーを設定する
モデルの親オブジェクトに
Hand Constraint Palm Up
コンポーネントをアタッチする
Hand Constraint Palm Up は
UI メニューを表示するためによく使うコンポーネ
ントで、手のひらの表裏の動きを検出しオブジェ
クトを制御するためのソルバー

55. MRTK:「ソルバー」とは？
手や頭の動きをもとに、
オブジェクトの配置を
決めるコンポーネント
これで、手の動きに
追従するモデルを
実装できるよ！
なんの動きをもとに
配置を決めるかを選択。
頭, 手 など

56. 手の検出イベントに合わせ重力の設定を切り替える

57. MRTK プロファイル (設定集的なもの) をカスタマイズ
(直接編集はできないのでコピー&カスタマイズしていく)
[Copy & Customize](コピーしてカスタマイ
ズ) ボタンをクリックして、[Clone Profile](プロ
ファイルの複製) ウィンドウを開く
[Clone](クローン) ボタンをクリックし、
DefaultHololens2ConfigurationProfile
の編集可能なコピーを作成

58. MRTK が提供するマテリアルを利用して
見た目も MRTK っぽく
Packages/MixedRealityToolkitFoundation/
SDK/Features/UX/Interactable/Materials

59. Unity エディタで再生してみる (動画)

60. (デモ動画が再生できなかったとき用の静止画)
HoloLens 実機が無くても
ある程度
Unity エディタの
シミュレーターで
実行できるよ

61. あとはアプリのビルドと HL2 へのインストール。
手順はモンさんのブログへ
『MRTK v2.4.0を使ってHoloLens2で手乗りキャラクターアプリを作成する』
https://bluebirdofoz.hatenablog.com/entry/2020/07/22/002710
手の上に載る。
(可愛い)
机の上に載る。
(可愛い)

62. まとめ：「MR が楽しい」
https://bluebirdofoz.hatenablog.com/entry/2020/07/22/002710

63. 今日の内容はブログにまとめました
https://aka.ms/TenoriChomagyo

64. ホロラボさんが翻訳してくれてる日本語版ドキュメント
https://hololabinc.github.io/MixedRealityToolkit-Unity/Documentation.ja/GettingStartedWithTheMRTK.html
https://twitter.com/tarukosu/status/
1311932355561488386

65. 公式：MRTK 2.5 リリースノート
https://techcommunity.microsoft.com/t5/mixed-reality-blog/mrtk-2-5-0-is-now-available-on-github-and-unity-
package-manager/ba-p/1732715

66. Twitter : @chomado
ありがとうございました！
(ぜひ感想を ハッシュタグ付きで
ツイートしてね)