AROWを使った位置情報のアプリ開発（ハンズオンみたいなやつ）


<img width="300" src="https://connpass-tokyo.s3.amazonaws.com/thumbs/df/5f/df5f8ec738861ca284bb2cce3a00a7ce.png">
**++注意++**
この記事は、[Unity Fukuoka 14](https://unityfukuoka.connpass.com/event/129962/)のセッション『**AROWを使った位置情報のアプリ開発（ハンズオンみたいなやつ）**』の資料になります。



## 概要

**アプリ開発**と言ってもAROWをどう活用するかは、開発するアプリケーションのサービス内容によって使い方が変わります。

今回は、AROWの[公式チュートリアル](https://arow.zendesk.com/hc/ja/sections/360004094591-チュートリアル)やAROWが組み込まれたゲーム「[アニマルランランド](https://github.com/drecom/AnimalRunLand)」などを参考に、各ステップごとにAROWを解説していきます。

本セッションの目的は、**AROWの使い方を知り、AROWを活用したアプリ開発ができるようになる**となります。


### 環境

- macOS Mojave（ver.10.14）
- Unity 2019.1.0f2
- AROW [ver.0.1.2](https://www.facebook.com/permalink.php?story_fbid=384324262190472&id=266389430650623&__xts__%5B0%5D=68.ARATpMZFGIoM10Oklr22eacLQaNBXP8eRGXXgosHEbrv-4UMK7GSFVWmixQcZ1HwS-Hz0W6ZotAo6SksolIAo0X6FvWIzV3FSOoCy6tygpbw1ul6S22qk6O-gMDz0YKmndRWVzB_fIsfrEOLJoceB-3o6N7_jxuTW_rrrm2Uz9mK9njWT5-l3J9epQxruyfeDxw7HydckxwsYH00iYnH8bssIoSZip3wyIqEccHzbxwI9cXDpl52YnzCSYbDxaD3Jii02kIG_ep8xuB3kC9BkQbQt0rDU7a9qpnhtWy18C6vcIvP_x_6o_O64zgSgRtfEIkypFVy8xavQrwyWRsZd9E&__tn__=-R)


## ステップ１：AROW SDKについて

[AROWのサイト](https://arow.world/)にアクセスし新規登録画面へ進む
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/84316bea-59e2-652d-71e0-308037a9c6f7.png">

[新規開発者登録（無料）](https://arow.world/ja/signup)を済ませてデベロッパーアカウントを作成
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/be5cc786-4543-922a-360a-2956664cc725.png">

[AROW SDKのダウンロード](https://arow.world/ja/developer/download_sdk)
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/47a9c050-773f-b874-fc20-1a3d5e893031.png">

### AROW SDKの導入方法

AROW SDKを解凍してUnityプロジェクトを開いた状態で**ArowSDK.unitypackage**をダブルクリック
<img width="410" alt="スクリーンショット 2019-06-09 12.05.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/eae9b295-f7da-99aa-9760-e0c304cb9105.png">

AROW SDKをUnityプロジェクトにImportする
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/0bb7e2a9-e184-cbcc-50fc-ec9638f49970.png">
ここでUnity 2017.xやUnity 2018.xの場合、**Scripting Runtime Version**のバージョンがデフォルトで.NET 3.5になっているためエラーが発生してしまいます。
[初回設定からサンプルの起動まで](https://arow.zendesk.com/hc/ja/articles/360026135812-%E5%88%9D%E5%9B%9E%E8%A8%AD%E5%AE%9A%E3%81%8B%E3%82%89%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AE%E8%B5%B7%E5%8B%95%E3%81%BE%E3%81%A7)の内容通りに.NET 4.xに変更することで解決します。
<img width="600" alt="スクリーンショット 2019-06-16 21.11.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/823e7ac2-282c-a735-ca12-e31d53977196.png">
<img width="600" alt="スクリーンショット 2019-06-16 21.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/ec4bf0f3-c8c1-ab0c-fe99-dee1937e1402.png">
また、サンプルを起動した時にエラーが起きるのでシーンの設定も一緒に行っておきましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/4a08e6d0-41d6-20a1-025e-d76d4186574c.png">
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/b0099a6c-898e-bfd6-983b-eee7160f07a5.png">

[公式チュートリアルのライセンス認証](https://arow.zendesk.com/hc/ja/articles/360026142992-%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E8%AA%8D%E8%A8%BC)を参考にライセンス情報の登録
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f80003da-7bcd-6b46-42fb-c1179b593180.png">

### AROWの各機能を扱うためにライセンスを発行する

[新規ライセンス発行](https://arow.world/ja/developer/license/new)ページでライセンスの説明(メモ)を記入しライセンスを発行する
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/7e4ba1f2-91c3-433f-5790-fe772a72f5d1.png">

**トークンはこのページでしか表示されません。**
発行した[ライセンス](https://arow.world/ja/developer/license)ページからでは二度とトークンを確認することはできないため、しっかり保存しておきましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/b42ca7f6-4027-056f-587d-129e39dc4f89.png">
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/18a34fd5-8719-4c93-3929-432adeb76937.png">

`Arow > Create LicenseData`をクリックして Assets/ArowOutput が作られ、その中にある**LicenseData**をクリックしInspectorから先ほど発行したライセンスのトークンをコピペする。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/8c617573-db37-1193-9a92-604ea2a2f0d7.png">


これでAROW SDKの準備が整ったので、[初回設定からサンプルの起動まで](https://arow.zendesk.com/hc/ja/articles/360026135812-%E5%88%9D%E5%9B%9E%E8%A8%AD%E5%AE%9A%E3%81%8B%E3%82%89%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AE%E8%B5%B7%E5%8B%95%E3%81%BE%E3%81%A7)の**スタートシーンからの起動**で紹介されているサンプルを触ってみると良いでしょう！


## ステップ２：POI（Point Of Interest）データ

さて、ここからは実際に3Dマップを生成しながらPOIデータを扱っていきましょう。
POIデータに関しては以下の資料に詳細が載ってあります。

<a href="https://www.slideshare.net/drecom/arow-138401703"><img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/96fc5273-e86c-ba44-0924-981c4bf60728.jpeg"></a>
資料：[AROW の紹介 〜概要編〜](https://www.slideshare.net/drecom/arow-138401703)


[公式チュートリアルのPOIデータの使い方](https://arow.zendesk.com/hc/ja/articles/360028675492-POI-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)を参考に触っていきましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/c597389e-5f66-c2a2-613e-f84b456421b5.png">

[マップデータダウンロード](https://arow.world/ja/developer/download_map)からPOIデータ（poi-jp-all.zip）をダウンロード
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/bfc08076-9e9d-d539-def7-9a98cbf5ea03.png">

### POIデータの導入と環境設定について

POIデータの実態は、**Jsonファイル内に記述されている位置情報**です。
POIデータを扱うには、このJsonファイルの内容を**AROW MAP（.arowmap）**に適応するために**ArowMapTools**が用意している各コマンドを扱います。
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/dca39147-0acf-3221-f803-41bf5fe4ddeb.png">
先ほど解凍したarow-sdkのフォルダ内にあるMapPackage.zip を解凍。
MapPackage/README.md の内容にしたがって事前設定を行う。
2019/6/6にリリースされたAROW SDK ver.0.1.2時点のREADME.md（一部）は以下の内容になっている。
<img width="617" alt="スクリーンショット 2019-06-09 18.27.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/e64b5fc6-1d27-9941-b6a7-c9493b3057b8.png">

```
# 概要

OpenStreetMap のデータを AROW で利用可能な形式にするなど、マップデータを編集するツール群です。

# 動作確認環境

- Unity Editor v2017.4.25f
- dotnet 2.2.300
  - [.NET Core の Build Apps](https://dotnet.microsoft.com/download)

windows, mac で確認しています。

# 利用例

それぞれの環境で実行可能ファイルをビルドし、利用します。

## Windows

### 事前設定

`ArowLibrary/ArowLibrary.csproj`, `ArowMapTools/ArowMapTools.csproj` に UnityEngine.dll への参照を追加します。

それぞれテキストエディタで開き、
`<HintPath>UNITY_APP_PATH\Contents\Managed\UnityEngine.dll</HintPath>` となっている場所を
`<HintPath>C:\Program Files\Unity\Hub\Editor\2017.4.25f1\Editor\Data\Managed\UnityEngine.dll</HintPath>` のように編集します。

### ビルド・実行

$ dotnet publish -c Release -r win-x64

$ ./ArowMapTools/bin/Release/netcoreapp2.1/win-x64/ArowMapTools.exe -m {コマンド} [-i 入力ファイル] [-o 出力ファイル]

## Mac

### 事前設定

`ArowLibrary/ArowLibrary.csproj`, `ArowMapTools/ArowMapTools.csproj` に UnityEngine.dll への参照を追加します。

それぞれテキストエディタで開き、
`<HintPath>UNITY_APP_PATH\Contents\Managed\UnityEngine.dll</HintPath>` となっている場所を
`<HintPath>/Applications/Unity/Hub/Editor/2017.4.25f1/Unity.app\Contents\Managed\UnityEngine.dll</HintPath>` のように編集します。

Mac では以下のようにコマンドからも編集できます。

$ # プロジェクトが参照する Unity.app の場所を設定します。
$ make -f Makefile_for_mac unity_setting UnityDirectory=/Applications/Unity/Hub/Editor/2017.4.25f1/Unity.app

### ビルド・実行

$ make -f Makefile_for_mac build

$ ./ArowMapTools/bin/Release/netcoreapp2.1/osx-x64/publish/ArowMapTools -m {コマンド} [-i 入力ファイル] [-o 出力ファイル]

# 有効なコマンド一覧
## AddArowMap

二つの arowmap ファイルを一つにまとめる。

## AddPoiToBeefMap

POI データを aromwap ファイルに追加する。

## ConvertGsiBldToArowMap

国土地理院の建物データを arowmap ファイルに追加する。

## ConvertRoad

道データから不要な情報を取り除いて整形を行う。

...etc
```

`ArowLibrary/ArowLibrary.csproj`と`ArowMapTools/ArowMapTools.csproj`を[Atom](https://atom.io/)や[VSCode](https://code.visualstudio.com/)などのテキストエディタで開いて**HintPath**タグ内のパスを削除し、README.mdにしたがって**UnityEngine.dll**のフルパスに変更する。
<img width="822" alt="スクリーンショット 2019-06-09 18.47.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/e541e052-a3d9-ecee-d22b-50bd1e1b18a9.png">
<img width="821" alt="スクリーンショット 2019-06-09 18.47.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2a3f5aec-e569-1df8-cb4b-a990069fa458.png">
Unity.appを選択して右クリックから**パッケージの中身を表示**をクリック
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2da372c0-80ca-9098-e64f-1784efaf1209.png">
**MapPackage**のフォルダをエディターで開いておくと作業しやすいです。
<img width="999" alt="スクリーンショット 2019-06-09 19.55.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/45657f4e-248f-55f6-7a5a-6e8814fc5744.png">
<img width="998" alt="スクリーンショット 2019-06-09 19.55.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/06595e96-090d-8bfe-467f-96ddc1790652.png">
`VSCodeだと上記のままツールバー > 表示 > ターミナル`をクリックし、VSCode上で**ビルド・実行**の内容（`$ make -f Makefile_for_mac build`）を実行することができます。
その他は環境に応じてCLI作業ができるツールを立ち上げて実行しましょう。
<img width="1493" alt="スクリーンショット 2019-06-09 19.53.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/d23ace85-8fda-a94a-a63b-0b7b69c58040.png">
### 注意
間違いやすい（最初間違えてましたw）のが、**UnityEngine.dll**ではなく**UnityEditor.dll**になっていると`$ make -f Makefile_for_mac build`のときに以下のようにエラーになるためご注意ください。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/68e00afb-89f6-199c-96e5-b97d7125c52f.png">
<img width="1493" alt="スクリーンショット 2019-06-09 19.46.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/2bdd3b50-0a30-9f5f-0fd8-26e5241fb695.png">
ちなみに余談ですが、通常、Unityは１つのバージョンだけインストールしていると思いますが、Unityでのアプリ開発では複数のバージョンでビルド・動作の確認を行うことが一般的になってきた（2017.x/2018.x/2019.xと各バージョンのUnityが増えてきたためである）ため、**Unityのバージョンは複数インストールしておくことをオススメ**します。
<img width="413" alt="スクリーンショット 2019-06-09 19.45.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/f57701f5-7b33-e293-ce5a-e67e1b02f3f8.png">

さて、チュートリアルに戻ってPOIデータとAROW MAPの準備をしましょう。
<img width="400" alt="スクリーンショット 2019-06-09 20.20.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/40f654bf-69db-fc76-5e87-48c8e4786e2b.png">
Unityプロジェクトの``Assets/StreamingAssets``を開いてに**convenience_store.json**をドラッグ&ドロップしImportする。今回は、チュートリアルに従っていきますが、もし他のAROW MAPを使いたい場合は、[マップデータダウンロード](https://arow.world/ja/developer/download_map)のページから特定の地域のAROW MAPをダウンロードしImportしてください。

普段からUnityでアプリ開発をしている人は気づいていると思いますが、**必ずしもStreamingAssetsにPOIデータとAROW MAPを管理しなくても良い**です。
POIデータをStreamingAssetsで管理しているのは、あくまでサンプルコード側の設計がStreamingAssetsにPOIデータがある前提で作られているため、実際にアプリ開発する際は、サーバからPOIデータをダウンロードしてインポートするような設計が考えられます。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/d618221f-ce46-5aac-350c-88a6c1d2234a.png">
また、POIデータとAROW MAPを一緒に扱う際には、結合する必要があり、先ほど実行した`$ make -f Makefile_for_mac build`の後に続き、チュートリアル通り以下のように**AddPoiToBeefMap**コマンドを実行する。
POIデータとAROW MAPが統合されたデータ**shibuy.arowma**を``Assets/StreamingAssets``にドラッグ&ドロップして上書きしましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/762aaf64-2297-2393-be09-6060d3ab852f.png">

### POIデータを統合したAROW MAPを実行して確認する

上記のコマンドで生成された**shibuy.arowmap**を実行して確認するには、[ローカルサーバを用いてサンプルを起動](https://arow.zendesk.com/hc/ja/articles/360026432571-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%90%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%92%E8%B5%B7%E5%8B%95)のチュートリアルで確認ができます。

`ツールバー > Arow > Local Server > Open Config`をクリックして、Portは変えずに**Server Root Path**の設定内容を**Select Server Root Path**からフォルダー指定でフルパスに設定しましょう。
<img width="600" alt="スクリーンショット 2019-06-15 16.34.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/6bdf835c-b935-d97c-b034-c6aaaf977f39.png">
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cb19f9a8-007e-fa24-93a3-9c558ec78b7e.png">
<img width="450" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/506c9f3d-04fc-67de-d649-4f0e22bfcd58.png">
これで準備ができたのでローカルサーバーを起動して、**shibuy.arowmap**を実行して確認してみましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/71fda28f-aec0-c931-77e8-620ca47109b3.png">
**_StartScene**をPlayして**AROW MAP**をクリック
<img width="600" alt="スクリーンショット 2019-06-15 18.27.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/e5a0976d-50cc-fb8c-d8d5-607659a13eae.png">
**shibuy.arowmap**をクリック
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/0942037c-387c-0730-7972-99d216c16681.png">
変な表示になっている際は、**Camera Reset**をクリックするとキャラクターがカメラの目の前に表示されるため、**建物の自動生成**をクリックすると**shibuy.arowmap**のモデルデータが表示されます。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/031ffa6f-64e5-ab50-d098-522b2aafc6f7.png">

ですが、残念ながらこのサンプルでは**convenience_store.json**の適応内容を確認することができません。このサンプルでは、AROW MAPを表示させてキャラクターを動かしてAROW MAPを確認するぐらいまでとなります。

もし、特定のPOIデータのモデルを変えたい場合は、**ArowMapObjectModelにPOIデータが管理されている**みたいなので、現状のバージョンだと各リストの中身を読み、特定のPOIデータに位置するモデルを変更するソースコードを書く必要があります。
<img width="600" alt="スクリーンショット 2019-06-16 14.39.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cee810e3-958b-e925-fbb9-9acce1ca53e5.png">
※[AROW - リファレンス](http://reference.arow.world/current/)

次回以降のアップデートでこのモデルの差し替え機能が実装されるとのことなのでやる必要は無いですが、ライブラリなどの中身を知ることは大事なので時間があればやってみると良いでしょう！

## ステップ３：アニマルランランドについて

<img width="300" src="https://github.com/drecom/AnimalRunLand/blob/master/README_images/animal_runland_logo.png?raw=true"><img width="300" src="https://github.com/drecom/AnimalRunLand/blob/master/README_images/animal_runland_image.png?raw=true">
[アニマルランランド](https://github.com/drecom/AnimalRunLand)は、以下のエラーのようにUnity 2019.xには対応できていないため、サポートされているUnity 2017.4.5f1で開きましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/eaea33a1-05c2-bf80-d326-2329accbe187.png">
環境設定時に使用する[dockerをインストール](https://docs.docker.com/install/)しておきましょう。
ところが環境の用意の際に`$ docker-compose up -d --build`を実行するとエラーが発生しました。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82601/cfb1e1d2-687e-c5da-df37-ed066e977be1.png">
どうも最近起きている事象らしい。
[debian(jessie)のdocker image使ってるとapt-getでエラーが出る](https://qiita.com/rh_taro/items/40373a30ead444ae9ca7)

## さいごに

各イベントでAROWチームのエンジニアが登壇してその時の資料を[slideshareにアップ](https://www.slideshare.net/drecom)しているようなので何かの参考にされてください。

また、各SNSで情報発信をやっており、SNSからでも問い合わせ対応できるようですが、[公式のコミュニティページ](https://arow.zendesk.com/hc/ja/community/topics)があるのでそちらから問い合わせの内容を詳細に連絡すると良いでしょう。

- [Facebook - AROWグループ](https://www.facebook.com/AROW-266389430650623/)
- [Twitter - @AROW3dmap](https://twitter.com/AROW3dmap)