HoloLens (第 1 世代) と Azure 302 - コンピュータービジョン

[アーティクル]
03/21/2023

Note

Mixed Reality Academy のチュートリアルは、HoloLens (第 1 世代) と Mixed Reality イマーシブヘッドセットを念頭に置いて編成されています。そのため、それらのデバイスの開発に関するガイダンスを引き続き探している開発者のために、これらのチュートリアルをそのまま残しておくことが重要だと考えています。これらのチュートリアルが、HoloLens 2 に使用されている最新のツールセットや操作に更新されることは "ありません"。これらは、サポートされているデバイス上で継続して動作するように、保守されます。今後、HoloLens 2　の開発方法を説明する新しいチュートリアルが公開される予定です。この通知は、それらのチュートリアルが投稿されたときにリンクと共に更新されます。

このコースでは、Azure Computer Vision の機能を Mixed Reality アプリケーションで使用して画像の中にあるビジュアルコンテンツを認識する方法を学習します。

認識結果は、説明のタグとして表示されます。このサービスを使うために、機械学習モデルをトレーニングする必要はありません。機械学習モデルのトレーニングを必要とする実装の場合は、「MR と Azure 302b」をご覧ください。

ラボの結果

Microsoft Computer Vision は、開発者が画像の処理と分析 (返された情報を使用) を行うための API の集合です。高度なアルゴリズムが使用され、すべてクラウドから行うことができます。開発者が画像または画像の URL をアップロードすると、Microsoft Computer Vision API のアルゴリズムによってビジュアルコンテンツが分析され (ユーザーが選んだ入力に基づいて)、情報が返されます。たとえば、画像の種類と質を特定することや、人間の顔の検出 (顔の座標が返されます)、タグ付け、画像の分類などを行うことができます。詳しくは、Azure Computer Vision API に関するページを参照してください。

このコースを修了すると、新しい Mixed Reality HoloLens アプリケーションが完成し、このアプリケーションで次のことができるようになります。

タップジェスチャを使って、HoloLens のカメラで画像をキャプチャします。
この画像が Azure Computer Vision API サービスに送信されます。
認識されたオブジェクトは、Unity シーンの中に配置される単純な UI グループの中に一覧表示されます。

お客様のアプリケーションで、結果をどのようにデザインと統合するかは、お客様次第です。このコースは、Azure のサービスをお客様の Unity プロジェクトに統合する方法を説明することを目的としています。このコースで得られた知識を使用して、ご自分の Mixed Reality アプリケーションを強化しましょう。

デバイスサポート

コース	HoloLens	イマーシブヘッドセット
MR と Azure 302: Computer Vision	✔️	✔️

Note

このコースでは主に HoloLens に焦点を当てていますが、このコースで学習した内容を Windows Mixed Reality イマーシブ (VR) ヘッドセットにも適用できます。イマーシブ (VR) ヘッドセットにはアクセス可能なカメラが搭載されていないため、外部カメラが PC に接続されている必要があります。このコースの中では、イマーシブ (VR) ヘッドセットをサポートするために必要な変更がある場合に、その変更が注意事項として記載されています。

前提条件

Note

このチュートリアルは、Unity と C# の基本的な使用経験がある開発者を対象としています。また、このドキュメント内の前提条件や文章による説明は、執筆時 (2018 年 5 月) にテストおよび検証された内容であることをご了承ください。「ツールのインストール」の記事に記載されているように、最新のソフトウェアを自由に使用できます。ただし、このコースの情報は、以下に記載されているものよりも新しいソフトウェアで見つかったものと完全に一致するとは限りません。

このコースでは、次のハードウェアとソフトウェアをお勧めします。

イマーシブ (VR) ヘッドセットの開発に必要な Windows Mixed Reality と互換性のある開発用 PC
開発者モードが有効になっている Windows 10 Fall Creators Update (またはそれ以降)
最新の Windows 10 SDK
Unity 2017.4
Visual Studio 2017
開発者モードが有効になっている Windows Mixed Reality イマーシブ (VR) ヘッドセットまたは Microsoft HoloLens
開発者の PC に接続されているカメラ (イマーシブヘッドセット開発の場合)
Azure のセットアップと Computer Vision API の取得のためのインターネットアクセス

開始する前に

このプロジェクトをビルドする際の問題を避けるために、このチュートリアルで紹介するプロジェクトをルートまたはルートに近いフォルダーに作成することを強くお勧めします (フォルダーパスが長いと、ビルド時に問題が発生する可能性があります)。
HoloLens を設定してテストします。 HoloLens の設定でサポートが必要な場合は、HoloLens セットアップに関する記事にアクセスしてください。
新しい HoloLens アプリの開発を開始するときは、調整とセンサーのチューニングを実行することをお勧めします (ユーザーごとにこれらのタスクを実行すると役立つ場合があります)。

調整の詳細については、この HoloLens の調整に関する記事へのリンクを参照してください。

センサーチューニングの詳細については、この HoloLens センサーチューニングに関する記事へのリンクを参照してください。

第 1 章 – Azure portal

Azure の Computer Vision API サービスを使用するには、開発するアプリケーションから使用できるようにこのサービスのインスタンスを構成する必要があります。

最初に、Azure portal にログインします。

Note

まだ Azure アカウントをお持ちでない方は、作成する必要があります。このチュートリアルを教室やラボで受講している場合は、インストラクターや監督者に新しいアカウントの設定方法を質問してください。
ログインしたら、左上隅にある[新規作成] をクリックし、検索フィールドに Computer Vision API と入力して Enter キーを押します。

Note

新しいポータルでは、[新規作成] という文字列が [リソースの作成] に置き換えられることがあります。
新しいページに、Computer Vision API サービスの説明が表示されます。このページの左下にある [作成] ボタンを選択すると、このサービスとの関連付けが作成されます。
[作成] をクリックしたら、次のようにします。
1. このサービスインスタンスに任意の名前を付けて入力します。
2. サブスクリプションを選択します。
3. 自分に適した [価格レベル] を選びます。初めて Computer Vision API サービスを作る場合は、Free レベル (F0 という名前) を使えるはずです。
4. [リソースグループ] を選択するか、新規に作成します。リソースグループは、Azure アセットのコレクションの監視、アクセス制御、プロビジョニング、課金管理を行う方法を提供します。 1 つのプロジェクト (例: これらのラボなど) に関連するすべての Azure サービスを共通のリソースグループの下に保持することをお勧めします。
  
  Azure リソースグループの詳細については、リソースグループに関する記事を参照してください。
5. リソースグループの [場所] を決定します (新しいリソースグループを作成する場合)。この場所は、アプリケーションが実行されるリージョン内にすることが理想的です。一部の Azure アセットは、特定のリージョンでしか利用できません。
6. またお客様は、本サービスに適用されるご契約条件を理解していることを確認する必要があります。
7. Create をクリックしてください。
[作成] をクリックしたら、サービスが作成されるのを待つ必要があります。これには 1 分ほどかかることがあります。
サービスインスタンスが作成されると、ポータルに通知が表示されます。
通知をクリックして、新しいサービスインスタンスを確認します。
通知の[リソースに移動]ボタンをクリックして、新しいサービスインスタンスを探します。新しい Computer Vision API サービスインスタンスの画面に自動的に移動します。
このチュートリアルでは、アプリケーションがサービスの呼び出しを行う必要があります。これは、サービスのサブスクリプションキーを使用して実行されます。
Computer Vision API サービスの [クイックスタート] ページで、最初のステップである [キーを取得する] に移動して [キー] をクリックします (または、サービスのナビゲーションメニューにある、鍵のアイコンで示された青い [キー] ハイパーリンクをクリックします)。これにより、サービスの "キー" が表示されます。
表示されているキーの 1 つをコピーします。これは、プロジェクトの後半で必要になります。
[クイックスタート] ページに戻り、このページからエンドポイントを取得します。実際の値は、リージョンによって異なる場合があるので注意してください (異なる場合は、後でコードを変更する必要があります)。後で使うので、このエンドポイントをコピーしておきます。

ヒント

どのようなエンドポイントがあるかは、こちらで確認できます。

第 2 章 – Unity プロジェクトを設定する

次の設定は、複合現実での開発のための一般的な設定であるため、他のプロジェクトのテンプレートとして利用できます。

Unity を開き、[新規] をクリックします。
ここで、Unity プロジェクト名を指定する必要があります。 MR_ComputerVision と入力します。プロジェクトの種類が [3D] に設定されていることを確認します。 [場所] を適切な場所に設定します (ルートディレクトリに近い方が適しています)。 [Create project]$プロジェクトの作成$ をクリックします。
Unity を開いた状態で、既定のスクリプトエディターが Visual Studio に設定されているかどうか確認することをお勧めします。 [編集] >[Preferences] (環境設定) に移動し、新しいウィンドウで [外部ツール] に移動します。 [外部スクリプトエディター] を [Visual Studio 2017] に変更します。 [環境設定] ウィンドウを閉じます。
次に、[ファイル] > [ビルド設定] で、[ユニバーサル Windows プラットフォーム] を選択してから、[プラットフォームの切り替え] ボタンをクリックして選択を適用します。

$[Build Settings]$ビルド設定$ ウィンドウで、プラットフォームを UWP に切り替えます。$
引き続き [File] (ファイル) > [Build Settings] (ビルド設定) で、次のことを確認します。
1. [ターゲットデバイス] が [HoloLens] に設定されている
  
  イマーシブヘッドセットの場合は、[ターゲットデバイス] を [任意のデバイス] に設定します。
2. [Build Type] (ビルドの種類) が [D3D] に設定されている
3. [SDK] が [最新のインストール] に設定されている。
4. [Visual Studio Version] (Visual Studio のバージョン) が [Latest installed] (最新のインストール) に設定されている
5. [Build and Run] (ビルドと実行) が [Local Machine] (ローカルマシン) に設定されている
6. シーンを保存し、ビルドに追加します。
  1. これを行うには、[Add Open Scenes] (開いているシーンを追加) を選択します。保存ウィンドウが表示されます。
    
    $[Add Open Scenes]$開いているシーンを追加$ ボタンをクリックします$
  2. これと、今後のシーン用の新しいフォルダーを作成し、[新しいフォルダー] ボタンを選択して、新しいフォルダーを作成し、「Scenes」という名前を付けます。
  3. 新しく作成した Scenes フォルダーを開き、"[File name:]$ファイル名$" テキストフィールドに「MR_ComputerVisionScene」と入力して [Save]$保存$ をクリックします。
    
    Unity のシーンは Assets フォルダーの中に保存する必要があることにご注意ください。シーンは Unity プロジェクトに関連付けられている必要があるためです。 Unity プロジェクトの構築では、通常、Scenes フォルダー (とその他の類似フォルダー) を作成します。
7. [ビルド設定] の残りの設定は、ここでは既定値のままにしておきます。
Build Settings (ビルド設定) ウィンドウで、[プレーヤー設定] ボタンをクリックすると、"インスペクター" が配置されているスペースに関連パネルが表示されます。
このパネルでは、いくつかの設定を確認する必要があります。
1. [Other Settings] (その他の設定) タブで、次の内容を確認します。
  1. [Scripting Runtime Version] (スクリプトランタイムのバージョン) が [Stable] (安定) (.NET 3.5 と同等) である。
  2. [スクリプトバックエンド] が [.NET] である。
  3. [API Compatibility Level]$API 互換性レベル$ が [.NET 4.6] である。
2. [Publishing Settings]$公開設定$ タブ内の [Capabilities]$機能$ で、次の内容を確認します。
  1. InternetClient
  2. Web カメラ
3. さらに、パネルの下にある [XR Settings]$XR 設定$ ([Publish Settings]$公開設定$ の下) で、[Virtual Reality Supported]$Virtual Reality サポート$ をオンにし、Windows Mixed Reality SDK が追加されていることを確認します。
Build の設定に戻ります Unity C# Projects はグレー表示されなくなりました。この横にあるチェックボックスをオンにします。
[ビルド設定] ウィンドウを閉じます。
シーンとプロジェクトを保存します ([FILE] (ファイル) > [SAVE SCENE / FILE] (シーン/ファイルの保存) > [SAVE PROJECT] (プロジェクトの保存))。

第 3 章 – メインカメラのセットアップ

重要

このコースの "Unity のセットアップ" コンポーネントをスキップして、そのままコードに進みたい場合は、この .unitypackage をダウンロードし、これをカスタムパッケージとしてプロジェクトにインポートした後で第 5 章から続けてください。

[Hierarchy] (階層) パネルで [Main Camera] (メインカメラ) を選択します。
選択すると、[Main Camera] (メインカメラ) のすべてのコンポーネントが [Inspector] (インスペクター) パネルに表示されます。
1. カメラオブジェクトの名前は Main Camera である必要があります (スペルに注意します)。
2. Main Camera の [Tag] (タグ) が MainCamera に設定されている必要があります (スペルに注意してください)。
3. [Transform]$変換$ の [Position]$位置$ が 0、0、0 に設定されていることを確認します。
4. [Clear Flags] (クリアフラグ) を [Solid Color] (単色) に設定します (イマーシブヘッドセットの場合は無視してください)。
5. カメラコンポーネントの [Background Color] (背景色) を黒、アルファ 0 (16 進コード: #00000000) に設定します (イマーシブヘッドセットの場合は無視してください)。
次に、Main Camera にアタッチされた単純な "カーソル" オブジェクトを作成する必要があります。これは、アプリケーションが実行されているときに画像分析の出力を配置するのに役立ちます。このカーソルによって、カメラフォーカスの中心点が決まります。

カーソルを作成するには:

[Hierarchy] (階層) パネルで [Main Camera] (メインカメラ) を右クリックします。 [3D Object] (3D オブジェクト) の下の [Sphere] (球) をクリックします。
名前を Sphere から Cursor に変更し (カーソルオブジェクトをダブルクリックするか、このオブジェクトが選択されている状態で F2 キーを押します)、このオブジェクトが Main Camera の子として配置されていることを確認します。
[Hierarchy] (階層) パネルで [Cursor] をクリックします。 [Cursor] が選択されている状態で、[Inspector] (インスペクター) パネルで次の変数を調整します。
1. [Transform] (変換) の [Position] (位置) を 0、0、5 に設定します
2. [Scale] (スケール) を 0.02、0.02、0.02 に設定します

第 4 章 – ラベルシステムを設定する

HoloLens のカメラで画像をキャプチャすると、その画像は分析のためにご自分の Azure Computer Vision API サービスインスタンスに送信されます。

その分析の結果は、認識されたオブジェクトのリストであり、これらはタグと呼ばれます。

ラベル (ワールド空間の 3D テキストとして) は、写真が撮影された場所にこれらのタグを表示するために使用します。

次の手順で、ラベル オブジェクトを設定する方法を説明します。

[Hierarchy] (階層) パネル内の任意の場所 (この時点ではどこでもかまいません) を右クリックし、[3D Object] (3D オブジェクト) の下の [3D Text] (3D テキスト) を追加します。名前を LabelText に設定します。
[Hierarchy]$階層$ パネルで LabelText をクリックします。 [LabelText] が選択されている状態で、[Inspector] (インスペクター) パネルで次の変数を調整します。
1. [Position] (位置) を 0、0、0 に設定します
2. [Scale] (スケール) を 0.01、0.01、0.01 に設定します
3. コンポーネント [Text Mesh] (テキストメッシュ) で:
4. [Text] (テキスト) 内のすべてのテキストを "..." に置き換えます
5. [Anchor] (アンカー) を [Middle Center] (中央) に設定します
6. [Alignment] (配置) を [Center] (中央) に設定します
7. [Tab Size] (タブサイズ) を 4 に設定します
8. [Font Size] (フォントサイズ) を 50 に設定します
9. [Color] (色) を #FFFFFFFF に設定します
[LabelText] を [Hierarchy] (階層) パネルから [Project] (プロジェクト) パネル内の [Asset] (アセット) フォルダーにドラッグします。これにより LabelText はプレハブになり、コードでインスタンス化できます。
LabelText を [Hierarchy]$階層$ パネルから削除して、開かれたシーンに表示されないようにする必要があります。この時点で既にプレハブになっており、Assets フォルダーから個々のインスタンスに対して呼び出されるので、シーン内に残しておく必要はありません。
"[Hierarchy]$階層$" パネルの最終的なオブジェクト構造は、次の図に示すようになります。

第 5 章 – ResultsLabel クラスを作成する

作成する必要がある最初のスクリプトは ResultsLabel クラスです。このクラスは、次のことを行います。

カメラの位置を基準にして、適切なワールド空間内にラベルを作成します。
画像分析からのタグを表示します。

このクラスを作成するには、次の手順を実行します。

[Project] (プロジェクト) パネル内で右クリックし、[Create] (作成) > [Folder] (フォルダー) を選択します。フォルダーに「Scripts」という名前を付けます。
作成した Scripts フォルダーをダブルクリックして開きます。次に、そのフォルダー内で右クリックして [Create] (作成) > [C# Script] (C# スクリプト) を選択します。スクリプトに「ResultsLabel」という名前を付けます。
新しい [ResultsLabel] スクリプトをダブルクリックして Visual Studio で開きます。

ResultsLabel クラスに次のコードを挿入します。

    using System.Collections.Generic;
    using UnityEngine;

    public class ResultsLabel : MonoBehaviour
    {	
        public static ResultsLabel instance;

        public GameObject cursor;

        public Transform labelPrefab;

        [HideInInspector]
        public Transform lastLabelPlaced;

        [HideInInspector]
        public TextMesh lastLabelPlacedText;

        private void Awake()
        {
            // allows this instance to behave like a singleton
            instance = this;
        }

        /// <summary>
        /// Instantiate a Label in the appropriate location relative to the Main Camera.
        /// </summary>
        public void CreateLabel()
        {
            lastLabelPlaced = Instantiate(labelPrefab, cursor.transform.position, transform.rotation);

            lastLabelPlacedText = lastLabelPlaced.GetComponent<TextMesh>();

            // Change the text of the label to show that has been placed
            // The final text will be set at a later stage
            lastLabelPlacedText.text = "Analysing...";
        }

        /// <summary>
        /// Set the Tags as Text of the last Label created. 
        /// </summary>
        public void SetTagsToLastLabel(Dictionary<string, float> tagsDictionary)
        {
            lastLabelPlacedText = lastLabelPlaced.GetComponent<TextMesh>();

            // At this point we go through all the tags received and set them as text of the label
            lastLabelPlacedText.text = "I see: \n";

            foreach (KeyValuePair<string, float> tag in tagsDictionary)
            {
                lastLabelPlacedText.text += tag.Key + ", Confidence: " + tag.Value.ToString("0.00 \n");
            }    
        }
    }

Unity に戻る前に、必ず Visual Studio で変更を保存してください。
Unity Editor に戻り、[Scripts] フォルダーにある [ResultsLabel] クラスをクリックして [Hierarchy] (階層) パネルの [Main Camera] オブジェクトにドラッグします。
[メインカメラ] をクリックして、[インスペクター] パネルを見てみます。

カメラにドラッグしたスクリプトには、[Cursor] (カーソル) と [Label Prefab] (ラベルプレハブ) の 2 つのフィールドがあることがわかります。

Cursor という名前のオブジェクトを、[Hierarchy] (階層) パネルから [Cursor] (カーソル) という名前のスロットにドラッグします (下図を参照)。
LabelText という名前のオブジェクトを、[Project] (プロジェクト) パネルの [Assets] (アセット) フォルダーから [Label Prefab] (ラベルプレハブ) という名前のスロットにドラッグします。

第 6 章 – ImageCapture クラスを作成する

次に作成するクラスは ImageCapture クラスです。このクラスでは次のことを行います。

HoloLens のカメラを使って画像をキャプチャし、App フォルダーに格納します。
ユーザーのタップジェスチャをキャプチャします。

このクラスを作成するには、次の手順を実行します。

先ほど作成した Scripts フォルダーに移動します。
フォルダー内を右クリックし、[Create] (作成) > [C# Script] (C# スクリプト) を選択します。スクリプトの名前を ImageCapture にします。
新しい ImageCapture スクリプトをダブルクリックして Visual Studio で開きます。

次の名前空間をファイルの先頭に追加します。

    using System.IO;
    using System.Linq;
    using UnityEngine;
    using UnityEngine.XR.WSA.Input;
    using UnityEngine.XR.WSA.WebCam;

次に、ImageCapture クラス内の Start() メソッドの上に次の変数を追加します。

    public static ImageCapture instance; 
    public int tapsCount;
    private PhotoCapture photoCaptureObject = null;
    private GestureRecognizer recognizer;
    private bool currentlyCapturing = false;

tapsCount 変数には、ユーザーからキャプチャされたタップジェスチャの数が格納されます。この数値は、キャプチャされた画像の命名に使用されます。

ここで、Awake() メソッドと Start() メソッドのコードを追加する必要があります。これらは、クラスの初期化時に呼び出されます。

    private void Awake()
    {
        // Allows this instance to behave like a singleton
        instance = this;
    }

    void Start()
    {
        // subscribing to the HoloLens API gesture recognizer to track user gestures
        recognizer = new GestureRecognizer();
        recognizer.SetRecognizableGestures(GestureSettings.Tap);
        recognizer.Tapped += TapHandler;
        recognizer.StartCapturingGestures();
    }

タップジェスチャが発生したときに呼び出されるハンドラーを実装します。

    /// <summary>
    /// Respond to Tap Input.
    /// </summary>
    private void TapHandler(TappedEventArgs obj)
    {
        // Only allow capturing, if not currently processing a request.
        if(currentlyCapturing == false)
        {
            currentlyCapturing = true;

            // increment taps count, used to name images when saving
            tapsCount++;

            // Create a label in world space using the ResultsLabel class
            ResultsLabel.instance.CreateLabel();

            // Begins the image capture and analysis procedure
            ExecuteImageCaptureAndAnalysis();
        }
    }

TapHandler() メソッドは、ユーザーからキャプチャされたタップの数をインクリメントし、現在のカーソル位置を使って新しいラベルの位置を決めます。

続いて、このメソッドは ExecuteImageCaptureAndAnalysis() メソッドを呼び出して、このアプリケーションのコア機能を開始します。

画像がキャプチャされて保存されると、次のハンドラーが呼び出されます。プロセスが正常終了すると、その結果は分析のために VisionManager (まだ作成していません) に渡されます。

    /// <summary>
    /// Register the full execution of the Photo Capture. If successful, it will begin 
    /// the Image Analysis process.
    /// </summary>
    void OnCapturedPhotoToDisk(PhotoCapture.PhotoCaptureResult result)
    {
        // Call StopPhotoMode once the image has successfully captured
        photoCaptureObject.StopPhotoModeAsync(OnStoppedPhotoMode);
    }

    void OnStoppedPhotoMode(PhotoCapture.PhotoCaptureResult result)
    {
        // Dispose from the object in memory and request the image analysis 
        // to the VisionManager class
        photoCaptureObject.Dispose();
        photoCaptureObject = null;
        StartCoroutine(VisionManager.instance.AnalyseLastImageCaptured()); 
    }

次に、このアプリケーションで画像キャプチャプロセスを開始して画像を格納するために使用するメソッドを追加します。

    /// <summary>    
    /// Begin process of Image Capturing and send To Azure     
    /// Computer Vision service.   
    /// </summary>    
    private void ExecuteImageCaptureAndAnalysis()  
    {    
        // Set the camera resolution to be the highest possible    
        Resolution cameraResolution = PhotoCapture.SupportedResolutions.OrderByDescending((res) => res.width * res.height).First();    

        Texture2D targetTexture = new Texture2D(cameraResolution.width, cameraResolution.height);

        // Begin capture process, set the image format    
        PhotoCapture.CreateAsync(false, delegate (PhotoCapture captureObject)    
        {    
            photoCaptureObject = captureObject;    
            CameraParameters camParameters = new CameraParameters();    
            camParameters.hologramOpacity = 0.0f;    
            camParameters.cameraResolutionWidth = targetTexture.width;    
            camParameters.cameraResolutionHeight = targetTexture.height;    
            camParameters.pixelFormat = CapturePixelFormat.BGRA32;

            // Capture the image from the camera and save it in the App internal folder    
            captureObject.StartPhotoModeAsync(camParameters, delegate (PhotoCapture.PhotoCaptureResult result)
            {    
                string filename = string.Format(@"CapturedImage{0}.jpg", tapsCount);

                string filePath = Path.Combine(Application.persistentDataPath, filename);

                VisionManager.instance.imagePath = filePath;

                photoCaptureObject.TakePhotoAsync(filePath, PhotoCaptureFileOutputFormat.JPG, OnCapturedPhotoToDisk);

                currentlyCapturing = false;
            });   
        });    
    }

警告

この時点で、Unity エディターの [コンソール] パネルにエラーが表示されます。これは VisionManager クラスがコードで参照されているからですが、このクラスは次の章で作成します。

第 7 章 – Azure と画像分析を呼び出す

作成する必要がある最後のスクリプトは VisionManager クラスです。

このクラスでは次のことを行います。

キャプチャされた最新の画像をバイト配列として読み込みます。
このバイト配列を、分析のためにご自分の Azure Computer Vision API サービスインスタンスに送信します。
応答を JSON 文字列として受け取ります。
応答を逆シリアル化し、結果として得られたタグを ResultsLabel に渡します。

このクラスを作成するには、次の手順を実行します。

Scripts フォルダーをダブルクリックして開きます。
[Scripts] フォルダー内で右クリックし、[Create] (作成) > [C# Script] (C# スクリプト) をクリックします。スクリプトに「VisionManager」という名前を付けます。
この新しいスクリプトをダブルクリックして Visual Studio で開きます。

VisionManager クラスの先頭にある名前空間を、次に示すのと同一になるように更新します。

    using System;
    using System.Collections;
    using System.Collections.Generic;
    using System.IO;
    using UnityEngine;
    using UnityEngine.Networking;

スクリプトの先頭にある VisionManager クラスの "内部" (Start() メソッドの上) に、2 つの "クラス" を作成する必要があります。これらは、Azure からの逆シリアル化された JSON 応答を表します。
```
    [System.Serializable]
    public class TagData
    {
        public string name;
        public float confidence;
    }

    [System.Serializable]
    public class AnalysedObject
    {
        public TagData[] tags;
        public string requestId;
        public object metadata;
    }
```
Note

TagData クラスと AnalysedObject クラスの宣言の前に [System.Serializable] 属性を追加する必要があります。これで、Unity ライブラリでの逆シリアル化ができるようになります。
VisionManager クラスの中に、次の変数を追加する必要があります。
```
    public static VisionManager instance;

    // you must insert your service key here!    
    private string authorizationKey = "- Insert your key here -";    
    private const string ocpApimSubscriptionKeyHeader = "Ocp-Apim-Subscription-Key";
    private string visionAnalysisEndpoint = "https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags";   // This is where you need to update your endpoint, if you set your location to something other than west-us.

    internal byte[] imageBytes;

    internal string imagePath;
```
警告

ご自分の認証キーが authorizationKey 変数に挿入されていることを確認してください。この認証キーは、このコースの最初の第 1 章で取得したものです。
警告

visionAnalysisEndpoint 変数は、この例で指定したものとは異なる場合があります。 westus は、米国西部リージョン用に作成されたサービスインスタンスを厳密に参照します。これをご自分のエンドポイント URL で更新してください。次に例をいくつか示します。
- 西ヨーロッパ: https://westeurope.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags
- 東南アジア: https://southeastasia.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags
- オーストラリア東部: https://australiaeast.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Tags

次に、Awake のコードを追加する必要があります。

    private void Awake()
    {
        // allows this instance to behave like a singleton
        instance = this;
    }

次に、コルーチン (およびその下の静的ストリームメソッド) を追加します。これは、ImageCapture クラスによってキャプチャされた画像の分析結果を取得するためのものです。

    /// <summary>
    /// Call the Computer Vision Service to submit the image.
    /// </summary>
    public IEnumerator AnalyseLastImageCaptured()
    {
        WWWForm webForm = new WWWForm();
        using (UnityWebRequest unityWebRequest = UnityWebRequest.Post(visionAnalysisEndpoint, webForm))
        {
            // gets a byte array out of the saved image
            imageBytes = GetImageAsByteArray(imagePath);
            unityWebRequest.SetRequestHeader("Content-Type", "application/octet-stream");
            unityWebRequest.SetRequestHeader(ocpApimSubscriptionKeyHeader, authorizationKey);

            // the download handler will help receiving the analysis from Azure
            unityWebRequest.downloadHandler = new DownloadHandlerBuffer();

            // the upload handler will help uploading the byte array with the request
            unityWebRequest.uploadHandler = new UploadHandlerRaw(imageBytes);
            unityWebRequest.uploadHandler.contentType = "application/octet-stream";

            yield return unityWebRequest.SendWebRequest();

            long responseCode = unityWebRequest.responseCode;     

            try
            {
                string jsonResponse = null;
                jsonResponse = unityWebRequest.downloadHandler.text;

                // The response will be in Json format
                // therefore it needs to be deserialized into the classes AnalysedObject and TagData
                AnalysedObject analysedObject = new AnalysedObject();
                analysedObject = JsonUtility.FromJson<AnalysedObject>(jsonResponse);

                if (analysedObject.tags == null)
                {
                    Debug.Log("analysedObject.tagData is null");
                }
                else
                {
                    Dictionary<string, float> tagsDictionary = new Dictionary<string, float>();

                    foreach (TagData td in analysedObject.tags)
                    {
                        TagData tag = td as TagData;
                        tagsDictionary.Add(tag.name, tag.confidence);                            
                    }

                    ResultsLabel.instance.SetTagsToLastLabel(tagsDictionary);
                }
            }
            catch (Exception exception)
            {
                Debug.Log("Json exception.Message: " + exception.Message);
            }

            yield return null;
        }
    }

    /// <summary>
    /// Returns the contents of the specified file as a byte array.
    /// </summary>
    private static byte[] GetImageAsByteArray(string imageFilePath)
    {
        FileStream fileStream = new FileStream(imageFilePath, FileMode.Open, FileAccess.Read);
        BinaryReader binaryReader = new BinaryReader(fileStream);
        return binaryReader.ReadBytes((int)fileStream.Length);
    }

Unity に戻る前に、必ず Visual Studio で変更を保存してください。
Unity Editor に戻り、[Scripts] (スクリプト) フォルダーにある VisionManager クラスと ImageCapture クラスをクリックして、[Hierarchy] (階層) パネルの [Main Camera] オブジェクトにドラッグします。

第 8 章 – ビルドする前に

アプリケーションの完全なテストを実行するには、それを HoloLens にサイドロードする必要があります。実行する前に、次のことを確認してください。

第 2 章で説明されている設定がすべて正しく設定されています。
すべてのスクリプトが Main Camera オブジェクトにアタッチされています。
Main Camera の [Inspector] (インスペクター) パネルのすべてのフィールドに適切な値が割り当てられています。
ご自分の認証キーが authorizationKey 変数に挿入されていることを確認してください。
また、VisionManager スクリプトの中に記述されているご自分のエンドポイントが正しいことと、これが "ご自分の" リージョン (このドキュメントでは、既定で "米国西部" を使用します) と一致していることも確認してください。

第 9 章 – UWP ソリューションをビルドし、アプリケーションをサイドロードする

このプロジェクトの Unity セクションに必要なすべての手順が完了したため、ここでは Unity からビルドを行います。

[Build Settings] (ビルド設定) に移動します。( - [File] (ファイル) > [Build Settings...] (ビルド設定...))
[ビルド設定] ウィンドウで、[ビルド] をクリックします。
[Unity C# プロジェクト] をオンにします (まだオンにしていない場合)。
[ビルド] をクリックします。 Unity によって [エクスプローラー] ウィンドウが起動されます。そこで、アプリのビルド先のフォルダーを作成して選択する必要があります。そのフォルダーを作成して、「App」という名前を付けます。次に、App フォルダーを選択した状態で、[フォルダーの選択] を押します。
Unity で、App フォルダーに対してプロジェクトのビルドが開始されます。
Unity によるビルドが完了すると (多少時間がかかる場合があります)、[エクスプローラー] ウィンドウが開いて、ビルドの場所が表示されます (必ずしも最前面に表示されるとは限らないため、タスクバーを確認してください。新しいウィンドウが追加されたことがわかります)。

第 10 章 – HoloLens にデプロイする

HoloLens にデプロイするには、次の手順を実行します。

HoloLens の IP アドレスが必要になります (リモートデプロイの場合)。また、HoloLens が開発者モードになっていることを確認する必要があります。手順は次のとおりです。
1. HoloLens の装着中に、[設定] を開きます。
2. [ ネットワークとインターネット > Wi-Fi > 詳細オプション] に移動します
3. IPv4 アドレスを書き留めます。
4. 次に、 Settings に戻り、 Update と Security > For Developers に移動します。
5. [開発者モード] を [オン] に設定します。
新しいユニティビルド（アプリフォルダー）にナビゲートし、Visual Studioでソリューションファイルを開きます。
[ソリューション構成] で、[デバッグ] を選択します。
[ソリューションプラットフォーム] で、[X86]、[リモートコンピューター] を選択します。
[ビルド] メニューに移動して [ソリューションの配置] をクリックします。これでアプリケーションが HoloLens にサイドロードされます。
これで、作成したアプリが HoloLens のインストール済みアプリ一覧に表示され、起動できる状態になります。

Note

イマーシブヘッドセットにデプロイするには、[Solution Platform](ソリューションプラットフォーム)を[Local Machine](ローカルコンピューター)に設定し、[Configuration](構成)を [Debug](デバッグ) にし、プラットフォームとして x86 を設定します。次に、[ビルド] メニューの [ソリューションの配置] を選択してローカルコンピューターにデプロイします。

完成した Computer Vision API アプリケーション

おめでとうございます。Azure Computer Vision API を利用して現実世界のオブジェクトを認識し、見つかったものの信頼度を表示する Mixed Reality アプリを構築しました。

ラボの結果

ボーナス演習

演習 1

Tags パラメーター (VisionManager 内で使用されている endpoint の中にあります) を使用したのと同様に、アプリの機能を拡張してその他の情報を検出してください。アクセスできるその他のパラメーターについてはこちらをご覧ください。

演習 2

Azure から返されたデータを、会話らしく、読みやすく表示してください。数値を非表示にするとよいでしょう。ボットがユーザーに話しかけているというイメージです。

次の方法で共有

HoloLens (第 1 世代) と Azure 302 - コンピュータービジョン

デバイスサポート

前提条件

開始する前に

第 1 章 – Azure portal

第 2 章 – Unity プロジェクトを設定する

第 3 章 – メインカメラのセットアップ

第 4 章 – ラベルシステムを設定する

第 5 章 – ResultsLabel クラスを作成する

第 6 章 – ImageCapture クラスを作成する

第 7 章 – Azure と画像分析を呼び出す

第 8 章 – ビルドする前に

第 9 章 – UWP ソリューションをビルドし、アプリケーションをサイドロードする

第 10 章 – HoloLens にデプロイする

完成した Computer Vision API アプリケーション

ボーナス演習

演習 1

演習 2

その他のリソース

次の方法で共有

HoloLens (第 1 世代) と Azure 302 - コンピューター ビジョン

デバイス サポート

前提条件

開始する前に

第 1 章 – Azure portal

第 2 章 – Unity プロジェクトを設定する

第 3 章 – メイン カメラのセットアップ

第 4 章 – ラベル システムを設定する

第 5 章 – ResultsLabel クラスを作成する

第 6 章 – ImageCapture クラスを作成する

第 7 章 – Azure と画像分析を呼び出す

第 8 章 – ビルドする前に

第 9 章 – UWP ソリューションをビルドし、アプリケーションをサイドロードする

第 10 章 – HoloLens にデプロイする

完成した Computer Vision API アプリケーション

ボーナス演習

演習 1

演習 2

その他のリソース

HoloLens (第 1 世代) と Azure 302 - コンピュータービジョン

デバイスサポート

第 3 章 – メインカメラのセットアップ

第 4 章 – ラベルシステムを設定する