Check! HoloLens x Azure Bot Service 連携を試そう！ by Mixed Reality Academy

こんにちは、 @dz_ こと大平かづみです。

Prologue - はじめに

Microsoft は、Mixed Reality を学習するコンテンツとして、 Mixed Reality Academy と銘打って多数のチュートリアルとサンプルコードを提供してくれています。

このうち、301 ～ 313 の項目は MR and Azure としてカテゴライズされており、HoloLens をはじめとした MR とクラウドの連携が今後視野に入ってくると予想されます。

これは、やってみるっきゃない！ということで、 HoloLens も C# も Visual Studio も初心者な私ですが、Azure とつなげてみたいのでこのチュートリアルと試してみることにしました！

• MR and Azure 312 - Bot integration - Mixed Reality | Microsoft Docs

結果としては、無事動きました！(ヾ(｡･ω･)ﾉ

一通りのことに触れられたので、ボリュームは多いですがやってみる価値ありです。

そこで、まだ英語のコンテンツしかないので、簡単な和訳もかねて作業時のメモを掲載します。元のドキュメントと照らし合わせて進めば、最後までできると思います。

ご興味ある方はぜひチャレンジしてみてくださいね！('ω')

References

• Install the tools - Mixed Reality | Microsoft Docs
• Unity development overview - Mixed Reality | Microsoft Docs

How it works

アプリを起動後、青いオブジェクトをタップすると、ボットが起動しユーザーからの音声入力を待機します。
ユーザーの発言を Bot Service に連携させ、その返信をテキストで表示します。

Preparation

開発PC

Unity 2017.4 のインストール

• LTS で推奨されている
• インストールするときは、デフォルトに加え、 Windows Store .NET Scripting Backend にチェックを入れる

Visual Studio 2017 のインストール

• Universal Windows Platform development を選択し、カスタマイズを開く
• Workloads タブで Game Development with Unity にチェックを入れる
  • Unity が既にインストールされている場合は、 Unity 2018.1 64-bit Editor のチェックを外す
• Workloads タブで ASP.NET and web development と Azure development にチェックを入れる

Developer mode の有効化

• 開発PCの Settings > Update & Security > For developers で Developer mode にチェックする

Hololens

• Set up HoloLens (HoloLens) | Microsoft Docs

Microsoft Azure

• 有効なAzureアカウント
  • お持ちでない場合は、 こちらから 22,500円のクレジットを含む12か月無料アカウントをご利用ください。
    • Azure の無料アカウントを今すぐ作成しましょう | Microsoft Azure

作業メモ（簡単な和訳）

以下、作業メモ、兼簡単な和訳です。チャプター番号はあっていますが、細かい連番は一部省略したりしていてあっていません。元のドキュメント対比しながら進めば問題ないかと思います。

1. Visual Studio で Bot Application (C#) を作成する

---

• Chapter 1 – Create the Bot application

1. 新規プロジェクトで、 .NET Core か cloud から、 ASP.NET Core Web Applicaton を選択して次へ進む。
2. ASP.NET Core 2.1 （ドキュメントでは 2.0 だが、 2.1 しかなかった）で Empty を選択し、 Authentication は、 No Authentication を指定して、プロジェクトを作成する。
3. Nuget パッケージの管理画面から、Browse タブで、 Include prerelease にチェックをつけ、 Microsoft.Bot.Builder.Integration.AspNet.Core をインストールする。
4. Solution Exproler のプロジェクトを右クリックし、メニューから Add | Class を実行し、 MyBot クラスを作成する。
5. 同様に、 ConversationContext クラスを作成する。
6. Sokution Explorer の wwwroot を右クリックして、Add | New Item をクリックする。ASP.NET Core > Web > Content から HTML Page を選択し、 default.html と名前を付け、 Add をクリックする。
7. ConversationContext クラスをダブルクリックして開き、ドキュメント 1-10 のように記述する。このクラスには、このボットが会話のコンテキストを管理するために使う変数を持たせる。
8. MyBot クラスを開き、ドキュメント 1-11 のように記述する。このクラスは、ユーザーのアクティビティを受信して呼ばれるハンドラをホストする。
9. Startup クラスを開き、ドキュメント 1-12 のように記述する。このクラスは、ボットの初期化を行う。
10. Program クラスを開き、ドキュメント 1-13 のようになっているか確認する。ただし、 ASP.NET Core 2.1 の場合は、 BuildWebHost から CreateWebHostBuilder に代わっているので、下記を参考に確認する。

• 参考) ASP.NET Core 2.1.0-rc1 now available | ASP.NET Blog

1. すべてのファイルの変更が保存されているか確認する。

2. Azureポータルで Azure Bot Service を準備する

---

• Chapter 2 - Create the Azure Bot Service

1. Azureポータルで、 Web App Bot を新規作成する。

2. さくせいできたら、 Channels の Add a featured channel で configure Direct Line channel をクリックする。

3. Secret keys が表示されるので、 Show をクリックして文字列を表示し、コピーしておく。

4. ボットを Azure Bot Service にデプロイする

---

• Chapter 3 – Publish the Bot to the Azure Web App Bot Service

1. Visual Studio に戻って、作成中のプロジェクトを開く。

2. Solution Explorer の MyBot プロジェクトを右クリックし、 Publish... をクリックする。

3. Pick a public target 画面で、 App Service をクリックし、 Select Existing を選択する。右下の Create の下向き矢印から Create Profile を選択する。

4. Add an account... から Azureアカウントでログインする。

5. App Service 画面で、 Subscription を指定し、 下段のリソース一覧から作成した Bot Service を選択し、 OK をクリックする。

6. Publish ボタンをクリックし、デプロイする。（数分かかる）

7. Unity プロジェクトを準備する

---

• Chapter 4 – Set up the Unity project

1. Unity を開く。

2. Project name に任意のプロジェクト名を指定する。テンプレートは 3D のままで、必要に応じて Location や Enable Unity nalytics を指定し、 _Create project_ボタン をクリックする。

3. Unity が開いたら、 Edit > Preferences... から Unity Preferences を開き、 External Tools タブの External Script Editor が Visual Studio 2017 (Community) （またはお使いのエディション）に設定されていることを確認する。

4. File > Buid Settings... を開く。

   1. Universal Windows Platform を選択する。 Switch Platform ボタンをクリックして、反映する。
   2. Target Device に HoloLens を指定する。
   3. Build Type に D3D を指定する。
   4. SDK に Latest installed を指定する。
   5. Visual Studio Version に Latest installed を指定する。
   6. Build and Run に Local Machine を指定する。
   7. この scene を保存してビルドするために、 Add Open Scenes ボタンをクリックすると、Explorer が立ち上がるので、 Scenes という名前の新しいフォルダを作成する。 Scenes フォルダに移動し、 File name に BotScene を入力して保存する。

5. ひきつづき Build Settings 画面で、Player Settings ボタンをクリックすると、 Inspector にパネルが表示される。そこで、ドキュメント 4-7 を参考に設定する。

6. Build Settings 画面に戻ると、 Unity C# Prjects という項目が利用可能になっているので、チェックぼっくにチェックする。

7. Build Settings 画面を閉じる。

8. scene とプロジェクトを保存する。

9. Unity プロジェクトでカメラを準備する

• Chapter 5 – Camera setup

1. Hierarchy panel パネルで、 Main Camera を選択する。

2. Inspector パネルに Main Camera のコンポーネント群が表示される。下記を確認、指定する。

   1. Camera object （名前？）が Main Camera であることを確認する。（空白や大文字などのスペルに注意）
   2. Tag が MainCamera であることを確認する。（空白なしなどスペルに注意）
   3. Transform Position を 0, 0, 0 に指定する。
   4. Clear Flags に Solid Color を指定する。
   5. Background の色を Black(Hex Code: #000000), Alpha 0 に指定する。

3. Unity プロジェクトで、 Newtonsoft ライブラリをインポートする

---

• Chapter 6 – Import the Newtonsoft library

1. ドキュメント_Chapter 6_ の compatible version already organized with the correct Unity folder structure here から最適化された Newtonesoft ライブラリをダウンロードする。

2. Unity の Assets > Import Package > Custom Package... をクリックし、上記ライブラリパッケージを読み込む。

3. Import Unity Package 画面で、Plugins 配下の項目にすべ手チェックをつけ、 Import ボタンをクリックする。

4. Project パネルの Plugins > Newtonsot から Newtonsoft.Json.dll を選択する。Inspector パネルで、 Any Platform と WSAPlayer のチェックボックスにチェックがついていないことを確認する。

5. Project パネルの WSA フォルダを開き、以下を確認する。
   6. Any Platform のチェックボックスにチェックがついていないこと
   7. WSAPlayer にのみチェックがついていること
   8. Dont process にチェックがついていること

6. Unity プロジェクトで BotTag を作成する

---

• Chapter 7 – Create the BotTag

1. Hierarchy パネルの BotScene > Main Camera を選択し、 Inspector の Tag プルダウンから Add Tag... をクリックする。

2. + 記号をクリックし、 New Tag Name に BotTag と入力して Save ボタンをクリックする。（ Main Camera には適用しないこと。）

3. Unity プロジェクトで、 BotObjects クラスを作成する

---

• Chapter 8 – Create the BotObjects class

1. Project パネルで、 Assets フォルダを選択した後、 Create > Folder をクリックし、 Scripts フォルダを作成する。

2. Scripts フォルダをダブルクリックして開き、右クリックして Create > C# Script をクリックし、 BotObjects というスクリプトを作成する。

3. BotObjects スクリプトをダブルクリックがすると、 Visual Studio が開く。Windows Security Alert が表示された場合は、よく確認し Allow access をクリックする。

4. ドキュメント 8-4 に従いスクリプトを記述し、保存する。

5. Unity プロジェクトで、 GazeInput クラスを作成する

---

• Chapter 9 – Create the GazeInput class

ゲイズ（HoloLens 内で視線により動くカーソルを一点に固定し注目する動作）をコントロールするクラスを作成する。

1. さきほど作成した Scripts フォルダの配下で右クリックし、 Create > C# Script で GazeInput スクリプトを作成する。

2. GazeInput スクリプトをダブルクリックし手開き、ドキュメント 9-4 ~ 8 に従い記述し保存する。

3. Unity プロジェクトで Bot クラスを作成する

• Chapter 10 – Create the Bot class

Bot Service と連携するコアとなるクラス。

1. Scripts フォルダに Bot スクリプト（C# Script）を作成する。
   1.Bot スクリプトを ダブルクリックして開き、ドキュメント 10-4 ~ 12 に従い記述し、保存する。

• botSecret には、前述でコピーしておいた Secret key の文字列を指定する。

1. Unity プロジェクトで Interactions クラスを作成する

---

• Chapter 11 – Create the Interactions class

HoloLens 内でのタップを検出するクラス。

1. Scripts フォルダ内に Interactions スクリプトを作成する。（C# Script）

2. Interactions を開き、ドキュメント 11-4 ~ 7 に従って記述し、保存する。

3. Unityプロジェクトで SceneOrganiser クラスを作成する

---

• Chapter 12 – Create the SceneOrganiser class

1. Scripts フォルダはいかに SceneOrganiser スクリプトを作成し、開く。

2. ドキュメント 12-4 ~ 7 に従い記述し、保存する。

3. SceneOrganiser` を Hierarchy の Main Camera にドラッグ＆ドロップする。 Inspetor パネルの Main Camera のコンポーネントとして、 _Scene organiser (Script) _ が表示されていることを確認する。

4. Unity プロジェクトを確認する

---

• Chapter 13 – Before building

1. ビルドする

---

• Chapter 14 – Build and Sideload to the HoloLens

1. File から _Build Settings_を開く。

2. Build ボタンをクリックする。

3. 保存先を指定するため、 Explorer が開き、プロジェクトフォルダが表示される。 App フォルダを作成し、選択した状態で Select folder ボタンをクリックする。

4. HoloLens にデプロイする

---

• Chapter 15 – Deploy to HoloLens

1. HoloLens とリモートデプロイをするため、以下を行う。なお、開発PCと同じ WiFi に接続されているものとする。

   1. HoloLens で、 Settings を開く。
   2. Network & Internelt > Wi-Fi > Hardware roperties を開く。
   3. IPv4 address を確認する。
   4. つぎに、 Settings > Update & Security_ > For Developers を開き、On に設定する。

2. Visual Studio で、先ほどビルドした Unity プロジェクトのソリューションファイルを開く。（ App フォルダ配下の .sln ファイル）

3. Solution Configuration は、 Debug を指定する。

4. Solution Platform は、 x86, Remote Machine を指定する。すると、 Remote Connections ウィンドウが開き、自動検出が開始される。 Auto Detected に該当する HoloLens が表示された場合はそれを選択する。検出されない場合は、先ほど確認したIPアドレスを指定する。

5. Build メニューから、 Deploy Solution をクリックする。

6. PIN の入力を要求された場合は、 HoloLens の_Settings_ > For developers > Pair ボタンをクリックすると、PIN番号が表示されるので、それを入力する。

7. HoloLens Bot アプリを触ってみる

---

• Chapter 16 – Using the application on the HoloLens

1. デプロイが完了したら、HoloLenのメニューからアプリを開く。
2. 開いたウィンドウをタップすると起動する。
3. Listening... になる際に、マイクの利用可否の確認ウィンドウが出るので、許可する。

動いたー！！！(ヾ(｡･ω･)ﾉ

Epilogue - おわりに

途中でアプリの調子が悪くなった場合は、ブルームすると空のウィンドウが表示されるので閉じることができます。

また、 Deploy Solution ではなく、デバッグを開始するとそのままデバッグできるので何か不備がある場合はお試しください。

Tips

• Visual Studio でコメントアウトするショートカットは、 Ctrl + K, Ctrl + C 。コメント解除は Ctrl + K, Ctrl + U 。
• Visual Studio のインテリジェンスは優秀！

以上です！楽しかった！いろいろカスタマイズしたりして、覚えていきたいです。