CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

公式ドキュメントを元に、Azure Spatial AnchorsをiOSとAndroidで試してみた

先日、Mobile World Congress (MWC)でMicrosoftよりいくつかの新発表がありました。

体験でわかった「HoloLens 2」。視野拡大と“両手で操作”が快適 - AV Watch

Introducing Azure’s augmented reality: spatial anchors | InfoWorld

発表の1つに、Azure Spatial Anchorsという仕組みがあります。これは異なるOSのデバイスでARを共有する仕組みです。ただ、セットアップだけでもそれなりに手間がかかるので、ひとまずまとめてみました。なお、以下の環境で確認しています。

クラウド(バージョン表記不明のため記載せず )
Azure Spatial Anchors Azure Cosmos DB

ハードウェア
Android9.1搭載スマートフォン
iOS 12.1.4搭載のiPhone、iPad

ソフトウェア、ライブラリ
Android Studio 3.3.1
XCode 10.1
Visual Studio 2017 (Azureで動かすAppServiceのビルドのため)
.NET Core SDK 2.2.104
Azure Apatial Anchors Sample code(v1.0.1)

1. Azure Spatial Anchorsとは?

異なるOSのデバイス間でAR情報を共有する仕組みです。

Concept image of Azure Spatial Anchors

引用元:Azure Spatial Anchors overview | Microsoft Docs

イラストのように、HoloLensだけでなく、スマートフォン、タブレットも対応しています。また、Windowsに限定しません。以前紹介したGoogleによるCloud Anchorsと考え方は同じです。

【ARCore1.2.0版】iPhoneとAndroidスマートフォンでCloud Anchorの環境構築をしてみました - CrossRoad

つまり、HoloLens、iOS・Androidデバイスがそれぞれ空間内の特徴点を取得し、その特徴点をクラウド側が解析、共有するというものです。

2. チュートリアルページのどこを読めば良いか?

Spatial Anchors Documentationというページをみると、このような構成になっています。

Directory of Azure Spatial Anchors Portal

Quick StartとTutorialには、Azureの初期設定と各OSのサンプルコードビルドの方法が書いてあります。どちらもほほ同じが書いてありますが、QuickStartには、Azureをサーバとして設定する方法が書いてません。

そのため、試すにはTutorialというページをみるのがよいことになります。しかし、Tutorialページに書かれているUnityを使った方法では、iOS、Androidともにアプリの挙動がおかしくて検証できませんでした。 QuickStartには、Azureのサーバとして使う設定手順が書いてありませんが、ソースコードを読んで該当しそうな所に入れたら動きました。

ということで、Quick Startをベースにやり方を解説します。

3. QuickStartをベースにした環境構築

3.1 Azure

3.1.1 Azure Portalとは?

Azure Portalから設定をしていきます。Azure Portalは、Microsoft Azure(クラウドストレージだけでなく、データベース、Webサーバ的なことができます)を使うための設定・管理にデベロッパーごとに用意されたWebサイトです。

Azure Portalはsubscription契約が必要です。アカウント作成や、一定時間までの利用は無料ですが、それを超えた場合や利用データ量によってお金がかかることがあります。

Azure の無料アカウントを今すぐ作成しましょう | Microsoft Azure

私はMVP特典で利用しているので通常時の金額が把握できていません。もし不安な方は別途確認することをお勧めします。

3.1.2 Spatial Anchors resourceの生成

下記のページに書いてある「Create a Spatial Anchors resource」の手順通りに進めます。

Tutorial - Sharing across sessions and devices with Azure Spatial Anchors and an Azure Cosmos DB back-end | Microsoft Docs

ここは特に難しいことはないので説明は省略します。

なお、Azure Spatial AnchorsのDocumentationには、Spatial Anchors resourceの説明が複数箇所で書かれています。どこを見てもよいですが、このページには、この後サーバ設定まで書いてあるので、ここを参照するのが効率的です。

3.1.3 Sharing Anchors Serviceのデプロイ

上記で設定したAnchor ServiceをWebサービスとして使えるようにします。

Tutorial - Sharing across sessions and devices with Azure Spatial Anchors | Microsoft Docs

同じページの「Deploy your Sharing Anchors Service」の手順通りに進めます。 ここではAzure Portalではなく、Visual Studio2017だけですすめます。事前にいくつかインストールが必要です。

(1) .NET Core SDK 2.2.104

ここからダウンロード、画面の指示に沿ってインストールします。

.NET Downloads for Linux, macOS, and Windows

(2) Visual Studio 2017の追加コンポーネント

設定 / アプリと機能 / Visual Studio Installer を開いて、「変更」を選択します。追加コンポーネントをインストールできる画面が出るので「個別コンポーネント」を選択して、「ASP.NET and web development」をインストールします。

ここまで終わったら、Githubからサンプルプロジェクト一式(HoloLens、iOS、Androidのプロジェクトも一緒に入ってます)をダウンロードします。

GitHub - Azure/azure-spatial-anchors-samples: Azure Spatial Anchors sample code

Visual Studio2017で「SharingService.sln」を開いて、AppServiceをpublish(発行)します。「発行」のウインドウを出す手順は下記の1,2,を参照ください。

How to open publish window at Visual Studio2017

「発行」をクリックして進めていくと、AppServiceを作る画面が出てきます。

Create new AppService display in Visual Studio 2017

数分かかりますが、手順通りに進めるとURLが割り当てられ、自分のブラウザでこのような画面が起動します。

Screenshot of appService is completed

引用元:Tutorial - Sharing across sessions and devices with Azure Spatial Anchors | Microsoft Docs

割り当てられたURLはこのようになります。

html https://<app_name>.azurewebsites.net

3.2 Android

gitで下記のURLをクローンするか、このページにブラウザからアクセスして、Zipでダウンロードします。

$ git clone https://github.com/Azure/azure-spatial-anchors-samples.git

ここではzip取得した場合で説明します。Android Studioを開き、取得したフォルダの"azure-spatial-anchors-samples / Android "を開きます。

Android Studioで開くと、いくつか警告が出ることがあります。この場合、基本的にYesで大丈夫です。

Unable to get Gradle wrapper properties from のエラーが出た場合 Error example of Unable to get Gradle wrapper properties from

Android Gradle Plugin Update Recommendedが出た場合 Android Gradle Plugin Update Recommended

また、Android Studioでは、Gradleによって自動ビルドのような動きをします。初回はGradleが完了するまで5分程度かかりました。

Androidの実機にデプロイする前に、いくつかコードを修正します。まず、AzureSpatialAnchorsActivity.javaを開いて、下記の2箇所にAzure PortalのAzure Spatial Anchorsで作ったIDとKeyをいれます。

    // Set this string to the account ID provided for the Azure Spatial Service resource.
    private static final String SpatialAnchorsAccountId = "set me"; // ここにID文字列を入れる

    // Set this string to the account key provided for the Azure Spatial Service resource.
    private static final String SpatialAnchorsAccountKey = "set me"; // ここにKey文字列を入れる

続けて、Shared.javaを開いて、下記にAzurePortalにデプロイされたAppServiceのURLをいれます。

    // Set this string to the URL created when publishing your Shared anchor service in the Sharing sample.
    private static final String SharingAnchorsServiceUrl = "https://<myname>.azurewebsites.net/api/anchors";

これができたら、AndroidスマートフォンとPCをUSBケーブルで接続して、アプリを実機にデプロイします。ここの"Deploy the app to your Android device"に書いてある通り、Android Studioの上側のバーに再生ボタンのようなアイコンがあるので、これを選択すると、接続されているデバイスが表示されるのでOKを押せばデプロイできます。

3.3 iOS

Androidのときと同様にgithubに公開されているリポジトリを入手します。

$ git clone https://github.com/Azure/azure-spatial-anchors-samples.git

iOSというフォルダを選択します。Objective-CとSwiftの2種類がありますが、どちらでも変更箇所は同様です。ここではSwiftで説明します。

Android Studioのときと異なり、XCodeを起動する前に、podというフレームワークをインストールする必要があります。

$ cd ./iOS/Swift/
$ pod install --repo-update

pod : command is not foundが出た場合、まずはpodをインストールします。

$ sudo gem install cocoapods

環境によりますが、私の場合は5分程度かかりました。これが完了したらbash $ pod install --repo-updateが使えます。初回は50分ほどかかりましたが、2回目以降(SwiftではなくObjective-Cプロジェクトを開くときなど)は1分もかかりませんでした。

XCodeのプロジェクトの開き方も少し変わっていて、同じディレクトリの中でbash open ./SampleSwift.xcworkspace を実行するか、SampleSwift.xcworkspaceをダブルクリックして開きます。

ViewController.swiftの下記の2箇所に、Azure PortalのAzure Spatial Anchorsで作ったIDとKeyをいれます。

    // Set this to the account ID provided for the Azure Spatial Service resource.
    let SpatialAnchorsAccountId = "Set me" //ここにIDを入れる
    
    // Set this to the account key provided for the Azure Spatial Service resource.
    let SpatialAnchorsAccountKey = "Set me" //ここにkeyを入れる

Objective-Cの場合、ViewController.mの下記の2箇所についてIDとKeyをいれます。

// Set this to the account ID provided for the Azure Spatial Service resource.
NSString *const SpatialAnchorsAccountId = @"Set me"; //ここにIDを入れる

// Set this to the account key provided for the Azure Spatial Service resource.
NSString *const SpatialAnchorsAccountKey = @"Set me"; //ここにKeyを入れる

XCodeからデプロイすると、iOSアプリが起動します。ここではAndroidのときのようなShared.java相当が見つからず、自分のAppServiceのURLをいれてないのですが、なぜかAzure PortalではiOSアプリ上でアンカーを作るたびにログが増えていました。

4. 動作確認

iOSとAndroidで起動しましたが、それぞれ挙動が異なっていました。色々試しているうちに、このような違いがあることがわかりました。

Support feature in iOS and Android app of Azure Spatial Anchor

4.1 iOS

Start Nearby DemoとStart Basic Demoの2種類を選ぶことができますが、なぜかどちらも動きは同じでした。はじめに周辺のスキャンをするようメッセージが出ます。

進捗が100%を越えると、アンカーを設置し、見つけることができるようになります。画面の変化は下記の通りです。

Progress of Azure Spatial Anchor in iOS app

ただし、Android側で設置したAnchorを見つけることはできず、あくまで自分自身で設置したAnchorを見つけるだけでした。

4.2 Android

Local Only DemosはiOSと同様です。Shared Demoを試したいのですが、iOSでは対応していないので、別のAndroid端末かHoloLensが必要になりそうです。

5. トラブルシューティング

5.1 テンプレートのデプロイメントが失敗しました。"Cannot find serverFarm with name " というエラーが出てデプロイができない

同じResourceGroupの中で、AppService、Azure Anchors、(もし使っている場合はCosmosDBも)を作っていないことが原因です。チュートリアル通りに進めるとこのようなことは発生しづらいですが、検討中にAzureAnchorだけ別の名前で作りなおそう、のようなことをしていると発生します。

5.2 iOSアプリを起動すると、Set SpatialAnchorsAccountId and SpatialAnchorsAccountKey in ViewController.swift というメッセージが表示される

Set Error message of SpatialAnchorsAccountId and SpatialAnchorsAccountKey in ViewController.swift in Azure Spatial Anchor iOS application

下記のどちらかのSet meに、IDとKeyの正しい文字列を入れると発生します。"Set me"と書いているのに、なぜこういう分岐が書かれているかはわかりませんが、ここに書くとその先の処理が進まなくなります。ここは何もいれなければ回避できます。

        if (SpatialAnchorsAccountId == "Set me" || SpatialAnchorsAccountKey == "Set me")
        {
            _button!.isHidden = true
            _nearbyChoice!.isHidden = true
            _errorControl!.isHidden = false
            showLogMessage(text: "Set SpatialAnchorsAccountId and SpatialAnchorsAccountKey in ViewController.swift", here: _errorControl)
        } 

6. おわりに

XcodeとAndroid Studioだけで作ると、iOSとAndroidアプリの挙動が異なっており、このままでは共有できるかは不明なままです。HoloLensを追加するか、別のAndroid端末を手に入れることができたら、また検証したいと思います。