AR空間にプレゼントを贈ってみた

# はじめに
[CYBIRD Advent Calendar 2022](https://qiita.com/advent-calendar/2022/cybird)、21日目担当の@kappysanです。
現在は来年春リリースされる『[イケメンヴィラン](https://ikemen.cybird.ne.jp/cpn/villain/)』の開発を担当しています。
前回は@yuki_utsumiさんの「App Store Connectの審査情報をキャッチして通知する仕組み」でした。
一度設定してしまえばこういう通知はとても便利ですよね。先輩方が作り上げてくださった環境に感謝です。

さて、記事の内容に移ります。
以前、弊社では[NFTマーケットプレイスにてマジカルデイズのデジタルトレーディングカードを販売](https://www.cybird.co.jp/news/2022042201/)していました。
このカード、なんとAR機能で現実の風景に配置して、実際のコレクション品のように収集・鑑賞を楽しむことができたんです。推しを現実に飾れるって幸せですよね。
私はこちらの担当ではありませんでしたが、これを見てARに興味を持ち、何か作ってみることにしました。
調べたところUnityでARを利用できるAR Foundationというパッケージがあったので、今回はそれを使って遊んでいきます。

# 環境
- MacBook Pro 2019 Intel Core i7
- macOS Monterey 12.6
- Unity 2021.3.6f1
- Xcode 14.0.1
- iPhone11 iOS 15.6.1（テスト端末）

残念ながら私はAndroid端末を所持していないため、本記事はiOSでの実装のみを書いていきます。
iOSのバージョンによって必要なXcodeのバージョンが異なるので、[こちら](https://developer.apple.com/jp/support/xcode/)でチェックしておきましょう。
Xcodeのインストールは[こちら](https://qiita.com/app_tune/items/42185a691fb380b6f4b9)が参考になります。

# Unity実装
## プロジェクトの作成
Unityで3Dのプロジェクトを作成します。
プロジェクト名は「AdventCalenderAR」としておきました。
![プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/5cb7ae13-f67e-45fa-d7aa-c286fa99b62f.png)

## パッケージのインストール
必要なパッケージをインストールします。
インストールするパッケージは以下の3つです。

- AR Foundation 4.2.7
- ARKit XR Plugin 4.2.7 (iOS用)
- ARCore XR Plugin 4.2.7 (Android用)

私はAndroidは使わないので、ARCoreは入れません。
バージョンはなんでも大丈夫ですが（古すぎると使えない機能はあります）全て合わせる必要があります。

パッケージのインストールは Window > Package Manager からできます。
![Package Manager.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/4d724d8a-b8ab-3945-4cf9-abc2504dd49f.png)

PackagesをUnity Registryにし、検索窓にARと入力すれば候補に出てくると思います。
パッケージを選択し、installを押下でインストールします。
![PM検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/2102bea1-ac6b-8074-a9d9-193dcab02b45.png)

## オブジェクトの作成
以下2つのオブジェクトを作成します。
- AR Session Origin
ARカメラがついており、アプリを立ち上げた位置を原点としてARの座標を認識してくれます。
こちらに色々なコンポーネントをアタッチしていくことになります。

- AR Session
AR としての基本機能（デバイスのトラッキングや、平面の認識）を担うものです。

パッケージをインストールしていれば、HierarchyのXRから追加できるようになっています。
ARの開発では基本的にこの2つのオブジェクトが使われます。
![XRオブジェクト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/9b3a68c1-3a86-42e5-e4f3-0ffae486d43f.png)

AR Session OriginについているAR Cameraを使用するため、Main Cameraは不要です。
削除しておきます。

## コンポーネントの設定
AR Session Originオブジェクトに以下２つのコンポーネントをアタッチします。
- AR Plane Manager
平面を検出してくれます。
平面を可視化したい場合はPlane Prefabを設定しますが、今回は必要ないのでNoneのままで良いです。

- AR Raycast Manager
タップした座標を取得してくれます。

![スクリーンショット 2022-12-18 4.24.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/b78dd73f-e612-df69-4664-9260fb87cc9a.png)

## 3Dモデルの用意
出現させたい3Dモデルを用意します。
3Dのprefabなら何でも構いません。
今回はクリスマスなのでプレゼントにしましょう！
アセットは[こちら](https://assetstore.unity.com/packages/3d/props/present-60575)を使用しました。
TransformのScaleを(30, 30, 30)に、Rotationを(90, 13.4, 0)にし、RigidbodyのUse Gravityのチェックを外しておきます。

## スクリプトの作成
タップした位置にオブジェクトを出現させるスクリプトを作成します。
Unity公式が公開している[PlaceOnPlane.cs](https://github.com/Unity-Technologies/arfoundation-samples/blob/main/Assets/Scripts/PlaceOnPlane.cs)をコピーして作成します。
[PressInputBase.cs](https://github.com/Unity-Technologies/arfoundation-samples/blob/main/Assets/Scripts/PressInputBase.cs)を継承しているので、そちらもコピーして作成しておきます。
しかし、このままでは以下のようにInputSystemが見つからないエラーが発生してしまいます。

```
The type or namespace name 'InputSystem' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)
```
InputSystemのパッケージをインストールして解決しましょう。
![スクリーンショット 2022-12-18 5.00.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/a632ddc0-3b3d-cfab-cd30-16958c54faae.png)

インストールするとWarningが出るかもしれませんが、InputSystemパッケージをアクティブにするか聞かれているので、Yesを選択します。Unityが再起動されるので待ちましょう。
![スクリーンショット 2022-12-18 5.02.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/6f9ec1f5-8797-a75e-44e0-2b32fb2f539d.png)

PlaceOnPlaneスクリプトを、AR Session Originオブジェクトにアタッチします。
Placed Prefabに、先ほど用意したプレゼントのPrefabを設定しましょう。
![スクリーンショット 2022-12-18 5.12.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/293266c1-a84b-e84c-8338-39f5d20dd61f.png)

# Unityビルド
Unityでビルドします。
File > Build Settings を開き、Scenes In BuildにSampleSceneを追加します。
PlatformはiOSを選択してSwitch Platformしてください。
![スクリーンショット 2022-12-18 5.21.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/c462e3b3-5ee1-944e-bd67-7c60eb15a5a3.png)

Player Settings > Player > iOS > Other Settings にて以下のように設定します。
- Camera Usage Description : AR機能にカメラを使います。
![スクリーンショット 2022-12-18 5.34.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/c5676831-1440-5387-d69a-af2da66934cd.png)

Player Settings > XR Plug-in Management > iOS > Plug-in Providers にて以下のように設定します。
- ARKitにチェック
![スクリーンショット 2022-12-18 5.30.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/ce3dbc46-6c29-1d8a-3d91-0acfc57344df.png)

ここまできたらBuildを押下します。
ビルドするフォルダはプロジェクトフォルダと分ける必要があります。
AdventCalenderAR_iOSというフォルダを新たに作成し、そこにビルドしましょう。

# Xcodeビルド
Xcodeでビルドします。
UnityでビルドしたAdventCalenderAR_iOSフォルダ内のUnity-iPhone.xcodeprojを開きます。
MacにiPhoneを接続すると、iPhoneでコンピュータを信頼するか聞かれるので、信頼を選択します。
![IMG_8572.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/4fd62bed-fb8b-80a5-e1f7-aecdcec3dbaa.jpeg)

Any iOS Deviceのところで、接続したiPhoneを選択します。
![IMG_8575.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/f3e11f13-93fc-846c-4d54-efb13f59ed70.jpeg)

Unity-iPhone > Signing & Capabilities よりAutomatically manage signingにチェックを入れます。
ダイアログが出てくると思うので、Enable Automaticを選択しましょう。
![スクリーンショット 2022-12-18 5.44.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/0d6cf4bb-549c-a8a8-1463-10ce12d7b821.png)

Teamにて自分のアカウントを選択します。
Xcodeのアカウント作成が必要です。

エラーが出ていなければ、大丈夫です。
![IMG_8584.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/af22e1a5-533f-6edb-7537-69e2811d428d.jpeg)

三角マークでビルドを実行します。

iPhoneでデベロッパが信頼されていない場合、Xcodeに以下のモーダルが出ます。iPhoneにも同内容のモーダルが出るはずです。
![スクリーンショット 2022-12-18 5.58.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/d9d9f70e-9468-a8f6-b19a-0bab47c89b17.png)

iPhoneの 設定 > 一般 > VPNとデバイス管理 > デベロッパAPP よりデベロッパを信頼しましょう。
これでインストールされたアプリを使用できるようになります。

アプリを開き、画面をタップしてみましょう。
![IMG_8582.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664789/623137e7-8373-2f13-a322-ce3ff212ced8.png)
メリークリスマス！プレゼントが届きました🎁

# さいごに
ほとんどコーディングいらずでAR空間にオブジェクトを出現させることができました。
パッケージって偉大です。
AR Foundationでは他にもできることがたくさんあるので、試してみるのも面白いと思います。

次回、[CYBIRD Advent Calendar 2022](https://qiita.com/advent-calendar/2022/cybird)、22日目は@cy_ssssさんの「若手エンジニア向け：会社説明会で気をつけたこと」です。お楽しみに！