【Unity】UnityインストールからARアプリ作成まで(iOS, Android)【Vuforia】

# UnityとVuforiaを使用してARサンプルアプリを作る

## 開発環境

- macOS High Sierra 10.13.3
- Unity 2018.1.1f1 Personal
- XCode 9.4
- Android Studio 3.0.1

## Unityインストール

![スクリーンショット 2018-06-04 16.55.22.png](https://qiita-image-store.s3.amazonaws.com/0/186189/e2136ef6-77a5-ff53-1f38-a4de9ea24887.png)

[Unity公式ページ](https://unity3d.com/jp)からアカウントを作成し、最新版を入手する。

<img width="512" alt="vuforia.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/4fef0a55-509d-a843-1a86-2d10c1ad060c.png">

基本的にはインストールガイドに従って貰えば問題ないが、Vuforiaの項目があるので忘れずにチェックすること

## プロジェクト作成

![スクリーンショット 2018-06-04 17.02.25.png](https://qiita-image-store.s3.amazonaws.com/0/186189/94791d5e-5781-09eb-9552-332a69b607e4.png)

Unityを起動後、Newを選択してプロジェクトを作成する。
今回はsampleというプロジェクト名で進めていく。

![スクリーンショット 2018-06-04 17.06.42.png](https://qiita-image-store.s3.amazonaws.com/0/186189/41cf4c62-816a-6000-4cc5-c322737e8a7d.png)

無事作成が完了すると、上記の画面が表示される。

## vuforiaの設定

vuforiaはQualcommにより提供されているAR開発をサポートするライブラリ。
今回はこれを使用してAR開発を行う。

### アカウント作成
[vuforia Developer Portal](https://developer.vuforia.com/)からアカウントを作成して、ログインする。

### Development Key 発行
vuforiaを使用してARアプリをテストする際に必要となる。
![スクリーンショット 2018-06-04 17.18.31.png](https://qiita-image-store.s3.amazonaws.com/0/186189/87fe0d3e-edc4-6701-0d68-44994610c5d3.png)

Develop > License Manager > Get Development Key から、App Nameを入力し、同意後にを決定ボタンを押下。

![スクリーンショット 2018-06-04 17.22.41.png](https://qiita-image-store.s3.amazonaws.com/0/186189/219ed514-a121-2c90-4c07-fe26c0f1602a.png)

上記の用に作成されるので、リンクをクリックしてLicense Keyを確認することができる。

![スクリーンショット 2018-06-04 17.27.10.png](https://qiita-image-store.s3.amazonaws.com/0/186189/095cb58c-d625-a4fd-23c9-4f7d7f12af6c.png)

License Keyは後ほどUnityにて使用するため、メモしておくこと。

### マーカーの登録

アプリにて認識する際のマーカーの登録をvuforiaにて行う。

![スクリーンショット 2018-06-04 17.30.44.png](https://qiita-image-store.s3.amazonaws.com/0/186189/4ffb8d66-ef6c-d58b-8678-dcd948613b3d.png)

Develop > Target Manager > Add Database から、マーカーを管理するDatabaseを作成。
作成後、リンクをクリックすることでマーカーの登録を行う。

![スクリーンショット 2018-06-04 17.40.18.png](https://qiita-image-store.s3.amazonaws.com/0/186189/27ff0f20-ae82-bb15-2838-bbc8030a132a.png)

Add Targetから、マーカーとして登録したい画像を選択する。
widthは適当に100とかにしておく。
Addボタン押下で登録完了。

![sample.jpg](https://qiita-image-store.s3.amazonaws.com/0/186189/d99b23c5-aceb-9ac2-e3e6-867139ef3e65.jpeg)

今回は上記マーカーを登録した。

![スクリーンショット 2018-06-04 17.42.25.png](https://qiita-image-store.s3.amazonaws.com/0/186189/ce99839d-7f5e-3ec4-7606-d7e823507887.png)

上記の用に追加されていることを確認できたら、チェックしてDownload Databaseを押下。

![スクリーンショット 2018-06-04 17.46.34.png](https://qiita-image-store.s3.amazonaws.com/0/186189/eb513587-1128-add4-bb16-0eaa778ce649.png)

Unity Editorを選択してDownloadボタンを押下。
```sample.unitypackage```が保存される。
こちらも後ほどUnityにて使用する。

## ARしてみる

![スクリーンショット 2018-06-04 17.51.37.png](https://qiita-image-store.s3.amazonaws.com/0/186189/776d4b1a-8260-4584-1816-d0e2bd4bac11.png)

Unityの画面に戻り、HierarchyタブのMain Cameraは今回使用しないため、削除する。

![スクリーンショット 2018-06-04 17.56.13.png](https://qiita-image-store.s3.amazonaws.com/0/186189/96b8a63c-cd55-f520-5dae-6dde21bdc509.png)

次に、下記を選択して追加する。

- ```GameObject > Vuforia > AR Camera```
- ```GameObject > Vuforia > Camera Image > Camera Image Target```

Importするか？って聞かれたらImportしておく。

![スクリーンショット 2018-06-05 9.42.53.png](https://qiita-image-store.s3.amazonaws.com/0/186189/eebbc263-7535-07f0-4aa7-4db45c1b2aa0.png)

次に表示するモデルを作成する。
今回は```GameObject > 3D Object > Cube```を使用。

![スクリーンショット 2018-06-05 9.46.27.png](https://qiita-image-store.s3.amazonaws.com/0/186189/016ecfcf-f95f-0377-1bda-3783b742f605.png)

その後、CubeをImageTargetに対してドラック&ドロップすることで、上記図のようになる。

![スクリーンショット 2018-06-05 9.50.36.png](https://qiita-image-store.s3.amazonaws.com/0/186189/6a9bfaa2-6f78-de5b-3593-8841a03ef78b.png)

次にAR使用の設定を行う。
```Edit > Priject Settings > Player```を選択する。

![スクリーンショット 2018-06-05 9.51.37.png](https://qiita-image-store.s3.amazonaws.com/0/186189/e9c016b1-d0b1-2b4f-207b-a2eade3e5e92.png)

Inspectorタブを選択し、XR Settings の Vuforia Augmented Reality Supported にチェックを入れる

![スクリーンショット 2018-06-05 9.56.03.png](https://qiita-image-store.s3.amazonaws.com/0/186189/01817c49-3e1a-7cb4-a167-0616a614f37e.png)

次にHierarchyタブのAR Cameraを選択。

![スクリーンショット 2018-06-05 9.57.25.png](https://qiita-image-store.s3.amazonaws.com/0/186189/4288f038-7f06-b3c1-aaf2-a624bd687853.png)

Inspectorタブの Vuforia Behaviour にある Open Vuforia configurationを選択。

![スクリーンショット 2018-06-05 10.01.05.png](https://qiita-image-store.s3.amazonaws.com/0/186189/d932fcea-2f57-2b61-45d8-09f7c936b83a.png)

上記図のように表示されるので、[ここ](![スクリーンショット 2018-06-04 17.27.10.png](https://qiita-image-store.s3.amazonaws.com/0/186189/095cb58c-d625-a4fd-23c9-4f7d7f12af6c.png))で取得したLicense Keyを入力する。

![スクリーンショット 2018-06-05 10.06.03.png](https://qiita-image-store.s3.amazonaws.com/0/186189/4d15e7eb-c9de-b0b2-944f-500f8aec424b.png)

次に、先ほどダウンロードした```sample.unitypackage```を開き、Importを選択。

<img width="283" alt="スクリーンショット 2018-06-05 10.27.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/e94f647b-270c-b253-0d36-3b11b2b66fb8.png">

HierarchyタブのImage Targetを選択。

<img width="293" alt="スクリーンショット 2018-06-05 10.28.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/ee1b52db-b9b1-6851-6d6e-3204a5b08712.png">

Inspectorタブの Image Target Behaviour の Type を Predefined に変更し、DatabaseとImage Targetを設定。
![スクリーンショット 2018-06-05 10.51.04.png](https://qiita-image-store.s3.amazonaws.com/0/186189/517cc1ae-f733-6368-d3f1-ee86bcbd52ab.png)

<img width="285" alt="スクリーンショット 2018-06-05 10.31.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/257d6fee-668a-d867-c179-a53c20e8789d.png">

Hierarchyタブの Cube を選択。

<img width="293" alt="スクリーンショット 2018-06-05 10.31.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/f1e15bc2-00eb-7e0f-21f9-7cfdbf819ec3.png">

Inspectorタブの Scale を全て1にする。

<img width="863" alt="スクリーンショット 2018-06-05 10.33.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/a5301ab9-cb06-b7e3-7eff-02037dd3fba9.png">

PCのカメラを起動する。
上記図にある再生ボタンを選択。

<img width="297" alt="スクリーンショット 2018-06-05 10.35.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/186189/5e8af7fe-24c7-ba25-4f84-b0b6fbd15750.png">

カメラに対してマーカーを当てることで、オブジェクトが表示される。
ARできた。

## iOSアプリの作成

先ほど作成したARをiOSアプリとしてBuildする。

![スクリーンショット 2018-06-05 10.48.16.png](https://qiita-image-store.s3.amazonaws.com/0/186189/a7ea6bb2-eeb6-3978-81fa-cbd448f65e1a.png)

```File > Build Settings```を選択。

![スクリーンショット 2018-06-05 10.51.04.png](https://qiita-image-store.s3.amazonaws.com/0/186189/56ac8ce4-22d9-c89f-f140-ea044bc09e92.png)

PlatformからiOSを選択し、Switch Platformを選択。

![スクリーンショット 2018-06-05 10.56.59.png](https://qiita-image-store.s3.amazonaws.com/0/186189/c536ca1b-58a8-3388-6631-213267e1c6bb.png)

```Edit > Project Settings > Player```を選択。

![スクリーンショット 2018-06-05 10.57.20.png](https://qiita-image-store.s3.amazonaws.com/0/186189/57b1c7cc-b730-3d60-b9c9-dca1a90ef95d.png)

Inspector タブの Settings for iOS から、XR Settings の Vuforia Augmented Reality をチェック。

![スクリーンショット 2018-06-05 10.58.42.png](https://qiita-image-store.s3.amazonaws.com/0/186189/a8513417-51c0-2e76-aeeb-bc0eb983017b.png)

次に、Inspector タブの Settings for iOS から、Other SettingsのSupported URL schemesにあるTarget minimum iOS Versionを9.0に設定する。

![スクリーンショット 2018-06-05 11.07.15.png](https://qiita-image-store.s3.amazonaws.com/0/186189/0ad431bf-f659-fc43-8d0a-312d1b4f65dc.png)

```File > Build Settings```を選択し、Buildを選択。
名前は適当につけて、Saveを選択。

![スクリーンショット 2018-06-05 11.10.05.png](https://qiita-image-store.s3.amazonaws.com/0/186189/a58c02b4-3692-45a8-7b12-52acbfdef6e7.png)

生成された。
```Unity-iPhone.xcodeproj```を開く。

![スクリーンショット 2018-06-05 11.14.05.png](https://qiita-image-store.s3.amazonaws.com/0/186189/dcc986f5-1260-db40-ff34-12e8651323c9.png)

Teamを正しく設定し、実機ビルドすることで確認することができる。

![IMG_6826.PNG](https://qiita-image-store.s3.amazonaws.com/0/186189/9493366f-fc8d-1d49-c813-76a28ddb5eb5.png)

できた。

## Androidアプリの作成