#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 アプリ開発入門
(2020/08/31 時点)
Microsoft
Cloud Developer Advocate
千代田まどか（ちょまど）

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
講演中の参加者ツイート、ありがとうございました！

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
講演中の参加者ツイート、ありがとうございました！

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
講演中の参加者ツイート、ありがとうございました！

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
講演中の参加者ツイート、ありがとうございました！

自己紹介
千代田まどか（ちょまど）
• C# が好きで 現在 Microsoft 社員
• 休日はゲーム廃人 (15 時間 /日)
• Twitter: @chomado
• IT エンジニア兼マンガ家

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

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
描いた絵

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
Twitter やっています！
• Twitter @chomado
• フォロワー 7.8 万人

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

次世代コンピューティング プラットフォーム
いつでも・どこでも手軽に
使えるコンピューティング
プラットフォーム
スマートデバイス
仕事･勉強･生活に活用できる
高度なコンピューティング
プラットフォーム
パーソナル
コンピューター
現実世界とデジタル世界の
融合で得られる
新しいコンピューティング
プラットフォーム
Mixed Reality

AUGMENTED REALITY (AR)
デジタル世界物理世界
VIRTUAL REALITY (VR)
MIXED REALITY (MR)
MIXED REALITY とは？
物理世界とデジタル世界を融合し、ユーザーは物理世界に存在しながら、
物理・デジタル両方のオブジェクトとやり取りができる世界。

HoloLens 2 はいいぞ

• 現実の世界をスキャン
• 映像や音(空間音響)を立体的に再現
• 直観的な操作を可能にする
• 入力：ハンドトラッキング、アイト
ラッキング、音声入力

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 デモ動画 YouTube:
https://youtu.be/PdRlng-yuWQ

快適性の向上
Comfort
没入感の向上
Immersion
価値創造時間の短縮
Time-to-Value
HoloLens 2 の進化

没入感の向上
Immersion
価値創造時間の短縮
Time-to-Value
快適性の向上
Comfort
HoloLens 2 の進化

快適性の向上
Comfort
価値創造時間の短縮
Time-to-Value
HoloLens 2 の進化
没入感の向上
Immersion

視野角
2X
視野角

両手・
10本指を認識
ハンドトラッキング

アイトラッキング

快適性の向上
Comfort
没入感の向上
Immersion
HoloLens 2 の進化
価値創造時間の短縮
Time-to-Value

すぐに活用できる
ビジネスアプリケーション
アプリケーション開発を加速する
サービスとSDK
価値創造時間の短縮 Time-to-Value

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
7 月頭に個人でもストアで買えるように (42 万円)
冷静になる前に
ポチるのがコツだよ！
(脊髄反射で買った人並みの感想)

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 購入報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 着弾報告 続々

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
購入者は武仙さんの謎のリストに入れられる

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
開封の儀 & ハードウェア解説動画 上げたよ
YouTube:
https://aka.ms/chomado-hl2-hardware

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens 2 開封の儀の動画 YouTube:
https://aka.ms/chomado-hl2-hardware

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
薫さん著書 『HoloLens 2入門』 お勧め
HoloLens 2の基本的な使い方や
ハードウェア解説、
セットアップの方法、
開発者モードとデバイスポータル、
Dynamics 365 アプリの
操作方法などが
写真付きで詳しく分かります
Kindle 版: https://www.amazon.co.jp/dp/B08C27XB9T/

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

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

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

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

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

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. おおまかな開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens の OS
Windows 10 Holographic
が載っている

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens で動くアプリケーション

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
HoloLens アプリの形態は大きくわけて2種類

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

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

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

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
3D アプリ

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

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

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

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

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

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

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

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
MRTK-Unity の詳しい話
本日 20:55 – 21:15
(ちょまど の 直後)

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
Unreal Engine を使った HL2 アプリ開発の話
本日 21:45 – 22:05

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
もくじ (20 分)
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
Microsoft Learn (無料のオンライン学習サービス)の
Mixed Reality モジュール
https://aka.ms/
mslearn-mrtk
同僚の April さんが作った
まどか、よかったら日本語訳
のレビューよろしくね

HoloLens 2 開発 公式チュートリアル

HoloLens 2 実機での動作

HoloLens 2 実機での動作

HoloLens 2 実機での動作

HoloLens 2 実機での動作
楽しそうなのは分かるが
HoloLens 2 実機持ってない
私には関係ない話かな・・・？
そんなことないゾ！

HoloLens 2 エミュレータもあります
https://docs.microsoft.com/ja-
jp/windows/mixed-reality/using-
the-hololens-emulator

Unity エディタ上での実行

Unity エディタ上での実行の便利記事
http://bluebirdofoz.h
atenablog.com/entry
/2019/11/08/123324
MRTK v2を使って
UnityEditor内でのシ
ミュレーション機能を操
作する

HoloLens 2 開発 公式チュートリアル (全 7 章)
http://aka.ms/HL2Tutorial

http://aka.ms/HL2Tutorial
【HoloLens 2 開発環境 確認】
• 各種開発環境の確認
• (MRTK 公式サイトでは Unity 2018.4.x で
したが、こちらのチュートリアルでは
2019.2.x が推奨されています。)
• (また、MRTK のバージョンは v2.2 が使用
されています)
HoloLens 2 開発 公式チュートリアル (全 7 章)

http://aka.ms/HL2Tutorial
【HoloLens 2 ハローワールド】
• HoloLens 2 開発用の Unity の
設定
• MRTK インポート＆ Unity 設定
• HoloLens 2 へのデプロイの仕方
HoloLens 2 開発 公式チュートリアル (全 7 章)

【MRTK を使用した UI 作成】
• MRTK プロファイルを編集する
• (MRTK プロファイルを編集するためには、まず
複製をして編集する必要がある、など)
• ハンドトラッキング付ける
• インタラクティブなボタン付ける
HoloLens 2 開発 公式チュートリアル (全 7 章)

http://aka.ms/HL2Tutorial
【オブジェクトをユーザの手 (など) に
追従させる】
• MRTK の Solver の紹介
• Solver を使ってユーザにボタンコレ
クションを追従させる
HoloLens 2 開発 公式チュートリアル (全 7 章)

HoloLens 2 開発 公式チュートリアル (全 7 章)
http://aka.ms/HL2Tutorial
【3D オブジェクトと UX 】
• バウンディングボックス (境界ボッ
クス) の実装
• 任意のオブジェクトを、移動や回
転、拡大縮小できるようにする
• 近距離操作、遠距離操作

http://aka.ms/HL2Tutorial
【高度な入力オプション】
• 音声コマンドでイベントをトリガー
• （「Play Music」というキーワードで ~~.mp3
を再生）
• アイトラッキングでオブジェクトを選
択する
HoloLens 2 開発 公式チュートリアル (全 7 章)

http://aka.ms/HL2Tutorial
【これまでのおさらい (アプリ作成)】
HoloLens 2 開発 公式チュートリアル (全 7 章)

http://aka.ms/HL2Tutorial
HoloLens 2 開発 公式チュートリアル (全 7 章)

HoloLens 2 公式チュートリアルはこちら！

HoloLens 2 公式チュートリアルはこちら！

英語原文版の HoloLens 2 公式チュートリアルはこちら！

#xRDCC #HoloLens
まとめ：今日はこれを話した
1. HoloLens 2 とは
1. 概要
2. ハードウェア紹介（各種センサーの位置など）
2. 日本で HoloLens 2 が個人で買えるように！
1. 買った人たちの紹介（Twitter での観測）
3. 作ったアプリ紹介
4. HoloLens 2 アプリ開発概要
1. 前提知識（Windows 10, UWP, 2D/3D)
2. 開発ツール紹介（Visual Studio, Unity, UE, MRTK)
3. 開発の流れ
5. 手を動かしてみよう！公式チュートリアル紹介
実機が無くても
開発できるよ！
ぜひやってみてね

#xRDCC #HoloMagicians#xRDCC #HoloMagicians
ありがとうございました！
• Twitter @chomado
ぜひ感想を
ツイートしてね！