WebブラウザからARコンテンツを表示する

SafariなどのWebブラウザからARコンテンツを表示できます。
アプリをダウンロードする必要はありません。
**以下のサムネイルは、実際にARタグがついているので、iOSデバイスでタップするとARプレビューが表示されます。**
よかったら試してみてください。
（注）PCなどiOS以外のデバイスでクリックすると、realityファイルがリンクからダウンロードされます。
<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/horizontal.reality?alt=media&token=087c6705-4b47-4615-a0f4-4955bd9f20af">
【球体と魚】
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/0f3296de-f669-4f21-cc51-3db80cf3e10b.png" width=200>
<img src="https://user-images.githubusercontent.com/23278992/144955893-319a0474-c93e-401e-a0f5-802558d9c463.gif" width=200>
    </a>
</div>
<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/face.reality?alt=media&token=039ef5fb-660f-4609-a943-a3db19af66d1">
        <img src="https://user-images.githubusercontent.com/23278992/144955893-319a0474-c93e-401e-a0f5-802558d9c463.gif" width=200>
    </a>
</div>

#ユーザーの脱落を防ぐ

アプリをダウンロードするというのは、消費者にとって手間なものです。
「AppStoreにいって、ダウンロードして、アプリを起動する」というステップがあると、そのコンテンツに強い興味を持っていない場合は、表示を諦めてしまうかもしれません。
機会を失わないために、ブラウザのみでさっと表示できるARQuickLookは有効な選択肢になるのではないかと思います。

#手順

###１、RealityComposerでARシーンをつくる

手軽にARコンテンツを作成できるRealityComposerで表示するシーンを作ります。
水平面、垂直面、顔、画像、オブジェクト、の全てのアンカーが使えます。
デフォルトでPeopleOcclusionやモーションブラーなどのレンダリングも有効になっています。

RealityComposerの使い方については、
[**RealityKitの参考書**](https://qiita.com/john-rocky/items/77dd077a5778c7ca9369)の[**14.RealityComposerで手軽にシーンをつくる**](https://qiita.com/john-rocky/items/77dd077a5778c7ca9369#14realitycomposerで手軽にシーンをつくる)をご参照ください。

シーンを作ったら、
「ファイル」→「書き出す」→「現在のシーン」で、.realityファイルとして書き出します。
![スクリーンショット 2021-12-07 6.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/2d3bd7ff-874a-d5f1-eae5-8bac4bc3a3e7.png)


###２、RealityファイルをWeb上に置く

Web上のアセットとして、Realityファイルを適当な場所に置きます。
今回は、FirebaseのStorageに置いてみました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/ef49a966-2abd-788d-255e-bc503701d85a.png" width=300>



###３、HTMLに書き込む。

以下のようにHTMLに書くことで、iOSデバイスでsafariやWebViewなどでページを開いてサムネイルをタップしたときに、ARプレビューが表示されます。

```html
<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/image.reality?alt=media&token=d2e93bb5-3c59-4c20-a639-58abd8b5ca0b">
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/b9b71c87-b8d0-acf0-a97e-71777b25e350.png">
    </a>
</div>
```

ここで
**a rel：**リンクタイプ
**href：**realityファイルのURL（もしくはページからの相対パス）
**img src：**サムネイルの画像のURL
です。

表示例：iOS端末でタップするとARプレビューに飛びます。

<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/faceKoara.reality?alt=media&token=ba210cad-9980-4b96-9b65-c1bbf257c0b9">
        【雨とコアラ】
    </a>
</div>
<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/faceKoara.reality?alt=media&token=ba210cad-9980-4b96-9b65-c1bbf257c0b9">
        <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/53afda3c-b6c2-2767-586c-621b91f2102f.png" width=200>
    </a>
</div>
<div>
    <a rel="ar" href="
https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/faceKoara.reality?alt=media&token=ba210cad-9980-4b96-9b65-c1bbf257c0b9">
        <img src="https://user-images.githubusercontent.com/23278992/144954142-9c9a13a0-1a35-4927-91c6-766a65171106.gif" width=200>
    </a>
</div>


ちなみに、以下のようなサムネイルなしのrealityファイルのリンクを直にタップしても、ARプレビューが表示されます。

https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/horizontal.reality?alt=media&token=087c6705-4b47-4615-a0f4-4955bd9f20af

###プレビュー画面の機能

プレビュー画面では、
ピンチやスワイプでコンテンツの拡大縮小、移動ができ、
ボタンで画像撮影もできます（長押しで動画撮影）。

<div>
    <a rel="ar" href="https://firebasestorage.googleapis.com/v0/b/sincere-nirvana-292404.appspot.com/o/face.reality?alt=media&token=039ef5fb-660f-4609-a943-a3db19af66d1">
        <img src="https://user-images.githubusercontent.com/23278992/144956768-fcd90d8c-0de4-4327-8f78-1127cc0c6f00.gif" width=200>
    </a>
</div>


RealityComposerのパッケージはこういうのと相性いい気がします。

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで。
作りたい機能やアプリの内容を教えてください。
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)