HoloLens 2 開発入門 (公式チュートリアルの紹介) + MRTK はいいぞ

最近勉強会で『**HoloLens 2 開発入門 (公式チュートリアルの紹介)**』というタイトルで登壇しました。
その時にお話しした内容がわりと好評だったので (ありがとうございます！)、[スライド](https://www.slideshare.net/chomado/hololens-2-231460487) のスクショと一緒にこちらの記事でもまとめてみようと思います。

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> オンライン勉強会 <a href="https://twitter.com/hashtag/KumaMCN?src=hash&amp;ref_src=twsrc%5Etfw">#KumaMCN</a> <br>現在 登壇者 待機中です！<br>あと２分で開場です！ドキドキ！<a href="https://t.co/3X7obuHkJ6">https://t.co/3X7obuHkJ6</a><br>（このスクショは投稿の許可貰って投稿してます） <a href="https://t.co/nb50PjTQzu">pic.twitter.com/nb50PjTQzu</a></p>&mdash; ちょまど🎀ITエンジニア兼マンガ家 (@chomado) <a href="https://twitter.com/chomado/status/1247101368587792386?ref_src=twsrc%5Etfw">2020年4月6日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

当日は、Zoom と YouTube Live あわせて 90 人程度の方々がいらっしゃいました。ありがとうございました！

# 要点 3 行

1. 【[HoloLens 2 のマイクロソフト公式チュートリアル](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)】はいいぞ（全 7 章あります）。ぜひトライしてみてください
3. 実機が無くてもチュートリアル進められるよ
2. MRTK はいいぞ

#  公式チュートリアルぜひ見てみてね！

HoloLens 2 公式チュートリアル ([https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)) ぜひ見てみてね！

↓ このように、「Unity で新規作成」からスクショ付きで丁寧に進められます


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/032edbd2-1ff9-923d-1ca8-4c4a2aee3736.png)


# 目次


1. (一応) HoloLens とは？
2. HoloLens 2 アプリ開発環境
    - MRTK とは
3. 公式チュートリアル紹介
    - どんなことができるの？
    - 何が学べるの？
    - 実機が無くても進められるの？（できます）

↓ スライド

<iframe src="//www.slideshare.net/slideshow/embed_code/key/1SzXWDpJvI2dRg" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/chomado/hololens-2-231460487" title="HoloLens 2 開発入門 (公式チュートリアルの紹介)" target="_blank">HoloLens 2 開発入門 (公式チュートリアルの紹介)</a> </strong> </div>

# HoloLens とは（簡単に）

HoloLens (ホロレンズ) とは、
マイクロソフトが開発した、
Windows 10 を搭載した 自己完結型ホログラフィックコンピューターです。
(ゴーグル型デバイスでよくある「パソコンに繋げて使う外部ディスプレイ」ではないということ)

詳細に書いたらスペースが足りないので、簡単に。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/bc340f46-3216-2d2c-ad4d-46bab24805b2.png)

HoloLens 2 公式サイト→ [https://microsoft.com/ja-jp/hololens](https://www.microsoft.com/ja-jp/hololens?WT.mc_id=docs-blog-machiy)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/750114cb-69f8-da8d-3eec-2168ac706700.png)

動画を撮りました

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Microsoft による、<br>ゴーグル型の<br>ホログラフィック コンピュータ<a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a> で遊んでみた😍<br><br>ホログラム掴んだり<br>未来感！！<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> のサンプルシーンを<br>デプロイしてみたよ☺️<br><br>🇺🇸Microsoft 本社ビルの中で撮影！<br><br>動画のフルバージョンは YouTube に上げました：<a href="https://t.co/kkJeSujQv5">https://t.co/kkJeSujQv5</a> <a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <a href="https://t.co/3aTfG3yCE4">pic.twitter.com/3aTfG3yCE4</a></p>&mdash; ちょまど🎀ITエンジニア兼マンガ家 (@chomado) <a href="https://twitter.com/chomado/status/1227908381253390336?ref_src=twsrc%5Etfw">February 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# HoloLens 2 アプリ開発環境

開発環境確認は、MRTK の [GitHub レポジトリ](https://github.com/microsoft/MixedRealityToolkit-Unity)を見るのが一番良いと思う。

## MRTK とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/70f52268-fc46-21eb-08b2-2e8f0ad5c85b.png)


**MRTK** (Mixed Reality Toolkit) とは、
Microsoft が オープンソースで開発している、
xR アプリを開発するときに便利な Unity 用のライブラリ です。

 (GitHub リポジトリ: [github.com/microsoft/MixedRealityToolkit-Unity](https://github.com/microsoft/MixedRealityToolkit-Unity) ) 

クロスプラットフォームのための構成になっており、HoloLens (MR) の他、VR や AR でも利用できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b1b0cd17-26a9-57c3-9a02-f0ef3ccfa8a8.png)

### Unity での HoloLens アプリ開発には MRTK ほぼ必須 (だと思う)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/cf8888d4-106d-6905-f68b-9b44cf6d68de.png)

## 例）「ボタンを押す」という動作を Unity で作るとき

### (1) [ボタンを押す動作] MRTK を ** 使わなかったら **

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6f5a064f-ffe2-23a8-6045-1f758f7f59cd.png)

### (2) [ボタンを押す動作] MRTK を ** 使ったら **

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8babe045-f1b6-7e43-d609-a2d13be19b0f.png)

MRTK はいいぞ！ ( 3 回目)

## MRTK 色々できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/09c35202-acc1-8016-2990-9b9dedf3dd5d.png)

↓ MRTK の 色々な UI/インタラクション の部品

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/aad05720-eef7-2e6c-cca0-cdb4ec19cbfd.png)

（図：[MRTK 公式ドキュメント](https://microsoft.github.io/MixedRealityToolkit-Unity/version/releases/2.3.0/README.html)より）

## HoloLens 2 開発に必要な環境 (Unity)

MRTK GitHub リポジトリを見るのが良さそうです。
Unity のバージョンなど特に大切です。
[github.com/microsoft/MixedRealityToolkit-Unity](https://github.com/microsoft/MixedRealityToolkit-Unity)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/720835d9-fe56-8d5a-a5b1-d5fef5ee41f5.png)

# HoloLens 2 公式チュートリアル紹介

[HoloLens 2 のマイクロソフト公式チュートリアル](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)（全 7 章あります）が
丁寧だし勉強になるし、とても良いです。

## 完成形

↓ こんな感じのができます。

### Unity エディタ上

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4471b64d-784d-9a65-6539-4300da8ffd96.png)

### HoloLens 2 実機上

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0b018159-e935-1467-10b9-2246acc5a8c0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b3accad9-cb7f-aba6-42b6-c1e5fdc36449.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7c625832-ba00-cea6-d620-13556545514a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/35ec9312-1c05-af65-8a03-dc57f07bd65b.png)

## HoloLens 2 エミュレータあります

HoloLens 2 実機持ってなくてもチュートリアル進められるよ！

エミュレータ公式ドキュメント：
[https://docs.microsoft.com/ja-jp/windows/mixed-reality/using-the-hololens-emulator](https://docs.microsoft.com/ja-jp/windows/mixed-reality/using-the-hololens-emulator?WT.mc_id=docs-blog-machiy)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8d3aa3b0-6889-752e-e71d-d203f1c4e38f.png)

## Unity エディタ上での実行

HoloLens 2 実機持ってなくてもチュートリアル進められるよ！ (2回目)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> 勉強中！<br>Unity エディタのシミュレーターの操作方法をこの記事を読んで勉強中！<br>→ 『MRTK v2を使ってUnityEditor内でのシミュレーション機能を操作する』 <a href="https://t.co/XMBeuFww2n">https://t.co/XMBeuFww2n</a><br><br>両手使ってびよーんってオブジェクトを拡大縮小してるよ！ <a href="https://t.co/OK3M1nxUQQ">pic.twitter.com/OK3M1nxUQQ</a></p>&mdash; ちょまど🎀ITエンジニア兼マンガ家 (@chomado) <a href="https://twitter.com/chomado/status/1236612345805201408?ref_src=twsrc%5Etfw">March 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/310b9a83-f10c-0b77-b55b-1e7a662958c2.png)

参考記事 → [MRTK v2を使ってUnityEditor内でのシミュレーション機能を操作する](https://bluebirdofoz.hatenablog.com/entry/2019/11/08/123324)

どうやって左手右手出すとかなどなど、詳しく書かれていてとても良い

# 【本題】何を学べるか

[HoloLens 2 のマイクロソフト公式チュートリアル](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)（全７章）で、何を学べるかについてです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ea71da4b-df0f-815e-95a2-64280058e664.png)

章の構成（全７章）

1. 概要と目標
2. プロジェクトと最初のアプリケーションの初期化
3. ユーザー インターフェイスの作成と MRTK の構成
4. 動的なコンテンツの配置とソルバーの使用
5. 3D オブジェクトの操作
6. 高度な入力オプションの探索
7. 月着陸船サンプル アプリケーションの作成

それぞれの章で何を学べるかみてみましょう。

## 1. 概要と目標

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/5a09277d-56dc-e228-e893-1dec7682ab31.png)

第一章は【HoloLens 2 開発環境 確認】 です。

* 各種開発環境の確認 
* (MRTK 公式サイトでは Unity 2018.4.x でしたが、こちらのチュートリアルでは 2019.2.x が推奨されています。) 
* (また、MRTK のバージョンは v2.2 が使用されています)

↓ 開発用のパソコン (Surface Laptop) に HoloLens 2 実機を繋げて有線デプロイをしているところの写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/a9034910-bceb-e713-bb97-217b3b64a907.png)

## 2. プロジェクトと最初のアプリケーションの初期化

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9a556497-72e1-59cd-bc90-4b70e6813e95.png)

第二章は【HoloLens 2 ハローワールド】です。

* HoloLens 2 開発用の Unity の設定
* MRTK インポート＆ Unity 設定
* HoloLens 2 へのデプロイの仕方

第二章を終えたら、こんな感じになります。（HoloLens 2 実機にデプロイ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f0e4f456-8d22-b7a2-5192-8024cf9f0857.png)

MRTK v2 を入れたら出て来るパフォーマンスバーが出ていますね。

## 3. ユーザー インターフェイスの作成と MRTK の構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0f4e7d7e-4315-efec-6309-d1c8dca85528.png)

第三章は【MRTK を使用した UI 作成】です。

* MRTK プロファイルを編集する
    - (MRTK プロファイルを編集するためには、まず複製をして編集する必要がある、など)
* ハンドトラッキング付ける
* インタラクティブなボタン付ける

第二章を終えたら、こんな感じになります。（HoloLens 2 実機にデプロイ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/5817c45e-0faf-c78b-7183-df2f275070e1.png)

MRTK の機能の一部のボタンが出ますね

## 4. 動的なコンテンツの配置とソルバーの使用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f988cca9-0e28-d3f9-500d-83a8a2f109bd.png)

第四章では、オブジェクトをユーザの手（など）に追従させる方法や、動的にコンテンツを配置する方法を学びます。
そのために、MRTK の Solver を触って学びます。

## 5. 3D オブジェクトの操作

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/cd3cd654-eb84-d11d-91d4-1c058806491e.png)

## 6. 高度な入力オプションの探索

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ac51de8e-587c-5443-645e-e21c6c738784.png)

第六章では、音声コマンドやアイトラッキングでの入力の仕方を学びます。

## 7. 月面着陸サンプルアプリの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/cb2b9e24-610e-eb43-256a-3d1689e8adea.png)

## 公式チュートリアルぜひ見てみてね！

HoloLens 2 公式チュートリアル ([https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)) ぜひ見てみてね！

↓ このように、「Unity で新規作成」からスクショ付きで丁寧に進められます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/419dbde8-6b1d-2dd5-aea9-a4c05771fa2d.png)

# リファレンス

* HoloLens 2 公式チュートリアル (全 7 章)
    - [https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1](https://docs.microsoft.com/ja-jp/windows/mixed-reality/mrlearning-base-ch1?WT.mc_id=docs-blog-machiy)
* この記事のスライド『HoloLens 2 開発入門 (公式チュートリアルの紹介) + 製品フィードバックが欲しい話』
    - https://www.slideshare.net/chomado/hololens-2-231460487
* MRTK GitHub レポジトリ
    - https://github.com/microsoft/MixedRealityToolkit-Unity
* MRTK 公式ドキュメント
    - https://microsoft.github.io/MixedRealityToolkit-Unity/
    - 日本語版 (ホロラボ社のリポジトリ)：https://hololabinc.github.io/MixedRealityToolkit-Unity/Documentation.ja/GettingStartedWithTheMRTK.html
* MRTK の有用なビルディングブロック (Yoon さん著)
    - https://medium.com/@dongyoonpark/mixed-reality-toolkit-mrtk-の有用なビルディングブロック
* MRTK v2を使ってUnityEditor内でのシミュレーション機能を操作する (モンさん著)
    - http://bluebirdofoz.hatenablog.com/entry/2019/11/08/123324

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/6a16022a-f432-eac9-9d72-d8bb8b9e4968.png)