MR and Azure 312 : ボット

こんにちは、ナレコム菅井です。

今回はMR and Azure312のアプリを作っていきます。

開発環境は以下のとおりです。
・Windows 10 Home
・Unity 2017.4.11f1
・Visual Studio Community 2017 version 15.9.7
・HoloLens

目標はHoloLensを介してボットと通信するアプリを実装していきます。それではさっそく始めていきましょう!

1.ボットアプリケーションの作成

ここではボットをASP.Net Core Webアプリとして作っていきます。

1. Visual Studioを開き、[新しいプロジェクトの作成]をクリックします。

2.[ASP.NET Core Web アプリケーション]を選択し、名前をMyBotとして[OK]を押します。もし、[ASP.NET Core Web アプリケーション]がない場合は、Visual Studio Installerから該当する項目を追加します。

3.新たな画面にとんだら[Empty]を選択し、ターゲットが[ASP.NET Core 2.0]に、[認証なし]になっていることを確認して[OK]を押します。

4.ソリューションが開きますので、[ソリューション]を右クリックし[ソリューションのNuGetパッケージの管理]を選択します。

5.[参照]からMicrosoft.Bot.Builder.Integration.AspNet.Coreを検索し、[プロジェクト]にチェックをいれ(自動的にMyBotにもチェックが入り)、インストールします。バージョンは4.0.1-previewを選びます。他のバージョンだと後の工程でエラーが発生する可能性があります。

6.続いてMyBot(先ほど決めた名前)の上で右クリックし、[追加]->[クラス]を選択します。

7. [ASP.NET Core]->[コード]から[クラス]を選択し、名前をMyBot.csとして[追加]します。同様にしてConversationContext.csというクラスも作ります。

8.[MyBot]->[wwwroot]を右クリックして[追加]->[新しい項目]をクリックします。

9.[HTMLページ]を選択して名前をdefault.htmlとして[追加]します。

10.続いて、先程追加したC#のスクリプトを編集していきます。まず、ConversationContext.csに以下のように変更します。

 

11.次にMyBotクラスを編集してきます。コードは以下のとおりです。

12.最後にStartup.csを変更します。このクラスはボットの初期化をします。

 

13.Program.csを開き以下のコードと同じであるかを確認します。

準備の第一段階は終了です。

2.Azure Botサービスを作成する

Azure でBotサービスのインスタンスを作っていきます。

1. Azure Portalにログインします。

2.[リソースの作成]からWeb App Botで検索して、該当項目を選択し、[作成]します。

2. Webアプリボットに関する情報を入力していきます。下と全て同じでなくても大丈夫です。入力し終えたら
[作成]します。これでサービスのデプロイが始まります。

3. お知らせアイコンをクリックし、デプロイが終了して[リソースに移動]が表示されたら選択します。

4. 作成したボットアプリが開きます。[チャンネル]を開き[おすすめチャンネルの追加]から下の図の左から二番目のアイコンを選択します。

5. のちほど使うキーを保存します。XXXによって隠されているので、[表示]で表示し、コピーしておきます。

3.アプリの発行

1. Visual Studioで一番最初に作成したMyBotに戻ります。

2.[MyBot]を右クリックし、[発行]をクリックします。

3.[発行先を選択]の画面から[App Service]を選び[既存のものを選択]にチェックを入れ、[発行]をクリックします。

4.[サブスクリプション]、[表示]ともにさきほどAzure Portalで作成したときのものにして、フォルダ構造から先ほどのアプリを選択し、[OK]をクリックします。これでアプリが公開されました。

4.Unityの設定

続いてUnityの設定を行っていきたいと思います。以下の手順で進めていきましょう。

1.Unityを開き、[New]から新しいプロジェクトをつくります。
名前をMR_360VideoStreamingとして、[Create project]をクリックします。

2. [Build Settings..]からさまざまな項目を編集していきます。
[File]->[Build Settings..]を開きます。

a.プラットフォームの変更します
[PC, Mac & Linux Standalone]を[Universal Windows Platform]に変更し、[Switch Platform]をクリックします

b.[Player Settings..]を編集します。
[Player Settings..]をクリックします。

c.そのあと[Other Settings]、[Publishing Settings]->[Capabilities]、[XR Settings]を以下のように設定してきます。

[Build Settings..]の変更は以上です。続いて、[Unity C#]にチェックを入れます。

3.続いてシーンに名前をつけます。[Add Open Scene]をクリックし、新しいフォルダーをScenesとしてつくり、そこに名前をBotSceneとして[保存]します。フォルダーをシーンやスクリプトにわけて作ることでわかりやすくなります。

4.メインカメラの設定を行っていきます。[Hierarchy]->[Main Camera]を選択し、[Inspector]から[Transform]、[Camera]->[Clear Flags]、[Camera]->[Background]を変更します。

5.タグを追加します。メインカメラを選択したまま、[Inspector]->[Tag]から[Add Tag]を選択し、[BotTag]を追加します。このとき、メインカメラのタグにしないように注意してください。ただタグを追加するだけです。

6. Newtonsoftライブラリのインポートをします。まずNewtonsoftライブラリをダウンロードします[Assets]->[Import Package]->[Custom Package]を選び、ダウンロードしたNewtonsoftをフォルダの中から探し選択し、[Import]をクリックします。

7.Newtonsoftの中身を変更していきます。まず、さきほど追加した[Plugins]->[Newtonsoft.Json]を編集していきます。下の図のように変更し、[Apply]します。

8. 続いて、[Plugins]->[WSA]->[Newtonsoft.Json]も編集します。同じように以下の図になるように編集して[Apply]します。

5.スクリプトの作成

ここでは5つのスクリプトを作成していきたいと思います。
・BotObjects
・GazeInput
・Bot
・Interactions
・SceneOrganiser

スクリプトの作り方はまず、すべてのスクリプトをまとめておくフォルダーを作成します。[Project]->[Create]をクリックし、[Folder]を選択して新しいフォルダーを作ります。名前をScriptsとします。続いて[Project]->[Create]->[C# Script]をクリックし、クラス名をつけていきます。

・BotObjects
このクラスはアプリで出てくるオブジェクトを一通り格納しています。コードは以下のとおりです。

・GazeInput
このクラスはユーザーの視線をカーソルとして作成し、視線があたったオブジェクトを検出します。コードは以下の通りです。

・Bot
このクラスはWeb App Botの認証情報を取得したり、Web App Botとの会話に必要な操作を行ったりと重要な役割を担っています。コードは以下のとおりです。–Insert your key–に先ほど保存したキーを挿入します。

・Interactions
このクラスはユーザーのエアタップ動作を検出し、ボットの状態に合わせてUIテキストの表示の変更を行います。コードは以下のとおりです。

・SceneOrganiser
このクラスはメインカメラにコンポーネントとスクリプトの追加をして、シーン内に適切にオブジェクトを配置していきます。コードは以下のとおりです。

記述し終えたら、このスクリプトをMain CameraにD&Dします。

6.ビルド

[File]->[Build Settings..]->[Build]の順に選択します。新しいフォルダー(App)を作成し、このフォルダーを選択し、保存します。

この後の手順についてはこちらを参照してください。

HoloLensで実行した時の様子です。1章で記述したMyBot.csのWeather Botと接続できているのが確認できます。

さらにオブジェクトを見ながらエアタップすると聞き取りが始まることが確認できました。

以上となります。 お疲れ様でした。

 

この記事を書いた人

azure-recipe-user