iOS で ARKit の Recording and Replay で現地にいなくてもリモート実験（デバッグ）する

## はじめに

現在 [TOKYO NODE XR HACKATHON powered by PLATEAU](https://tokyonode.jp/sp/xrhackathon2023/) とういのに参加しています。

虎ノ門ヒルズ ステーションタワー （およびその周辺）で、あたらしい AR体験 をつくるぞ！　というハッカソンです。

iOS アプリ開発がゴールなのですが、みなさんご存知のように、AR アプリを実験するときは「現場」にいないと作業できません。

そう「あるあるな開発者の要望」が

1. 人がたくさん歩いている商業ビルでスマホ操作程度はいいけれど、MacBook 開きつつのデバッグはちょっとアレ
1. ひらたくいえば、おうちやオフィスで開発作業（実験・デバッグ）したい。

ではないでしょうか。

とくにわたしは東京在住ではないので、実験するたびに東京の虎ノ門へいくのは非常に困難で、まずデバッグ手法を確立することが最優先でした。

なお Android の場合はこちらがつかえそうです。

https://developers.google.com/ar/develop/recording-and-playback?hl=ja

これは昔に別件で試した。良い感じだった。

## 手順

1. iPhone (or iPad) で専用アプリをつかって現場撮影する
1. 開発マシン (Mac) にその動画ファイルをコピーする
1. XCode でその動画ファイルを再生実行させる

## 1. 現場撮影する

利用するのは、Apple 謹製の Reallity Composer です。

https://apps.apple.com/jp/app/reality-composer/id1462358802

こちらをまず iPhone にインストールします。

あとはこんな感じの手順となります。

1. Reallity Composer を起動します
![起動する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/3df14cc1-3e88-da6e-4c0a-6c6a384807f3.png)

1. 一覧から新規追加する （2回目以降の操作の場合はすでにある一覧から選択するのもOK）
![一覧から追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/bb93913c-8db0-2f18-dbb6-90f1148a1154.png)

1. 上のを選ぶ
![上のを選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/b5006195-9355-cd9e-371f-793428206f67.png)

1. 画面右上の点三つのアイコンを選ぶ
![画面右上の点三つのアイコンを選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/c31adec7-3299-1564-6fb7-50644e6eea53.png)

1. Developer を選ぶ.png
![Developer を選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/4135f92e-cef8-ce1d-adef-6b1026851668.png)

1. Record AR Session を選ぶ
![Record AR Session を選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/025b07c8-1317-4ccc-eb5d-b39e3377ce09.png)

1. 位置情報を記録するかどうか選択する
    + これはアプリによります。位置情報を記録している動画を再生する際に、もしアプリ側が位置情報をつかわない場合などアプリのセキュリティ要件にひかっかって画面が真っ黒のまま 「センサーの準備ができていません」 というようなエラーログが吐き出されているような状態になります。
    + 今回の Hackathon 参加者は、サンプルアプリや用意されたSDKを元に開発を進めるにあたって、とりあえずここは OFF　にしたほうが安全です。普通に開発するならとくにここで位置情報を記録しなくとも問題ないでしょう。
![位置情報を記録するかどうか選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/5092dc95-5eb5-8ee4-8bbb-94c7ad497e72.png)

1. 録画を開始する
![録画を開始する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/cd27ba11-ac40-9d61-0a2e-de37f4e7caa5.png)

1. 適度に撮影したら録画を停止する
    1. 比較的ゆっくり動かした方があとあと使いやすいです
    1. スマホの容量が十分なら、十分長い動画を撮影しておきましょう。ファイル容量が大きくなっちゃいますが、あとで QuickTime などでトリミングして、動画の任意の部分だけ切り出してもつかえるようです
![録画を停止する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/c91d2743-fb7e-97c9-e84a-02d63f27a093.png)

1. Dシェアする
    1. AirDrop も便利ですね
![シェアする (AirDrop するなど).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/18173787-8ab1-5c8a-f2be-ac7d80f99b1f.png)

#### シェアしわすれた。あとでシェアしたい場合。

1. Developer　メニューから Replay AR Session を選ぶ
![Replay AR Session を選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/d53fbf4c-5269-7327-91ee-901eb509c057.png)

1. Edit を選ぶ!
![Edit を選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/f38d6231-7849-45d0-5796-5a06a46b2ad1.png)

1. 録画した動画を選択するとシェアできるようになる
![録画した動画を選択するとシェアできるようになる.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/7f520971-a820-94b8-5476-50decf1a7349.png)

## 3. 開発中のアプリで再生する

1. Xcode で ARKit Session が記録された動画ファイルをコピー
    1. ここにファイルをドラッグしてコピーする
![Step1 ここにファイルをドラッグしてコピーする.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/5b8e0e77-b9af-c595-c85c-8ed0081d0de5.png)

1. ファイルをドロップしたらダイアログがでますが基本的にそのままでオッケー
![Step2 コピーの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/8be40a9a-0726-2624-f395-8f242ce9cb1f.png)

1. 実行時のスキーマを設定します
![Step3 スキーマ設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/04c0437d-53f1-1a6d-644a-83c93d6960c5.png)

1. Run の Option タブで ARKit Replay の設定をします
![Step4 ARKit Replay と動画設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/31f1705f-7b01-a4ab-cc2e-6995d8680aba.png)

1. Run
![Step5 Run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/8a5485eb-6072-5c91-0e64-87010003ccea.png)

これで、録画した動画が、ARの対象になってリモート実験することができます。

動画ファイルの容量が大きいため、普段の Run よりも起動までに数十秒〜数分時間がかかりますが気長に待ちましょう。

作業環境によりますが、iPhone を Mac は Wi-Fi 接続よりも USBケーブルで有線接続しておいた方が安心かもしれません。


#### 今回のハッカソン参加者さんへ

ToranomonSDK は、ロケーションの判定がおわるまで、10〜15秒ほどかかるので、最低でも20秒以上できれば1分くらいの動画がテストにあたって望ましいのかなと思います。

ハッカソンって、面白いものを作るのは当然だけど、そのために「作りやすい環境」の準備もとても大事なんですよね。

他の参加者のみなさんは賞金狙い？！ならライバルでもあるので、知見の共有にすこし抵抗があるかたもいらっしゃるかもしれませんが、人との出会いもとっても大切だと思います。

できるかぎり知見を共有しながらどんどんよい作品を競争・共創？できる会になればいいなぁと願っています。