注意

Mixed Reality Academy チュートリアルでは、HoloLens として設計された (第 1 世代) と混在の現実イマーシブ ヘッドセットに注意してください。The Mixed Reality Academy tutorials were designed with HoloLens (1st gen) and Mixed Reality Immersive Headsets in mind. そのため、これらのデバイス向けの開発にガイダンスがまだ必要な開発者のための場所でこれらのチュートリアルのままにすることが重要と思われます。As such, we feel it is important to leave these tutorials in place for developers who are still looking for guidance in developing for those devices. これらのチュートリアルは いない 最新のツールセットや相互作用が使用されている HoloLens 2 で更新されます。These tutorials will not be updated with the latest toolsets or interactions being used for HoloLens 2. サポートされているデバイスで作業を続行するが保持されます。They will be maintained to continue working on the supported devices. 一連の新しい HoloLens 2 を開発する方法を示すチュートリアルは、今後投稿があります。There will be a new series of tutorials that will be posted in the future that will demonstrate how to develop for HoloLens 2. この通知が投稿されるときにこれらのチュートリアルへのリンクが更新されます。This notice will be updated with a link to those tutorials when they are posted.

MR と Azure 311 - Microsoft GraphMR and Azure 311 - Microsoft Graph

このコースでは、場合、使用する方法について説明します。 Microsoft Graph複合現実のアプリケーション内でセキュリティで保護された認証を使用して、Microsoft アカウントにログインします。In this course, you will learn how to use Microsoft Graph to log in into your Microsoft account using secure authentication within a mixed reality application. 取得し、アプリケーションのインターフェイスで、スケジュールされた会議が表示されます。You will then retrieve and display your scheduled meetings in the application interface.

Microsoft Graphは多くの Microsoft のサービスにアクセスできるようにする Api のセットです。Microsoft Graph is a set of APIs designed to enable access to many of Microsoft's services. Microsoft は、これにより、あらゆる種類の接続しているユーザー データにアクセスするアプリケーションを意味する場合のリレーションシップによって接続されているリソースのマトリックスとして Microsoft Graph をについて説明します。Microsoft describes Microsoft Graph as being a matrix of resources connected by relationships, meaning it allows an application to access all sorts of connected user data. 詳細については、次を参照してください。、 Microsoft Graph ページします。For more information, visit the Microsoft Graph page.

開発を見つめますな球体では、Microsoft アカウントに安全にログインするユーザーを促しますの順にタップしてユーザーを指示は、アプリの作成が含まれます。Development will include the creation of an app where the user will be instructed to gaze at and then tap a sphere, which will prompt the user to log in safely to a Microsoft account. 自分のアカウントにログインすると、ユーザーは同じ日のスケジュールされた会議の一覧を表示することができます。Once logged in to their account, the user will be able to see a list of meetings scheduled for the day.

このコースを完了すると、複合現実は、次のことが、HoloLens のアプリケーションが用意されます。Having completed this course, you will have a mixed reality HoloLens application, which will be able to do the following:

  1. (移動にログインし、もう一度アプリにバックアップし、アプリ外) の Microsoft アカウントにログインするユーザーに通知するオブジェクトのタップ ジェスチャを使用して、タップします。Using the Tap gesture, tap on an object, which will prompt the user to log into a Microsoft Account (moving out of the app to log in, and then back into the app again).
  2. その日のスケジュールされた会議の一覧を表示します。View a list of meetings scheduled for the day.

アプリケーションでは、責任ですが、設計と、結果を統合する方法について。In your application, it is up to you as to how you will integrate the results with your design. このコースは、Unity プロジェクトで Azure サービスを統合する方法を説明する設計されています。This course is designed to teach you how to integrate an Azure Service with your Unity project. 複合現実アプリを強化するためには、このコース得た知識を使用することがあります。It is your job to use the knowledge you gain from this course to enhance your mixed reality application.

デバイスのサポートDevice support

コースCourse HoloLensHoloLens イマーシブ ヘッドセットImmersive headsets
MR と Azure 311:Microsoft GraphMR and Azure 311: Microsoft Graph ✔️✔️

前提条件Prerequisites

注意

このチュートリアルは、Unity を使用した基本的な経験がある開発者向けに設計およびC#します。This tutorial is designed for developers who have basic experience with Unity and C#. また、前提条件やこのドキュメント内の書面の手順を表すテストおよび (2018 年 7 月) の書き込み時に検証されたがどのようなことに注意してください。Please also be aware that the prerequisites and written instructions within this document represent what has been tested and verified at the time of writing (July 2018). 内に一覧表示するには自由に最新のソフトウェアを使用して、ツールをインストールするにする必要がありますが想定されていなかったことについては、このコースでとまったく同じで記載されているものよりも新しいソフトウェアで表示されますが、記事以下に。You are free to use the latest software, as listed within the install the tools article, though it should not be assumed that the information in this course will perfectly match what you will find in newer software than what is listed below.

次のハードウェアとソフトウェアこのコースをお勧めします。We recommend the following hardware and software for this course:

開始前の作業Before you start

  1. このプロジェクトのビルドの問題の発生を避けるため、強くお勧めのルートまたはルート近くフォルダーでこのチュートリアルで説明したようにプロジェクトを作成すること (長いフォルダー パスはビルド時に問題を発生できます)。To avoid encountering issues building this project, it is strongly suggested that you create the project mentioned in this tutorial in a root or near-root folder (long folder paths can cause issues at build-time).
  2. 設定して、HoloLens をテストします。Set up and test your HoloLens. 場合は、HoloLens の設定をサポートする必要があるHoloLens のセットアップ記事を参照してください。 確認します。If you need support setting up your HoloLens, make sure to visit the HoloLens setup article.
  3. (場合によって役立ちますユーザーごとにこれらのタスクを実行する) 新しい HoloLens アプリの開発を始めるときに、調整とセンサーのチューニングを実行することをお勧めします。It is a good idea to perform Calibration and Sensor Tuning when beginning developing a new HoloLens App (sometimes it can help to perform those tasks for each user).

調整に関するヘルプを参照するに従ってくださいこのHoloLens 調整記事へのリンクします。For help on Calibration, please follow this link to the HoloLens Calibration article.

センサーの調整に関する詳細についてに従ってくださいこのHoloLens センサー チューニング記事へのリンクします。For help on Sensor Tuning, please follow this link to the HoloLens Sensor Tuning article.

1 -」の章では、アプリケーション登録ポータルでアプリを作成します。Chapter 1 - Create your app in the Application Registration Portal

作成し、アプリケーションを登録する必要がありますはまず、アプリケーション登録ポータルします。To begin with, you will need to create and register your application in the Application Registration Portal.

この章に通話を行うことを許可するサービスのキーも検索がMicrosoft Graphアカウント コンテンツにアクセスします。In this Chapter you will also find the Service Key that will allow you to make calls to Microsoft Graph to access your account content.

  1. 移動し、 Microsoft アプリケーション登録ポータルMicrosoft アカウントを使用してログインします。Navigate to the Microsoft Application Registration Portal and login with your Microsoft Account. ログインしたら後に、リダイレクトされます、アプリケーション登録ポータルします。Once you have logged in, you will be redirected to the Application Registration Portal.

  2. アプリケーションセクションで、ボタンをクリックして、アプリの追加します。In the My applications section, click on the button Add an app.

    重要

    アプリケーション登録ポータル、以前に学習したかどうかに応じて異なるようMicrosoft Graphします。The Application Registration Portal can look different, depending on whether you have previously worked with Microsoft Graph. 以下のスクリーン ショットには、これらの異なるバージョンを表示します。The below screenshots display these different versions.

  3. クリックして、アプリケーションの名前を追加作成です。Add a name for your application and click Create.

  4. アプリケーションが作成されたら、アプリケーションのメイン ページにリダイレクトされます。Once the application has been created, you will be redirected to the application main page. コピー、アプリケーション Idを安全な場所にこの値をメモしておきますとは、コードですぐに使用されます。Copy the Application Id and make sure to note this value somewhere safe, you will use it soon in your code.

  5. プラットフォームセクションで、必ずネイティブ アプリケーションが表示されます。In the Platforms section, make sure Native Application is displayed. 場合いない をクリックしてプラットフォームの追加選択ネイティブ アプリケーションします。If not click on Add Platform and select Native Application.

  6. 下へスクロールし、同じページで」というセクションMicrosoft Graph のアクセス許可アプリケーションのアクセス許可を追加する必要があります。Scroll down in the same page and in the section called Microsoft Graph Permissions you will need to add additional permissions for the application. をクリックして追加横に委任されたアクセス許可します。Click on Add next to Delegated Permissions.

  7. アプリケーションへのユーザーの予定表にアクセスするためのチェックと呼ばれるボックスCalendars.Read をクリックOKします。Since you want your application to access the user's Calendar, check the box called Calendars.Read and click OK.

  8. 下部までスクロールし、保存ボタンをクリックします。Scroll to the bottom and click the Save button.

  9. 保存を確認してからログアウトしたことができます、アプリケーション登録ポータルします。Your save will be confirmed, and you can log out from the Application Registration Portal.

第 2 章 - Unity プロジェクトの設定Chapter 2 - Set up the Unity project

次のコード例が複合現実での開発の一般的な設定して、そのため、他のプロジェクトの適切なテンプレートには。The following is a typical set up for developing with mixed reality, and as such, is a good template for other projects.

  1. 開いているUnityクリック新規します。Open Unity and click New.

  2. Unity プロジェクトの名前を指定する必要があります。You need to provide a Unity project name. 挿入MSGraphMRします。Insert MSGraphMR. 必ず、プロジェクト テンプレートに設定されて3Dします。Make sure the project template is set to 3D. 設定、場所に該当する別の場所 (ただし、ルート ディレクトリに近づけるためのより良い)。Set the Location to somewhere appropriate for you (remember, closer to root directories is better). をクリックし、プロジェクトの作成です。Then, click Create project.

  3. 既定値を確認する必要が開いている Unity、スクリプト エディターに設定されているVisual Studioします。With Unity open, it is worth checking the default Script Editor is set to Visual Studio. 移動して編集 > 設定し、新しいウィンドウに移動外部ツールします。Go to Edit > Preferences and then from the new window, navigate to External Tools. 変更External Script EditorVisual Studio 2017します。Change External Script Editor to Visual Studio 2017. 閉じる、設定ウィンドウ。Close the Preferences window.

  4. 移動してファイル > Build Settingsを選択し、ユニバーサル Windows プラットフォーム、をクリックして、スイッチ プラットフォーム選択内容を適用するボタンをクリックします。Go to File > Build Settings and select Universal Windows Platform, then click on the Switch Platform button to apply your selection.

  5. ファイル > Build Settings、ことを確認します。While still in File > Build Settings, make sure that:

    1. デバイスを対象にに設定されているHoloLensTarget Device is set to HoloLens

    2. ビルドの種類に設定されているD3DBuild Type is set to D3D

    3. SDKに設定されているインストールされている最新SDK is set to Latest installed

    4. Visual Studio バージョンに設定されているインストールされている最新Visual Studio Version is set to Latest installed

    5. ビルドおよび実行に設定されているローカル マシンBuild and Run is set to Local Machine

    6. シーンを保存し、ビルドに追加します。Save the scene and add it to the build.

      1. これには、選択開くシーンを追加します。Do this by selecting Add Open Scenes. 保存ウィンドウが表示されます。A save window will appear.

      2. これと、任意の将来、シーンの新しいフォルダーを作成します。Create a new folder for this, and any future, scene. 選択、新しいフォルダーボタンは、新しいフォルダーを作成する名前を付けますシーンします。Select the New folder button, to create a new folder, name it Scenes.

      3. 新たに作成した開くシーンフォルダー、し、ファイル名: テキスト フィールドに「 MR_ComputerVisionScene、順にクリックします保存.Open your newly created Scenes folder, and then in the File name: text field, type MR_ComputerVisionScene, then click Save.

        重要

        注意してください、内の Unity シーンを保存する必要があります、資産フォルダー、Unity プロジェクトに関連付けられている必要があります。Be aware, you must save your Unity scenes within the Assets folder, as they must be associated with the Unity project. Unity プロジェクトの構造の一般的な方法は、シーン フォルダー (およびその他の同様のフォルダー) を作成します。Creating the scenes folder (and other similar folders) is a typical way of structuring a Unity project.

    7. 設定に残っているBuild Settings、ここでは既定値として残しておく必要があります。The remaining settings, in Build Settings, should be left as default for now.

  6. Build Settingsウィンドウのプレーヤー設定ボタン、領域に関連するパネルが開き、インスペクターが配置されています。In the Build Settings window, click on the Player Settings button, this will open the related panel in the space where the Inspector is located.

  7. このパネルは、いくつかの設定を確認する必要があります。In this panel, a few settings need to be verified:

    1. その他の設定 タブ。In the Other Settings tab:

      1. Scripting ランタイム バージョンする必要があります試験的(.NET 4.6 Equivalent)、エディターを再起動する必要があるします。Scripting Runtime Version should be Experimental (.NET 4.6 Equivalent), which will trigger a need to restart the Editor.

      2. バックエンドの scriptingべき .NETScripting Backend should be .NET

      3. API の互換性レベルべき .NET 4.6API Compatibility Level should be .NET 4.6

    2. 内で、発行の設定] タブの [機能、確認してください。Within the Publishing Settings tab, under Capabilities, check:

      • InternetClientInternetClient

    3. パネル、下の方にXR 設定(次に示します発行設定)、確認仮想現実サポート、ことを確認します、 Windows Mixed RealitySDKが追加されます。Further down the panel, in XR Settings (found below Publish Settings), check Virtual Reality Supported, make sure the Windows Mixed Reality SDK is added.

  8. 戻りBuild SettingsUnityC#プロジェクトが不要になったグレー; これの横にあるチェック ボックスをオンします。Back in Build Settings, Unity C# Projects is no longer greyed out; check the checkbox next to this.

  9. 閉じる、 Build Settingsウィンドウ。Close the Build Settings window.

  10. シーンとプロジェクトを保存 (ファイル > シーンの保存/ファイル > プロジェクトの保存)。Save your scene and project (FILE > SAVE SCENES / FILE > SAVE PROJECT).

第 3 章 - Unity でのインポート ライブラリChapter 3 - Import Libraries in Unity

重要

スキップする場合、 Unity を設定するコンポーネントのこのコースで、コードにまっすぐコンティニュし、自由にこれをダウンロード311.unitypackage MR-Azure の、としてプロジェクトにインポート、 カスタム パッケージから続けて第 5 章します。If you wish to skip the Unity Set up component of this course, and continue straight into code, feel free to download this Azure-MR-311.unitypackage, import it into your project as a Custom Package, and then continue from Chapter 5.

使用するMicrosoft Graphする必要がある Unity 内での使用、 Microsoft.Identity.Client DLL。To use Microsoft Graph within Unity you need to make use of the Microsoft.Identity.Client DLL. (つまり、プロジェクトのビルド後の編集) Unity プロジェクトをビルドした後に NuGet パッケージを追加する必要があるただし、Microsoft Graph の SDK を使用することです。It is possible to use the Microsoft Graph SDK, however, it will require the addition of a NuGet package after you build the Unity project (meaning editing the project post-build). 必要な Dll を Unity に直接インポートする方が簡単と見なされます。It is considered simpler to import the required DLLs directly into Unity.

注意

インポート後に再構成するプラグインを必要とする Unity での既知の問題は現在します。There is currently a known issue in Unity which requires plugins to be reconfigured after import. バグが解決された後、次の手順 (このセクションでは 4 ~ 7) は必要に不要になった。These steps (4 - 7 in this section) will no longer be required after the bug has been resolved.

インポートするMicrosoft Graph独自のプロジェクトにMSGraph_LabPlugins.zip ファイルをダウンロードします。To import Microsoft Graph into your own project, download the MSGraph_LabPlugins.zip file. テスト済みのライブラリのバージョンでは、このパッケージが用意されています。This package has been created with versions of the libraries that have been tested.

カスタム Dll を Unity プロジェクトに追加する方法を詳しく把握したい場合こちらのリンクします。If you wish to know more about how to add custom DLLs to your Unity project, follow this link.

パッケージをインポートします。To import the package:

  1. 使用して、Unity に Unity パッケージを追加、 資産 > パッケージのインポート > カスタム パッケージ メニュー オプション。Add the Unity Package to Unity by using the Assets > Import Package > Custom Package menu option. ダウンロードしたパッケージを選択します。Select the package you just downloaded.

  2. Unity パッケージのインポートその pop をボックスで、(およびなど)、すべてのことを確認プラグインが選択されています。In the Import Unity Package box that pops up, ensure everything under (and including) Plugins is selected.

  3. をクリックして、インポートをプロジェクトにアイテムを追加するボタンをクリックします。Click the Import button to add the items to your project.

  4. 移動して、 MSGraphの下のフォルダープラグインで、プロジェクト パネルというプラグインを選択します。 Microsoft.Identity.Clientします。Go to the MSGraph folder under Plugins in the Project Panel and select the plugin called Microsoft.Identity.Client.

  5. プラグインように選択すると、任意のプラットフォームが選択されていない、いることを確認し、 WSAPlayerもが選択されていないクリック適用.With the plugin selected, ensure that Any Platform is unchecked, then ensure that WSAPlayer is also unchecked, then click Apply. これは、ファイルが正しく構成されていることを確認するだけです。This is just to confirm that the files are configured correctly.

    注意

    これらのプラグインをマークする Unity エディターでのみ使用することを構成します。Marking these plugins configures them to only be used in the Unity Editor. WSA フォルダーにプロジェクトがユニバーサル Windows アプリケーションとして Unity からエクスポートされた後に使用される Dll のさまざまなセットがあります。There are a different set of DLLs in the WSA folder which will be used after the project is exported from Unity as a Universal Windows Application.

  6. 次を開く必要があります、 WSAフォルダー内で、 MSGraphフォルダー。Next, you need to open the WSA folder, within the MSGraph folder. 構成した同じファイルのコピーが表示されます。You will see a copy of the same file you just configured. ファイルを選択し、次に、インスペクター。Select the file, and then in the inspector:

    • いることを確認任意のプラットフォームunchecked、およびのみ WSAPlayerチェックensure that Any Platform is unchecked, and that only WSAPlayer is checked.

    • 確認SDKに設定されているUWP、およびScripting バックエンドに設定されているDot NetEnsure SDK is set to UWP, and Scripting Backend is set to Dot Net

    • いることを確認処理しないチェックします。Ensure that Don't process is checked.

  7. [適用] をクリックします。Click Apply.

第 4 章 - カメラのセットアップChapter 4 - Camera Setup

この章では、シーンのメイン カメラを設定します。During this Chapter you will set up the Main Camera of your scene:

  1. 階層パネルを選択、 Main Cameraします。In the Hierarchy Panel, select the Main Camera.

  2. すべてのコンポーネントを参照してください。 選択すると、ができる、 Main Cameraで、インスペクターパネル。Once selected, you will be able to see all the components of the Main Camera in the Inspector panel.

    1. Camera オブジェクト名前を指定する必要がありますMain Camera (スペルに注意してください)。The Camera object must be named Main Camera (note the spelling!)

    2. Main Cameraタグに設定する必要がありますMainCamera (スペルに注意してください)。The Main Camera Tag must be set to MainCamera (note the spelling!)

    3. 必ず、変換位置に設定されている0, 0, 0Make sure the Transform Position is set to 0, 0, 0

    4. 設定フラグをクリア純色Set Clear Flags to Solid Color

    5. 設定、背景色にカメラのコンポーネントの黒、アルファ 0 (コードを 16 進数: #00000000)Set the Background Color of the Camera Component to Black, Alpha 0 (Hex Code: #00000000)

  3. 最終的なオブジェクトの構造、階層パネル次の図に示すようになります。The final object structure in the Hierarchy Panel should be like the one shown in the image below:

第 5 章「MeetingsUI クラスを作成Chapter 5 - Create MeetingsUI class

最初のスクリプトを作成する必要があるはMeetingsUI、これはホストと (ウェルカム メッセージ、手順、および会議の詳細) のアプリケーションの UI の作成を担当します。The first script you need to create is MeetingsUI, which is responsible for hosting and populating the UI of the application (welcome message, instructions and the meetings details).

このクラスを作成します。To create this class:

  1. 右クリックし、資産フォルダーで、プロジェクト パネルを選択し、*作成 > *フォルダー**。Right-click on the Assets folder in the Project Panel, then select *Create > *Folder**. フォルダーの名前スクリプトします。Name the folder Scripts.

  2. 開く、スクリプトフォルダー、そのフォルダー内で右クリックし、*作成 > *C# スクリプト**。Open the Scripts folder then, within that folder, right-click, *Create > *C# Script**. スクリプトの名前MeetingsUI します。Name the script MeetingsUI.

  3. ダブルクリックして、新しいMeetingsUIスクリプト ファイルを開くVisual Studioします。Double-click on the new MeetingsUI script to open it with Visual Studio.

  4. 次の名前空間を挿入します。Insert the following namespaces:

    using System;
    using UnityEngine;
    
  5. クラス内には、次の変数を挿入します。Inside the class insert the following variables:

        /// <summary>
        /// Allows this class to behave like a singleton
        /// </summary>
        public static MeetingsUI Instance;
    
        /// <summary>
        /// The 3D text of the scene
        /// </summary>
        private TextMesh _meetingDisplayTextMesh;
    
  6. 置換し、 Start() メソッドを追加し、 Awake() メソッド。Then replace the Start() method and add an Awake() method. これらが、クラスの初期化時に呼び出されます。These will be called when the class initializes:

        /// <summary>
        /// Called on initialization
        /// </summary>
        void Awake()
        {
            Instance = this;
        }
    
        /// <summary>
        /// Called on initialization, after Awake
        /// </summary>
        void Start ()
        {
            // Creating the text mesh within the scene
            _meetingDisplayTextMesh = CreateMeetingsDisplay();
        }
    
  7. 作成を担当するメソッドを追加、会議 UIし、要求されたときに、現在の会議を設定します。Add the methods responsible for creating the Meetings UI and populate it with the current meetings when requested:

        /// <summary>
        /// Set the welcome message for the user
        /// </summary>
        internal void WelcomeUser(string userName)
        {
            if(!string.IsNullOrEmpty(userName))
            {
                _meetingDisplayTextMesh.text = $"Welcome {userName}";
            }
            else 
            {
                _meetingDisplayTextMesh.text = "Welcome";
            }
        }
    
        /// <summary>
        /// Set up the parameters for the UI text
        /// </summary>
        /// <returns>Returns the 3D text in the scene</returns>
        private TextMesh CreateMeetingsDisplay()
        {
            GameObject display = new GameObject();
            display.transform.localScale = new Vector3(0.03f, 0.03f, 0.03f);
            display.transform.position = new Vector3(-3.5f, 2f, 9f);
            TextMesh textMesh = display.AddComponent<TextMesh>();
            textMesh.anchor = TextAnchor.MiddleLeft;
            textMesh.alignment = TextAlignment.Left;
            textMesh.fontSize = 80;
            textMesh.text = "Welcome! \nPlease gaze at the button" +
                "\nand use the Tap Gesture to display your meetings";
    
            return textMesh;
        }
    
        /// <summary>
        /// Adds a new Meeting in the UI by chaining the existing UI text
        /// </summary>
        internal void AddMeeting(string subject, DateTime dateTime, string location)
        {
            string newText = $"\n{_meetingDisplayTextMesh.text}\n\n Meeting,\nSubject: {subject},\nToday at {dateTime},\nLocation: {location}";
    
            _meetingDisplayTextMesh.text = newText;
        }
    
  8. 削除Update() メソッドをおよび変更を保存Unity に戻る前に Visual Studio で。Delete the Update() method, and save your changes in Visual Studio before returning to Unity.

第 6 章 - Graph クラスを作成します。Chapter 6 - Create the Graph class

次のスクリプトを作成するには、グラフスクリプト。The next script to create is the Graph script. このスクリプトは、ユーザーを認証し、ユーザーの予定表から現在の日付のスケジュールされた会議を取得する呼び出しを行う責任を負います。This script is responsible for making the calls to authenticate the user and retrieve the scheduled meetings for the current day from the user's calendar.

このクラスを作成します。To create this class:

  1. ダブルクリックして、スクリプトフォルダーを開きます。Double-click on the Scripts folder, to open it.

  2. 内側を右クリックし、スクリプトフォルダー、をクリックして作成 > C#スクリプトRight-click inside the Scripts folder, click Create > C# Script. スクリプトの名前グラフします。Name the script Graph.

  3. Visual Studio で開くことをスクリプトをダブルクリックします。Double-click on the script to open it with Visual Studio.

  4. 次の名前空間を挿入します。Insert the following namespaces:

    using System.Collections.Generic;
    using UnityEngine;
    using Microsoft.Identity.Client;
    using System;
    using System.Threading.Tasks;
    
    #if !UNITY_EDITOR && UNITY_WSA
    using System.Net.Http;
    using System.Net.Http.Headers;
    using Windows.Storage;
    #endif
    

    重要

    このスクリプトでは、コードの部分にラップされることがわかりますプリコンパイル ディレクティブ、これは、Visual Studio のソリューションを構築するときに、ライブラリでの問題を回避するためにします。You will notice that parts of the code in this script are wrapped around Precompile Directives, this is to avoid issues with the libraries when building the Visual Studio Solution.

  5. 削除、 Start()Update() メソッドを使用できません。Delete the Start() and Update() methods, as they will not be used.

  6. 外側、グラフクラス、毎日のスケジュールされた会議を表す JSON オブジェクトを逆シリアル化するために必要な次のオブジェクトを挿入します。Outside the Graph class, insert the following objects, which are necessary to deserialize the JSON object representing the daily scheduled meetings:

    /// <summary>
    /// The object hosting the scheduled meetings
    /// </summary>
    [Serializable]
    public class Rootobject
    {
        public List<Value> value;
    }
    
    [Serializable]
    public class Value
    {
        public string subject { get; set; }
        public StartTime start { get; set; }
        public Location location { get; set; }
    }
    
    [Serializable]
    public class StartTime
    {
        public string dateTime;
    
        private DateTime? _startDateTime;
        public DateTime StartDateTime
        {
            get
            {
                if (_startDateTime != null)
                    return _startDateTime.Value;
                DateTime dt;
                DateTime.TryParse(dateTime, out dt);
                _startDateTime = dt;
                return _startDateTime.Value;
            }
        }
    }
    
    [Serializable]
    public class Location
    {
        public string displayName { get; set; }
    }
    
  7. 内で、グラフクラスで、次の変数を追加します。Inside the Graph class, add the following variables:

        /// <summary>
        /// Insert your Application Id here
        /// </summary>
        private string _appId = "-- Insert your Application Id here --";
    
        /// <summary>
        /// Application scopes, determine Microsoft Graph accessibility level to user account
        /// </summary>
        private IEnumerable<string> _scopes = new List<string>() { "User.Read", "Calendars.Read" };
    
        /// <summary>
        /// Microsoft Graph API, user reference
        /// </summary>
        private PublicClientApplication _client;
    
        /// <summary>
        /// Microsoft Graph API, authentication
        /// </summary>
        private AuthenticationResult _authResult;
    
    

    注意

    変更、 appId 値を アプリ Id で書き留めたが 第 1 章、手順 4. します。Change the appId value to be the App Id that you have noted in Chapter 1, step 4. この値で表示される内容と同じである、アプリケーション登録ポータルでは、 アプリケーション登録ページにします。This value should be the same as that displayed in the Application Registration Portal, in your application registration page.

  8. 内で、グラフクラス、メソッドを追加しますSignInAsync()AquireTokenAsync() ログインの資格情報を挿入するユーザーを促します。Within the Graph class, add the methods SignInAsync() and AquireTokenAsync(), that will prompt the user to insert the log-in credentials.

        /// <summary>
        /// Begin the Sign In process using Microsoft Graph Library
        /// </summary>
        internal async void SignInAsync()
        {
    #if !UNITY_EDITOR && UNITY_WSA
            // Set up Grap user settings, determine if needs auth
            ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;
            string userId = localSettings.Values["UserId"] as string;
            _client = new PublicClientApplication(_appId);
    
            // Attempt authentication
            _authResult = await AcquireTokenAsync(_client, _scopes, userId);
    
            // If authentication is successfull, retrieve the meetings
            if (!string.IsNullOrEmpty(_authResult.AccessToken))
            {
                // Once Auth as been completed, find the meetings for the day
                await ListMeetingsAsync(_authResult.AccessToken);
            }
    #endif
        }
    
        /// <summary>
        /// Attempt to retrieve the Access Token by either retrieving
        /// previously stored credentials or by prompting user to Login
        /// </summary>
        private async Task<AuthenticationResult> AcquireTokenAsync(
            IPublicClientApplication app, IEnumerable<string> scopes, string userId)
        {
            IUser user = !string.IsNullOrEmpty(userId) ? app.GetUser(userId) : null;
            string userName = user != null ? user.Name : "null";
    
            // Once the User name is found, display it as a welcome message
            MeetingsUI.Instance.WelcomeUser(userName);
    
            // Attempt to Log In the user with a pre-stored token. Only happens
            // in case the user Logged In with this app on this device previously
            try
            {
                _authResult = await app.AcquireTokenSilentAsync(scopes, user);
            }
            catch (MsalUiRequiredException)
            {
                // Pre-stored token not found, prompt the user to log-in 
                try
                {
                    _authResult = await app.AcquireTokenAsync(scopes);
                }
                catch (MsalException msalex)
                {
                    Debug.Log($"Error Acquiring Token: {msalex.Message}");
                    return _authResult;
                }
            }
    
            MeetingsUI.Instance.WelcomeUser(_authResult.User.Name);
    
    #if !UNITY_EDITOR && UNITY_WSA
            ApplicationData.Current.LocalSettings.Values["UserId"] = 
            _authResult.User.Identifier;
    #endif
            return _authResult;
        }
    
  9. 次の 2 つのメソッドを追加します。Add the following two methods:

    1. BuildTodayCalendarEndpoint() 日、スケジュールされた会議を取得する期間を指定する URI を構築します。BuildTodayCalendarEndpoint(), which builds the URI specifying the day, and time span, in which the scheduled meetings are retrieved.

    2. ListMeetingsAsync()、要求からスケジュールされた会議Microsoft Graphします。ListMeetingsAsync(), which requests the scheduled meetings from Microsoft Graph.

        /// <summary>
        /// Build the endpoint to retrieve the meetings for the current day.
        /// </summary>
        /// <returns>Returns the Calendar Endpoint</returns>
        public string BuildTodayCalendarEndpoint()
        {
            DateTime startOfTheDay = DateTime.Today.AddDays(0);
            DateTime endOfTheDay = DateTime.Today.AddDays(1);
            DateTime startOfTheDayUTC = startOfTheDay.ToUniversalTime();
            DateTime endOfTheDayUTC = endOfTheDay.ToUniversalTime();
    
            string todayDate = startOfTheDayUTC.ToString("o");
            string tomorrowDate = endOfTheDayUTC.ToString("o");
            string todayCalendarEndpoint = string.Format(
                "https://graph.microsoft.com/v1.0/me/calendarview?startdatetime={0}&enddatetime={1}",
                todayDate,
                tomorrowDate);
    
            return todayCalendarEndpoint;
        }
    
        /// <summary>
        /// Request all the scheduled meetings for the current day.
        /// </summary>
        private async Task ListMeetingsAsync(string accessToken)
        {
    #if !UNITY_EDITOR && UNITY_WSA
            var http = new HttpClient();
    
            http.DefaultRequestHeaders.Authorization = 
            new AuthenticationHeaderValue("Bearer", accessToken);
            var response = await http.GetAsync(BuildTodayCalendarEndpoint());
    
            var jsonResponse = await response.Content.ReadAsStringAsync();
    
            Rootobject rootObject = new Rootobject();
            try
            {
                // Parse the JSON response.
                rootObject = JsonUtility.FromJson<Rootobject>(jsonResponse);
    
                // Sort the meeting list by starting time.
                rootObject.value.Sort((x, y) => DateTime.Compare(x.start.StartDateTime, y.start.StartDateTime));
    
                // Populate the UI with the meetings.
                for (int i = 0; i < rootObject.value.Count; i++)
                {
                    MeetingsUI.Instance.AddMeeting(rootObject.value[i].subject,
                                                rootObject.value[i].start.StartDateTime.ToLocalTime(),
                                                rootObject.value[i].location.displayName);
                }
            }
            catch (Exception ex)
            {
                Debug.Log($"Error = {ex.Message}");
                return;
            }
    #endif
        }
    
  10. 完了したので、グラフスクリプト。You have now completed the Graph script. 変更を保存Visual studio を Unity に返す前にします。Save your changes in Visual Studio before returning to Unity.

Chapter 7 - GazeInput スクリプトを作成します。Chapter 7 - Create the GazeInput script

作成、 GazeInputします。You will now create the GazeInput. このクラスを処理しを使用して、ユーザーの視線の先の追跡、 Raycastから、 Main Camera、前方に射影します。This class handles and keeps track of the user's gaze, using a Raycast coming from the Main Camera, projecting forward.

スクリプトを作成します。To create the script:

  1. ダブルクリックして、スクリプトフォルダーを開きます。Double-click on the Scripts folder, to open it.

  2. 内側を右クリックし、スクリプトフォルダー、をクリックして作成 > C#スクリプトRight-click inside the Scripts folder, click Create > C# Script. スクリプトの名前GazeInputします。Name the script GazeInput.

  3. Visual Studio で開くことをスクリプトをダブルクリックします。Double-click on the script to open it with Visual Studio.

  4. 追加すると共に、以下と一致する名前空間のコードを変更、'[System.Serializable]' 上記のタグ、 GazeInputクラスをシリアル化できるようにします。Change the namespaces code to match the one below, along with adding the '[System.Serializable]' tag above your GazeInput class, so that it can be serialized:

    using UnityEngine;
    
    /// <summary>
    /// Class responsible for the User's Gaze interactions
    /// </summary>
    [System.Serializable]
    public class GazeInput : MonoBehaviour
    {
    
  5. 内で、 GazeInputクラスで、次の変数を追加します。Inside the GazeInput class, add the following variables:

        [Tooltip("Used to compare whether an object is to be interacted with.")]
        internal string InteractibleTag = "SignInButton";
    
        /// <summary>
        /// Length of the gaze
        /// </summary>
        internal float GazeMaxDistance = 300;
    
        /// <summary>
        /// Object currently gazed
        /// </summary>
        internal GameObject FocusedObject { get; private set; }
    
        internal GameObject oldFocusedObject { get; private set; }
    
        internal RaycastHit HitInfo { get; private set; }
    
        /// <summary>
        /// Cursor object visible in the scene
        /// </summary>
        internal GameObject Cursor { get; private set; }
    
        internal bool Hit { get; private set; }
    
        internal Vector3 Position { get; private set; }
    
        internal Vector3 Normal { get; private set; }
    
        private Vector3 _gazeOrigin;
    
        private Vector3 _gazeDirection;
    
  6. 追加、 CreateCursor() 、シーンの HoloLens のカーソルを作成しからメソッドを呼び出すメソッドをStart() メソッド。Add the CreateCursor() method to create the HoloLens cursor in the scene, and call the method from the Start() method:

        /// <summary>
        /// Start method used upon initialisation.
        /// </summary>
        internal virtual void Start()
        {
            FocusedObject = null;
            Cursor = CreateCursor();
        }
    
        /// <summary>
        /// Method to create a cursor object.
        /// </summary>
        internal GameObject CreateCursor()
        {
            GameObject newCursor = GameObject.CreatePrimitive(PrimitiveType.Sphere);
            newCursor.SetActive(false);
            // Remove the collider, so it doesn't block raycast.
            Destroy(newCursor.GetComponent<SphereCollider>());
            newCursor.transform.localScale = new Vector3(0.05f, 0.05f, 0.05f);
            Material mat = new Material(Shader.Find("Diffuse"));
            newCursor.GetComponent<MeshRenderer>().material = mat;
            mat.color = Color.HSVToRGB(0.0223f, 0.7922f, 1.000f);
            newCursor.SetActive(true);
    
            return newCursor;
        }
    
  7. 次のメソッドは、Raycast 視線の先を有効にして、フォーカスがあるオブジェクトの追跡。The following methods enable the gaze Raycast and keep track of the focused objects.

    /// <summary>
    /// Called every frame
    /// </summary>
    internal virtual void Update()
    {
        _gazeOrigin = Camera.main.transform.position;
    
        _gazeDirection = Camera.main.transform.forward;
    
        UpdateRaycast();
    }
    /// <summary>
    /// Reset the old focused object, stop the gaze timer, and send data if it
    /// is greater than one.
    /// </summary>
    private void ResetFocusedObject()
    {
        // Ensure the old focused object is not null.
        if (oldFocusedObject != null)
        {
            if (oldFocusedObject.CompareTag(InteractibleTag))
            {
                // Provide the 'Gaze Exited' event.
                oldFocusedObject.SendMessage("OnGazeExited", SendMessageOptions.DontRequireReceiver);
            }
        }
    }
    
        private void UpdateRaycast()
        {
            // Set the old focused gameobject.
            oldFocusedObject = FocusedObject;
            RaycastHit hitInfo;
    
            // Initialise Raycasting.
            Hit = Physics.Raycast(_gazeOrigin,
                _gazeDirection,
                out hitInfo,
                GazeMaxDistance);
                HitInfo = hitInfo;
    
            // Check whether raycast has hit.
            if (Hit == true)
            {
                Position = hitInfo.point;
                Normal = hitInfo.normal;
    
                // Check whether the hit has a collider.
                if (hitInfo.collider != null)
                {
                    // Set the focused object with what the user just looked at.
                    FocusedObject = hitInfo.collider.gameObject;
                }
                else
                {
                    // Object looked on is not valid, set focused gameobject to null.
                    FocusedObject = null;
                }
            }
            else
            {
                // No object looked upon, set focused gameobject to null.
                FocusedObject = null;
    
                // Provide default position for cursor.
                Position = _gazeOrigin + (_gazeDirection * GazeMaxDistance);
    
                // Provide a default normal.
                Normal = _gazeDirection;
            }
    
            // Lerp the cursor to the given position, which helps to stabilize the gaze.
            Cursor.transform.position = Vector3.Lerp(Cursor.transform.position, Position, 0.6f);
    
            // Check whether the previous focused object is this same. If so, reset the focused object.
            if (FocusedObject != oldFocusedObject)
            {
                ResetFocusedObject();
                if (FocusedObject != null)
                {
                    if (FocusedObject.CompareTag(InteractibleTag))
                    {
                        // Provide the 'Gaze Entered' event.
                        FocusedObject.SendMessage("OnGazeEntered", 
                            SendMessageOptions.DontRequireReceiver);
                    }
                }
            }
        }
    
  8. 変更を保存Visual studio を Unity に返す前にします。Save your changes in Visual Studio before returning to Unity.

8 -」の章の相互作用クラスを作成します。Chapter 8 - Create the Interactions class

作成する必要がありますこれで、の相互作用を担当するスクリプト。You will now need to create the Interactions script, which is responsible for:

  • 処理、タップ相互作用とカメラ視線、「ボタン」が、シーン内のログと対話するユーザーを有効にします。Handling the Tap interaction and the Camera Gaze, which enables the user to interact with the log in "button" in the scene.

  • ユーザーと対話するため、シーン内の「ボタン」オブジェクトでログを作成します。Creating the log in "button" object in the scene for the user to interact with.

スクリプトを作成します。To create the script:

  1. ダブルクリックして、スクリプトフォルダーを開きます。Double-click on the Scripts folder, to open it.

  2. 内側を右クリックし、スクリプトフォルダー、をクリックして作成 > C#スクリプトRight-click inside the Scripts folder, click Create > C# Script. スクリプトの名前の相互作用します。Name the script Interactions.

  3. Visual Studio で開くことをスクリプトをダブルクリックします。Double-click on the script to open it with Visual Studio.

  4. 次の名前空間を挿入します。Insert the following namespaces:

    using UnityEngine;
    using UnityEngine.XR.WSA.Input;
    
  5. 継承の変更、相互作用クラスMonoBehaviourGazeInputします。Change the inheritance of the Interaction class from MonoBehaviour to GazeInput.

    パブリック クラスの相互作用します。MonoBehaviourpublic class Interactions : MonoBehaviour

    public class Interactions : GazeInput
    
  6. 内で、相互作用クラスは、次の変数を挿入します。Inside the Interaction class insert the following variable:

        /// <summary>
        /// Allows input recognition with the HoloLens
        /// </summary>
        private GestureRecognizer _gestureRecognizer;
    
  7. 置換、開始メソッドは、'base' 注視クラスのメソッドを呼び出すオーバーライド メソッドであることに注意してください。Replace the Start method; notice it is an override method, which calls the 'base' Gaze class method. Start() クラスが初期化、入力の認識のための登録とサインインを作成するときに呼び出されるボタンシーン内。Start() will be called when the class initializes, registering for input recognition and creating the sign in button in the scene:

        /// <summary>
        /// Called on initialization, after Awake
        /// </summary>
        internal override void Start()
        {
            base.Start();
    
            // Register the application to recognize HoloLens user inputs
            _gestureRecognizer = new GestureRecognizer();
            _gestureRecognizer.SetRecognizableGestures(GestureSettings.Tap);
            _gestureRecognizer.Tapped += GestureRecognizer_Tapped;
            _gestureRecognizer.StartCapturingGestures();
    
            // Add the Graph script to this object
            gameObject.AddComponent<MeetingsUI>();
            CreateSignInButton();
        }
    
  8. 追加、 CreateSignInButton() メソッドは、サインインをインスタンス化はボタンシーン内とプロパティの設定。Add the CreateSignInButton() method, which will instantiate the sign in button in the scene and set its properties:

        /// <summary>
        /// Create the sign in button object in the scene
        /// and sets its properties
        /// </summary>
        void CreateSignInButton()
        {
            GameObject signInButton = GameObject.CreatePrimitive(PrimitiveType.Sphere);
    
            Material mat = new Material(Shader.Find("Diffuse"));
            signInButton.GetComponent<Renderer>().material = mat;
            mat.color = Color.blue;
    
            signInButton.transform.position = new Vector3(3.5f, 2f, 9f);
            signInButton.tag = "SignInButton";
            signInButton.AddComponent<Graph>();
        }
    
  9. 追加、 GestureRecognizer_Tapped() メソッド応答、タップユーザー イベント。Add the GestureRecognizer_Tapped() method, which be respond for the Tap user event.

        /// <summary>
        /// Detects the User Tap Input
        /// </summary>
        private void GestureRecognizer_Tapped(TappedEventArgs obj)
        {
            if(base.FocusedObject != null)
            {
                Debug.Log($"TAP on {base.FocusedObject.name}");
                base.FocusedObject.SendMessage("SignInAsync", SendMessageOptions.RequireReceiver);
            }
        }
    
  10. 削除Update() メソッドし変更を保存Unity に戻る前に Visual Studio でします。Delete the Update() method, and then save your changes in Visual Studio before returning to Unity.

第 9 章 – は、スクリプト参照を設定Chapter 9 - Set up the script references

この章では、配置する必要があります、の相互作用にスクリプト、 Main Cameraします。In this Chapter you need to place the Interactions script onto the Main Camera. 他のスクリプトに必要な場所に配置するスクリプトを処理し、します。That script will then handle placing the other scripts where they need to be.

  • スクリプトフォルダーで、プロジェクト パネル、スクリプトをドラッグしての相互作用Main Cameraオブジェクトを次に示します。From the Scripts folder in the Project Panel, drag the script Interactions to the Main Camera object, as pictured below.

第 10 章 – タグを設定Chapter 10 - Setting up the Tag

タグの使用、視線入力を処理するコードと、 SignInButtonオブジェクトを識別するために、ユーザーにサインインするやり取りMicrosoft Graphします。The code handling the gaze will make use of the Tag SignInButton to identify which object the user will interact with to sign-in to Microsoft Graph.

タグを作成します。To create the Tag:

  1. Unity エディターでのクリックして、 Main Cameraで、階層パネルします。In the Unity Editor click on the Main Camera in the Hierarchy Panel.

  2. インスペクター パネル をクリックして、 MainCamera タグをドロップダウン リストを開きます。In the Inspector Panel click on the MainCamera Tag to open a drop-down list. をクリックしてタグを追加しています.Click on Add Tag...

  3. をクリックして、 + ボタンをクリックします。Click on the + button.

  4. タグの名前を書き込みSignInButton [保存] をクリックします。Write the Tag name as SignInButton and click Save.

第 11 章 - UWP を Unity プロジェクトをビルドChapter 11 - Build the Unity project to UWP

このプロジェクトの Unity のセクションの必要なすべてが今すぐ完了したら、ので、Unity から構築するための時間。Everything needed for the Unity section of this project has now been completed, so it is time to build it from Unity.

  1. 移動します ビルド設定 (*ファイル > *設定**を作成) します。Navigate to Build Settings (*File > *Build Settings**).

  2. まだ行っていない場合、ティックUnity C#プロジェクトします。If not already, tick Unity C# Projects.

  3. [Build] をクリックします。Click Build. Unity を起動、ファイル エクスプ ローラーウィンドウを作成しにアプリをビルドするフォルダーを選択する必要があります。Unity will launch a File Explorer window, where you need to create and then select a folder to build the app into. ここで、そのフォルダーを作成し、名前アプリします。Create that folder now, and name it App. 使用し、アプリフォルダーを選択すると、クリックしてフォルダーの選択します。Then with the App folder selected, click Select Folder.

  4. Unity にプロジェクトをビルドを開始、アプリフォルダー。Unity will begin building your project to the App folder.

  5. 1 回 Unity には、(少し時間がかかる場合があります) ビルドが完了したが開き、ファイル エクスプ ローラービルドの位置にあるウィンドウ (上の windows では、常に表示されないの新しい追加の通知をタスク バーを確認ウィンドウ)。Once Unity has finished building (it might take some time), it will open a File Explorer window at the location of your build (check your task bar, as it may not always appear above your windows, but will notify you of the addition of a new window).

HoloLens に 12 -」の章をデプロイします。Chapter 12 - Deploy to HoloLens

HoloLens の展開。To deploy on HoloLens:

  1. 必要になります、HoloLens の IP アドレス (リモート) を展開し、HoloLens をことを確認するには開発者モード。You will need the IP Address of your HoloLens (for Remote Deploy), and to ensure your HoloLens is in Developer Mode. これには、次の手順を実行します。To do this:

    1. ソックスを着けずに、HoloLens 中を開く、設定します。Whilst wearing your HoloLens, open the Settings.

    2. 移動してネットワークとインターネット > Wi-fi > 詳細オプションGo to Network & Internet > Wi-Fi > Advanced Options

    3. 注、 IPv4アドレス。Note the IPv4 address.

    4. 次に移動します設定、し更新とセキュリティ > 開発者向けNext, navigate back to Settings, and then to Update & Security > For Developers

    5. 設定で開発者モードします。Set Developer Mode On.

  2. 新しい Unity ビルドに移動します (、アプリフォルダー) とソリューション ファイルを開くとVisual Studioします。Navigate to your new Unity build (the App folder) and open the solution file with Visual Studio.

  3. ソリューション構成選択デバッグします。In the Solution Configuration select Debug.

  4. ソリューション プラットフォームx86、リモート コンピューターします。In the Solution Platform, select x86, Remote Machine. 挿入を求め、 IP アドレスのリモート デバイス (、HoloLens、ここでは、メモしたもの)。You will be prompted to insert the IP address of a remote device (the HoloLens, in this case, which you noted).

  5. 移動してビルドメニューをクリックしますソリューションの配置サイドロード、HoloLens をアプリケーションにします。Go to Build menu and click on Deploy Solution to sideload the application to your HoloLens.

  6. アプリが、起動する準備ができて、HoloLens にインストールされているアプリの一覧に表示されます。Your app should now appear in the list of installed apps on your HoloLens, ready to be launched!

Microsoft Graph HoloLens アプリケーションYour Microsoft Graph HoloLens application

これで、読み取り、ユーザーの予定表データの表示、Microsoft Graph を利用している mixed reality アプリを構築します。Congratulations, you built a mixed reality app that leverages the Microsoft Graph, to read and display user Calendar data.

ボーナスの演習Bonus exercises

手順 1Exercise 1

Microsoft Graph を使用して、ユーザーに関するその他の情報を表示するにはUse Microsoft Graph to display other information about the user

  • ユーザーの電子メール プロファイルの画像/電話番号User email / phone number / profile picture

手順 1Exercise 1

Microsoft Graph の UI を移動する音声コントロールを実装します。Implement voice control to navigate the Microsoft Graph UI.