【 HoloLens 2 】MRTKExamplesHub を使って様々なUXコンポーネントを試してみる！

# はじめに
2020年5月26日、__「MRTKExamplesHub」__ の Microsoft Store での提供が開始となりました！:clap:

__「MRTKExamplesHub」__ は元々、GitHub上で公開されているMRTKの一部 ( MRTKに含まれているサンプルシーンを一度に試せる検証用アプリ ) として位置づけられており、GitHub からアプリケーションファイルをクローンし、端末にインストールすることで使用することができました。( 当時の内容については、[こちらの記事](https://medium.com/@kdlhorio/mrtk-examples-hub-%E3%82%92%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F-hololens-2-dc45d727e1c)をご覧ください。 )

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/476d863d-b42a-2ccd-5e82-01759aec5f1d.png)
> __[MRTK Examples Hub](https://www.microsoft.com/en-us/p/mrtk-examples-hub/9mv8c39l2sj4?activetab=pivot:overviewtab) より画像引用__

今回のアップデートでは、誰でも気軽に Microsoft Store からインストールできるようになったので、非エンジニアの方でも手軽にMRTKのサンプルシーンを試せるようになったのではないかと思います。個人的には、来月7月に予定されている一般消費者向けの Microsoft HoloLens 2 の発売も開始 ( Microsoft Build 2020 で発表 ) に向けたリリースだと推測しています。という訳で、今回は一足先に「MRTKExamplesHub」のインストール手順、試せるサンプルシーンの内容についてご紹介したいと思います。

# MRTK とは!?
そもそも MRTK ( Mixed Reality Toolkit for Unity ) とはという方に向けて、簡単にMRTKのご紹介をしたいと思います。

<img src="https://img.esa.io/uploads/production/attachments/3505/2020/06/11/10862/edc55847-96d3-4149-856a-7ede208bbda4.png" width="600">

MRTK とは、米・Microsoft 社が主導するオープンソースプロジェクトの1つです。
このプロジェクトでは、クロスプラットフォーム向けのMRアプリケーション開発を加速させるUXコンポーネントや各種機能、そしてMRアプリケーション開発に役立つツール群などが提供されています。また、HoloLens や Windows Mixed Reality ヘッドセット、そして OpenVR ヘッドセット ( HTC Vive / Oculus Rift ) など、MS以外のxRプラットフォームにも対応しており、誰もが手軽にプロトタイプを行える Building Block ( UXコンポーネントやスクリプト ) など様々な機能を試すことができます。

__MRTKExamplesHubとは、このMRTKに含まれているUXコンポーネントや機能を手軽に、より実践的なカタチで試すために作られた複数のサンプルシーンをまとめたアプリケーションとなります。__

# Microsoft Store 版 MRTKExampleHub で試せること

__MRTKExamplesHub では、MRTKに含まれている14種類のサンプルシーンを試すことができます。__
ずらっとリストにして並べてみましたが、数が多いですね。これだけだとどんな内容が試せるのか分かりづらいので、1つずつ動画を撮影してみました。初めて HoloLens 2 を試される方のご参考になれば幸いです。

1. __[Hand Interaction Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#1-hand-interaction-examples)__
2. __[Clipping Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#2-clipping-examples)__
3. __[Tooltip Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#3-tooltip-examples)__
4. __[MRTK Standard Shader Gallery](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#4-mrtk-standard-shader-gallery)__
5. __[Bounding Box Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#5-bounding-box-examples)__
6. __[Button Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#6-button-examples)__
7. __[Hand Menu Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#7-hand-menu-examples)__
8. __[Near Menu Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#8-near-menu-examples)__
9. __[Slate Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#9-slate-examples)__
10. __[Slider Examples](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#10-slider-examples)__
11.  __[Eye Tracking Target Selection](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#11--eye-tracking-target-selection)__
12. __[Eye Tracking Navigation](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#12-eye-tracking-navigation)__
13. __[Eye Tracking Target Positioning](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#13-eye-tracking-target-positioning)__
14. __[Eye Tracking Heat Map](https://qiita.com/Futo_Horio/items/3c8314b7e6851eeeb2a1#14-eye-tracking-heat-map)__

Twitter で1つずつ動画を挙げて紹介したので、Qiita ではそれらをまとめたいと思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MRTK Examples Hub <br>Microsoft Store 版が公開されたので、<br>復習も兼ねてサンプルシーンを<br>1つずつ解説したいと思います🎉<br><br>このアプリではMRTKに含まれている<br>14種類のサンプルシーンを<br>手軽に試すことができます！<br><br>Microsoft ストア (URL)<a href="https://t.co/o9yussCTcl">https://t.co/o9yussCTcl</a> <a href="https://t.co/AkN49ir8wo">pic.twitter.com/AkN49ir8wo</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271047778550968320?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 1. __Hand Interaction Examples__

<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-theme="light"><p lang="ja" dir="ltr">1.Hand Interaction Examples<br><br>MRTK内で提供されている<br>さまざまなハンドインタラクション<br>ピアノやスライダー、キーボード etc..<br>を一気に試すことができます。<br><br>HoloLens 2 を手に入れたら、<br>真っ先に試したいシーンの１つ😎<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/yonkTKbPse">pic.twitter.com/yonkTKbPse</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271054636632301571?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 2. __Clipping Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">2.Clipping Examples<br><br>Clipping Shader を使って、<br>CGオブジェクトを輪切りにし、<br>内部構造を確認できるサンプル<br><br>サンプルでは臓器(心臓)の内部を<br>確認することができます！<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/Tzg3OE5sRP">pic.twitter.com/Tzg3OE5sRP</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271057232533176320?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 3. __Tooltip Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">3.Tooltip Examples<br><br>Tooltip はオブジェクトに対して<br>補足説明をする際に使える<br>UXコンポーネント<br><br>表示のタイミングやユーザー追従など、<br>細かなカスタマイズが可能！<br><br>(背景が青色の説明部分)<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/jfPgwVsTIj">pic.twitter.com/jfPgwVsTIj</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271059195387764736?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 4. __MRTK Standard Shader Gallery__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">4.MRTK Standard Shader Gallery<br><br>MRデバイス向けに最適化(軽量化)<br>されたシェーダー(描画スクリプト)<br>を試せるサンプルシーン<br><br>→ 公式ドキュメント(GitHub)<a href="https://t.co/tAyX6XnBUA">https://t.co/tAyX6XnBUA</a><a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/QZrU1jaFeC">pic.twitter.com/QZrU1jaFeC</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271062226560929794?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 5. __Bounding Box Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">5.Bouding Box Examples<br><br>オブジェクトとの境界面を表す<br>Bounding Box (7種類)<br><br>回転軸の固定、境界面の種類、<br>アクティベーションのトリガーなど、<br>用途に応じた使い分けが必要。<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/32CRC3gHFW">pic.twitter.com/32CRC3gHFW</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271064627695083522?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 6. __Button Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">6.Button Examples<br><br>MRTKに含まれている<br>Button Prefab たち<br><br>MRTK v2.4 で追加された<br>Radio/Switch/Checkbox も<br>試すことができます！<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/wKoiFRhWvf">pic.twitter.com/wKoiFRhWvf</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271067091546763265?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 7. __Hand Menu Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">7.Hand Menu Examples<br><br>手を裏返すとメニューを表示<br><br>MRTK v2.4 アップデート<br>・Gaze Activation <br>　視線が手を向いてる時のみ有効化<br>・新しいハンドメニュー2種類<br>　(1) つまみ操作で固定<br>　(2) 手を下げた場所で固定<br>追加されていました🎉<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/g3Di1SZvyY">pic.twitter.com/g3Di1SZvyY</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271072515243180036?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 8. __Near Menu Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">8.Near Menu Examples<br><br>近距離向けのメニュープレハブ<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/MkEznLVpNk">pic.twitter.com/MkEznLVpNk</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271073808477118464?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 9. __Slate Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">9.Slate Examples<br><br>2D画面のスクロール設定を<br>検証できるサンプルシーン<br><br>拡大やスクロール時の軸を<br>固定することもできる。<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a> <a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/Sh2LgO3pwj">pic.twitter.com/Sh2LgO3pwj</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271074942168096770?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 10. __Slider Examples__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">10.Slider Examples<br><br>スライダー活用サンプル2種類<br>(1) RGB変更<br>(2) オブジェクト状態遷移<br><br>操作した時の音が気持ち良い✨<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a> <a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/XX670BO0sC">pic.twitter.com/XX670BO0sC</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271076113238724609?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 11.  __Eye Tracking Target Selection__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">11.Eye Tracking Target Selection<br><br>アイトラッキングでオブジェクト選択<br>Eye Gaze != Head Gaze<br><br>使用場面によっては、誤操作や<br>ユーザー負荷が高まるので注意！<br><br>→ ガイドライン📄<a href="https://t.co/kWH7bk8jbl">https://t.co/kWH7bk8jbl</a><a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/XgPYWOq3c8">pic.twitter.com/XgPYWOq3c8</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271080836951994368?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 12. __Eye Tracking Navigation__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">12.Eye Tracking Navigation<br><br>アイトラッキングを使って<br>オブジェクトを操作するサンプル<br><br>(1)CGオブジェクトの回転、選択<br>(2)2Dコンテンツのスクロール etc..<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/2r2N1ZQwL3">pic.twitter.com/2r2N1ZQwL3</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271083245765967872?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 13. __Eye Tracking Target Positioning__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">13.Eye Tracking Target Positioning<br><br>オブジェクトへのポインター移動、<br>選択後のオブジェクト位置を<br>アイトラッキングで操作可能！<br><br>頭で分かっていても<br>ついつい手を動かしてしまう...<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a> <a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/YfTk60QWEM">pic.twitter.com/YfTk60QWEM</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271084541466177543?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 14. __Eye Tracking Heat Map__

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">14.Eye Tracking Heat Map<br><br>アイトラッキングデータを<br>ヒートマップとして可視化できる🎉<br><br>(1)リアルタイムでの可視化<br>(2)リプレイでの可視化<br><br>リプレイ機能凄い！<br>デジタルツイン実現できそう✨<a href="https://twitter.com/hashtag/MRTK?src=hash&amp;ref_src=twsrc%5Etfw">#MRTK</a> <a href="https://twitter.com/hashtag/HoloLens2?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens2</a><a href="https://twitter.com/hashtag/MRTKExamplesHub?src=hash&amp;ref_src=twsrc%5Etfw">#MRTKExamplesHub</a> <a href="https://t.co/QAtXUvj4jW">pic.twitter.com/QAtXUvj4jW</a></p>&mdash; Futo Horio (@Futo_Horio) <a href="https://twitter.com/Futo_Horio/status/1271086460733517824?ref_src=twsrc%5Etfw">June 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# MRTKExamplesHub インストール方法について
<br/>

#### 1. HoloLens 上で ホームメニュー を開き、Microsoft Store アプリを起動します。

<img width="600" src="https://img.esa.io/uploads/production/attachments/3505/2020/06/11/10862/61e99379-3cc1-4b4b-9fec-e1563f9a0ddd.png">

<br/>

#### 2. 検索バーに「MRTK」と入力し、サジェストの「MRTK Example Hub」を選択します。

<img width="600"  src="https://img.esa.io/uploads/production/attachments/3505/2020/06/11/10862/2c2ae694-cb86-4c23-ae6b-62ed912de6e4.png">

<br/>

#### 3. 「MRTK Examples Hub」ページへ移動したら、「入手」ボタンを押下します。

<img width="600" src="https://img.esa.io/uploads/production/attachments/3505/2020/06/11/10862/eea57d15-e5ed-44e7-8612-15cb67d49e50.png">

これでインストールが開始するので、処理を行っている間少し待ちましょう。

<br/>

#### 4. アプリのインストールが完了すると、「起動」ボタンが表示されます。

<img width="600"  src="https://img.esa.io/uploads/production/attachments/3505/2020/06/11/10862/15846313-f7ae-4e37-aada-5114f05a63a2.png">

以上にて、アプリケーションのインストール作業は完了です。
Windows 10 PC と同じ手順なので、分かりやすいですね！


# 最後に
Microsoft HoloLens 2 を手にされた方のお役に少しでも立てれば幸いです。2017年頃に HoloLens の開発を始めた当初は、他の方の開発メモや技術ブログに救われたので、これから Microsoft HoloLens 2 の開発や運用を考えられている方のお役に立てれば幸いです。質問等あれば、お気軽にコメントください。最後までお読みいただき、ありがとうございました。