[Swift/ARKit2] 動くポスターを1時間でつくろう

# 概要
Twitterでこのツイートを見て、「めちゃくちゃ面白い！作ってみたい！」と思い、作ってみました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">前に話題になってたラベルがARで動くワインをアメリカ土産で買ってきた。ボトルの曲面を横や上から見てもちゃんと自然に見えてよく出来てる。<br>ストーリーでモノを買う時代へと変化している中で、こういうARでプロダクト自体にストーリーを語らせるのは今後も増えるだろうな。 <a href="https://t.co/M6I3xqNk7H">pic.twitter.com/M6I3xqNk7H</a></p>&mdash; KAJI / MESON CEO (@kajikent) <a href="https://twitter.com/kajikent/status/1135801125536321536?ref_src=twsrc%5Etfw">2019年6月4日</a></blockquote>

実際に作ったものがこれ。映像のトリミング雑ですが。やっていることは極めてシンプルで、ある特定の画像を認識した時にある特定の動画を流してるだけです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">最近の映画DVDは動くのね。すごい。<a href="https://twitter.com/hashtag/AR?src=hash&amp;ref_src=twsrc%5Etfw">#AR</a> <a href="https://twitter.com/hashtag/%E6%8B%A1%E5%BC%B5%E7%8F%BE%E5%AE%9F?src=hash&amp;ref_src=twsrc%5Etfw">#拡張現実</a> <a href="https://t.co/mRD4ojGT4j">pic.twitter.com/mRD4ojGT4j</a></p>&mdash; いずみーる(24);毎日個人開発🍺 (@IZUMIRU0313) <a href="https://twitter.com/IZUMIRU0313/status/1150369651605540864?ref_src=twsrc%5Etfw">2019年7月14日</a></blockquote>


# アーキテクチャ
Xcode上で[ARKit2](https://www.apple.com/jp/newsroom/2018/06/apple-unveils-arkit-2/)を利用して、Swiftでコーディングしています。コード量（ `ViewController.swift` ）は100行もないです。

![architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/e2ff242c-7b0d-63f3-25dc-b979222b9d1b.png)


# Github
すべてのコードを公開しています。
コードにコメントを残しているので、

- [IZUMIRU/SHiNiNG](https://github.com/IZUMIRU/SHiNiNG)

# 解説
以下のmediumを参考にしているので、基本的には読めば理解できますし動きます。Xcode周りの設定がなければ1時間もかからないです。強いて修正部分をあげるなら、`inGroupNamed`がmediumでは`ARImages`ですが、デフォルトでは`AR Resources`で作られるのでコードないしはディレクトリ名を修正する必要があります。


- [Using ARKit To Display Video In Augmented Reality](https://medium.com/quick-code/using-arkit-to-display-video-in-augmented-reality-3a2e4c1418ad)

![harrypotter.gif](https://user-images.githubusercontent.com/11635641/61198520-5395f880-a715-11e9-828d-102fbc21289c.gif)


また画像と動画の素材が必要なので、[GIPHY](https://giphy.com/) などで取得してください。`movie`や`film`、`poster` で調べると良い感じの動画が出てきます。Adobe Premiere ProやAdobe After Effects、iMovieなどで動画をトリミングすると、画像から切り替わる際の違和感がなくなります。

素材探しと動画編集めんどくさい人用にシリウスブラック置いておきます。

- [png](https://miro.medium.com/max/933/1*X1byskHLHiQDUT6KRWztOw.png)
- [mp4](https://media.giphy.com/media/sphuNGBpAqY6c/giphy.mp4)



# 実機にアプリを入れる方法
AppStoreで配信するには審査もありますし、お金もかかります。

> Apple Developer Programの年間登録料は99米ドル

ただ有線で直接デバイスにはアプリをインストールすることができるようになりました。

- [【Xcode】AppleDeveloperProgramに登録不要！！実機ビルドする方法](https://qiita.com/natsumo/items/3f1dd0e7f5471bd4b7d9)

またXcodeのバージョン古く、iOSの対応バージョンがない時は以下の方法で対処できます。

- [iOSをアップデートしたために実機でビルドができない](https://qiita.com/yamataku29/items/6fdc9e512b42d7f66386)

記事内のダウンロードしたデータを格納するには、mvコマンドもしくはFinder上で `⌘ + Shift + G` でパス指定できます。

```
/Users/<YOUR_NAME>/Library/Developer/Xcode/iOS DeviceSupport/
```

![finder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/552d7f8f-c5d8-b4e3-2515-ce848d5444ce.png)


# アイコン設定方法
デバイスごとにアイコンのサイズは異なるため、それぞれ対応するには1つ1つ作る必要があります。そこでアイコン自動生成サービスが何個かあるので、それを利用することをオススメします。

- [App Icon Generator](https://appicon.co/)

![AppIcon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105093/1dcec3c3-573a-3342-abf4-5615e7fc5040.png)

# 感想・展望
数年ぶりにSwiftを触ったため、Xcode周りの設定に時間がかかってしまいましたが、それでも1日もかからず完成できました。最近、技術を知るとサービスアイデアが圧倒的に増えていくなーと実感しています。以前あるエンジニアに「エンジニアは自分ができる範囲でしか物事を考えることができないので、大きなビジョンを語る起業家には向いていない。」と言われたことがあり、当時たしかに一理あるなと思った言葉を思い出しました。ただ新しい技術に触れ続けることで、新しいアイデアが生まれるのではと思い、まいにちがんばります。