iOSアプリからAR名刺を作る



この記事はフラー [Advent Calendar 2019](https://adventar.org/calendars/4155) - Adventarの17日目の記事です
昨日は[okumu](https://qiita.com/okumu)さんで[Jetpack Composeをすこし触ってみた](https://qiita.com/okumu/items/e5ac9a7892d3e2433fa0)でした

はじめまして、フラーという会社でiOSエンジニアをやらせていただいているyudai_watanabeです。

この会社に入ってまだ1ヶ月半くらいしか在籍していないのですが
自分の在籍する部署の名前が最近新しくなり、さらにかっこいい名刺をもらえて嬉しかったのでこれを書くことにしました

ちなみに部署はこんな感じのところです、サイトも格好いいのでぜひ見てください
[共創スタジオ](https://www.kyoso-studios.com)


## Reality Composerとは

![RealityComposer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/1d3c5e12-49f9-3f7e-cefb-dcbeb2e142a7.png)


たくさん衝撃的な発表のあったWWDC2019の中でARKit３についても発表がありました
その発表の中でも目玉機能の１つとなっていたのが[Reality Composer](https://developer.apple.com/jp/augmented-reality/reality-composer/)です。

サイト内での紹介だとこんな感じで
> AR体験のプロトタイプやコンテンツ制作を誰でも簡単に行えるようになりました。それをXcodeを使用してAppに組み込んだり、AR Quick Lookにエクスポートしたりできます。Reality Composerを使用すると、iOSおよびMac上でアニメーションやインタラクションを作成して、3Dコンテンツの魅力を高めることができます。

そのReality Composerの何がすごいかというと
**iOSアプリからもARの実装が行えるのです！（iPad用のアプリもあります）**
今回はこのReality Composerを使って実装してみます
(iOS13.2以上のアップデートが必要です)

## AR名刺とは

そもそもAR名刺ってどんなのって思った方もいると思うのでいくつか面白いものをTwitterからピックアップさせていただきました
（Twitterで流れてくるものは実際にARでやっているものとコンセプト映像として作っているものがあったりします）

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">またAR名刺作りましたー！よかったらもらってね。 <a href="https://t.co/y3r3PU1J32">pic.twitter.com/y3r3PU1J32</a></p>&mdash; ゆげ❄️冬コミ(月)南ハ07a (@sasataro) <a href="https://twitter.com/sasataro/status/1121018647349088257?ref_src=twsrc%5Etfw">2019年4月24日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">AR名刺！！😎<br><br>名刺交換して、インスタのフィルターで読み込んでもらったらこうなる。<br>絶対顔覚えてもらえそう😂✨<a href="https://twitter.com/hashtag/%E3%81%BE%E3%81%84%E3%81%AB%E3%81%A1AR?src=hash&amp;ref_src=twsrc%5Etfw">#まいにちAR</a> <a href="https://t.co/IGPg52FNac">pic.twitter.com/IGPg52FNac</a></p>&mdash; 大石結花 // Yuka Ohishi (@yukaohishi) <a href="https://twitter.com/yukaohishi/status/1199576795424538624?ref_src=twsrc%5Etfw">2019年11月27日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">本日のAR名刺です。テーマは異世界からの召喚。 <a href="https://twitter.com/hashtag/AR%E5%90%8D%E5%88%BA%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A?src=hash&amp;ref_src=twsrc%5Etfw">#AR名刺もくもく会</a> <a href="https://twitter.com/hashtag/AdobeAero?src=hash&amp;ref_src=twsrc%5Etfw">#AdobeAero</a> <a href="https://t.co/M8BJtrkEg4">pic.twitter.com/M8BJtrkEg4</a></p>&mdash; けんじ (@kenji_clown5) <a href="https://twitter.com/kenji_clown5/status/1206610526966411265?ref_src=twsrc%5Etfw">2019年12月16日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## AR名刺を作る

ではReality Composerを使ってAR名刺を作ってみましょう

#### 実装イメージ

今回は名刺の横に自分のFacebookとTwitterへの導線を置く実装をしてみたいと思います
イメージはこんな感じです
(iOSアプリからだと実際に遷移させるところまではできません)

![スクリーンショット 2019-12-17 12.35.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/d787b858-5204-640f-f876-04b35383e500.png)

##### まずはアプリのインストール
iOS13.2以上にアップデートを忘れずに
https://apps.apple.com/app/reality-composer/id1462358802

##### 新規プロジェクトを作成
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/1a9fc062-95a0-1f3c-da86-07799c99bccc.png">

##### アンカーの設置
アンカーに画像を選びます
<img width="300" alt="IMG_3792.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/d154c8a9-b5cf-764b-4782-e5364d32c28d.png">


こんな感じになったかと思います、下にある白いのがアンカーです
<img width="300" alt="IMG_3791.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/8381d072-3269-4efc-4d6e-08a5f330f1f5.png">


少しわかりづらいのですが
アンカーを選択した状態でここをタップしてください
![スクリーンショット 2019-12-17 13.04.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/d026b305-17da-c5e3-5a25-faffb0081c1e.png)

そこで画像の選択をしてください
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/cd8828c6-9ad8-46b9-a55b-84a73f655e98.jpeg" width=300>

すると、こんな感じになるはずです
<img width="300" alt="IMG_3792.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/222c4459-cdbc-ec1a-64e2-26edf5880bf4.png">

##### オブジェクトの設置

デフォルトのオブジェクトを長押しで削除したら
ヘッダーにある「＋」アイコンから円柱型のコンテンツを選択してください

１つ目のオブジェクトにサイズ調整を行ったらに長押ししてコピー&ペーストを行い、
それぞれに色をつけて移動させるとこんな感じになると思います
<img width="300" alt="IMG_3793.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/a58c12dc-0106-2e0a-f265-f09ec3be1175.png">

ここは直感的にできるかなと思ったので少し端折っています、わかりにくかったらコメントをください追記します

##### テキストの設置

ちょっと難しいのがテキストの設置です
ますは上記のオブジェクトと同じようにテキストを呼び出します
するとこんな感じで名刺に対して垂直なテキストが出てくると思います
<img width="300" alt="IMG_3799.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/5ca82edd-984b-c681-105a-fd73bdf1f0a0.png">

このままだと名刺をかざしたときに文字が読めなくなってしまうので
テキストを選択して、x軸に「-90度」回転させて正面から文字を読めるようにします
<img width="300" alt="IMG_3795.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/4c936d00-3cf1-6166-3b42-c794882c9510.png">

このまま先ほど設置したオブジェクトの上にテキストを持って来れば
それっぽい感じに見えるそうな気がするのですが...

**高さの調整をしてあげる必要があります!**
テキストを一度タップすると表示される緑色の三角（名前がわからなくてすいません）を触って高さの調整をします。
画像のようにオブジェクトより高い位置に持ってきたらオッケーです。
<img width="300" alt="IMG_3798.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/0a966f52-d05c-3d36-f6ee-ef2c05579fb9.png">

高さを調整し、それぞれのテキストの位置と名前に修正したらこんな感じにできると思います
<img width="300" alt="IMG_3803.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180651/8beba98d-b8b7-cf5c-d4ae-b29555aab466.png">

##### プレビューしてみる
ずっと気になっていたと思いますが、ヘッダーにある「AR」ボタンを押してから
名刺を写してみてください、こんな感じになったら成功です！
<img width="300" src="https://j.gifs.com/jZB26R.gif">

Behaviorをセットして表示の仕方を工夫するのも面白いです！

##### ボタンをから画面遷移させる

Behaviorをセットすればタップ判定はできるのですが、アプリだけでどうやればいいのかわからなかったです:pray:
Xcodeを入れて少しだけコードを書くと簡単にできたりします、
長くなってしまったのでそれについてはまた別の機会で書けたらと思います...

ちなみにXcodeでビルドしたアプリはこんな感じになります（うまく貼れなかったのでURLで）
https://j.gifs.com/1WMjMj.gif

わかりにくいですが、Twitterのオブジェクトをタップした後にwebviewを開いています。


## おわりに

最後まで読んでいただき、ありがとうございました。
気になるところや指摘事項があったらコメントをいただけるとありがたいです。


作りながらなんだか少しだけ位置がズレちゃうなあと思っていたら、
実は画像は複雑なものであるほうがよりアンカーに適しているのでシンプルな名刺はあまり向いていなかったようです:frowning2:

[ARKit画像マーカーに適した画像適さない画像](https://qiita.com/k-boy/items/988af3a1663e84f2f328)