MR and Azure 305:Azure Functionとストレージ

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

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

開発環境は以下の通りです。
・Windows
・Unity 2017.4.11f1
・visual studio2017
・HoloLens

目標はAzure FunctionとAzure Storageを利用して、HoloLens上で様々な図形を作り出すアプリを作ることです。それではさっそく始めて行きましょう!

 

0.準備


ステップ1. Azure Storage Accountを作る。
ステップ2. Azure Functionを作る。

ステップ1
1. Azure Portalにログインします。

2. [リソースの作成]からstorage accountを検索します。下のようなアイコンを選択します。

3. storage accountの説明文が書いてある画面にスライドするので、[作成]をクリックします。

4. いろいろな情報を入力する画面になりますので、適当に入力していきます。
デプロイモデル : Resource Model
アカウントの種類 : Storage(汎用v1)
レプリケーション : 読み取りアクセス地理冗長ストレージ(RA-GRS)
パフォーマンス : Standard
安全な転送が必須 : 無効

入力し終わったら[確認および作成]をクリックします。入力した情報が有効であれば検証に成功して確認画面がでてきますので[作成]をクリックします。※下は例です

5. お知らせタブを開きます。デプロイが終了したら[リソースへ移動]します。

6. [アクセス キー]へ入り、接続文字列を確認します。これは後ほど使います。

ステップ2
1.[リソースの作成]からFunction Appを検索します。下のようなアイコンが出てきたらそれを選択します。

2. Function Appの説明文が書いてある画面にスライドするので、[作成]をクリックします。

3. 様々な情報を入力する画面になるので、入力していき、入力が完了したら[作成]をクリックします。ここでデプロイが始まります。

4. お知らせタブを開きます。デプロイが終了したら[リソースへ移動]します。

5. [関数]の横の➕から新しい関数を作成します。

6. 関数の種類を選択します。ポップ画面が現れるので順に選択していき、[作成]します。

7. [HttpTrigger1]が追加されているのがわかると思います。これを選択し、コードを書き換えて[保存]し[</>関数のURL の取得]をクリックします。URLの画面がポップされるのでこれをメモしておきます。
コード

 

1.Unityの設定


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

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

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

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

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

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

続いて、[Unity C#]にチェックを入れます。

3. Sceneの保存
[Add Open Scenes]をクリックし、[新しいフォルダー]からScenesと名前をつけて、この中にFunctionSceneとして保存します。

[Build Settings..]の変更は以上です。

4. パッケージのインポート
まず、Azure-MR-305.unitypackageをダウンロードします。[Assets]->[Import Package]->[Custom Package]をクリックします。ダウンロードしたAzure-MR-305.unitypackageをフォルダの中から探し選択し、[Import]をクリックします。

5. インポートした中身を確認する。
・Microsoft.Data.Edm
・Microsoft.Data.OData
・Microsoft.WindowsAzure.Storage
・Newtonsoft.Json
・System.Spatial
の中身を確認していきます。Editor,Standalone,WebGLにチェックを入れそれ以外のチェックを外し、[Apply]をクリックします。

続いて ・Microsoft.Data.Services.Clientの中身を確認していきます。Any Platform,Don’t process にチェックを入れそれ以外のチェックを外し、[Apply]をクリックします。

 

2.カメラ、シーンの編集


まず[Hierarchy]->[Main Camera]の[Inspector]を編集していきたいと思います。
Transform
—————————————-
Position  | X : 0 | Y : 1 | Z : 0
—————————————-
Rotation | 全て0
—————————————-
Scale      | 全て1
—————————————-

続いてシーン内に以下の二つのオブジェクトを配置していきます。
・土台(Plane)
・Gaze Button(Cube) これは様々な物体を生み出すためのトリガーとなります。

1. 土台を配置する。
a. [Hierarchy]パネルの何もないところで右クリックし、[3D Object]->[Plane]を選択します。

b. 今作った[Plane]の[Inspector] を編集していきます。
Transform
—————————————–
Position   | X : 0  | Y : 0   | Z : 4
—————————————–
Rotation  | 全て0
—————————————–
Scale       | X : 10 | Y : 1 | Z : 10
—————————————–

2. Gaze Buttonを配置する。
a. [Hierarchy]パネルの何もないところで右クリックし、[3D Object]->[Cube]を選択します。

b. 今作った[Cube]の[Inspector] を編集していきます。
Transform
—————————————-
Position  | X : 0 | Y : 3 | Z : 5
—————————————-
Rotation | 全て0
—————————————-
Scale      | 全て1
—————————————-

TagがUntaggedとなっていますので、[Add Tag..]からタグを追加します。名前はGazeButtonとします。このままではタグが追加されただけなので、再びタグを選択リストを選び先ほど追加したGazeButtonを選択します。

c. 今作ったCubeの名前をGazeButtonと変更し、この中に子オブジェクトとして[Empty GameObject]を追加します。またこの名前をShapeSpawnPointとします。これは様々な図形を生成する際の位置となります。この[Inspector]を編集していきたいと思います。
Transform
—————————————-
Position   | X : 0 | Y : -1 | Z : 0
—————————————-
Rotation  | 全て0
—————————————-
Scale       | 全て1
—————————————-

d. GazeButtonの子オブジェクトとして[3D Object]->[3D Text]としてテキストを作り、名前をAzureStatus Textとします。これは、現在のステータスを表示するのに使います。この[Inspector]を編集します。
Transform
——————————————-
Position  | X : 0 | Y : 0 | Z : -0.6
——————————————-
Rotation | 全て0
——————————————-
Scale      | 全て0.1
——————————————-

Text Mesh

テキストの位置がおかしいと思ったら微調整しましょう。このようになっていれば大丈夫です。

 

3.スクリプトの作成


ここでは以下の4つのスクリプトを作っていきたいと思います。
・ShapeFactory
・Gaze
・AzureServices

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

・ShapeFactory
このクラスは要請があるたびに新しい図形を作ります。そして、作った図形の履歴をAzure Storageに保存します。コードは以下のように記述します。

記述し終わったら保存してUnityの画面に戻り、このスクリプトを[Hierarchy]->[Main Camera]にD&Dします。そのあと、[Main Camera]の[Inspector]内で追加された[Shape Factory]の[Spawn Point]に[Hierarchy]内の[ShapeSpawnPoint]をD&Dします。

・Gaze
このクラスはユーザーの視線を認識するためのクラスです。Gaze Buttonを見たとき、トリガーを引きます。コードは以下の通りです。

このスクリプトも同様に[Main Camera]にD&Dします。

・AzureServices
このクラスはAzure App Functionとやり取りするためのクラスです。また、ステータスによってテキストの文字を変える役割も担っています。コードは以下の通りです。先ほど0.準備で取得した接続文字列とURLを使います。–Insert here・・・の部分に適切に接続文字列とURLを挿入していきます。

記述し終わったら保存してUnityの画面に戻り、このスクリプトを[Hierarchy]->[Main Camera]にD&Dします。そのあと、[Main Camera]の[Inspector]内で追加された[Azure Services]の[Azure Status Text]に[Hierarchy]内の[AzureStatus Text]をD&Dします。

 

4.ビルド


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

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

HoloLensで実行した時の様子です。Gazeに合わせて図形が生成されているのがわかります

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

この記事を書いた人

azure-recipe-user