はじめに

思いつきで始めた「AR Advent Calendar 2021」に今年ふと調査したことを残しておきます。

いつの間にか AR Quick Lookにリンク遷移機能が追加されていました。

AR Quick LookでのApple Payボタンまたはカスタムアクションの追加

ただし、制限があったりModelViewer経由とQuickLook経由で出来ることが違うかったので検証結果をまとめました。

前提

	対象
OS	iOS12.0以上（iOS11でも対応してるはずですが、一部不具合あるようなので12以上推奨にします。）
端末	iPhoneだと6S,SE以上、iPadだと第5世代以上

コード

ModelViewer版

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="index.css" type="text/css">
        <title>ModelViewer-Test</title>

    </head>
    <body>
        <script type="module"
            src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"> 

        </script>
        <model-viewer
            ar
            ar-modes="scene-viewer webxr quick-look"
            alt="apple"
            src="apple.glb" 
            ios-src="apple.usdz#callToAction=購入ページへ&checkoutTitle=The Apple&checkoutSubtitle=Red Color&price=1,100円"
            quick-look-browsers="safari chrome">

        </model-viewer>
        <script>
            document.querySelector('model-viewer').addEventListener('load', (event) => {
                event.target.activateAR();
            });

        </script>
        <script>
            document.querySelector('model-viewer').addEventListener("message", function (event) {   
                if (event.data == "_apple_ar_quicklook_button_tapped") {
                    window.open('https://www.amazon.co.jp/', '_blank');
                }
            }, false);

        </script>
    </body>
</html>

https://1901drama.github.io/webar-test/model-viewer/index.html

QuickLook版

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>QuickLook-Test</title>

    </head>
    <div>
        <a id="ar-model"
            rel="ar" 
            href="apple.usdz#
            callToAction=購入ページへ&
            checkoutTitle=The Apple&
            checkoutSubtitle=Red Color&
            price=1,100円">
                <img src="apple.png">
        </a>

    </div>
    <script>
        document.querySelector('a').addEventListener("message", function (event) {   
            if (event.data == "_apple_ar_quicklook_button_tapped") {
                window.open('https://www.amazon.co.jp/', '_blank');
            }
        }, false);

    </script>
</html>

https://1901drama.github.io/webar-test/quick-look/index.html

機能的な差異

ModelViewerは、QuickLookだけでなくSceneViewer(Android/ARCore用)に対応している為、もちろん記載内容に違いがありますが、機能としても以下の違いがあります。

１.一部のオプション指定が効かない

index.html

ios-src="apple.usdz#callToAction=購入ページへ&checkoutTitle=The Apple&checkoutSubtitle=Red Color&price=1,100円"

文字の色,価格,リンク先などを指定出来ますが、ModelViewerでは一部オプションを指定出来ません。ボタンはApplePay等以外でも割と柔軟に変更出来ます。

2.リンクに遷移できない

index.html

    <script>
        document.querySelector('a').addEventListener("message", function (event) {   
            if (event.data == "_apple_ar_quicklook_button_tapped") {
                window.open('https://www.amazon.co.jp/', '_blank');
            }
        }, false);

    </script>

リンク先を指定は出来ますが、ModelViewerでは指定したリンク先に遷移出来ず、呼び出し元のページに戻されてしまいます。

リンク付きビュー機能で出来ないこと

リンク有りのQuickLookは撮影ボタンがありません。。。

よって、コンテンツを見せることを目的にする場合→「標準ビュー」
見たコンテンツに対してアクションして欲しい場合→「リンク付きビュー」と
表示したいコンテンツによって切り替える必要があります。

サンプルコードの全容はこちらのリポジトリ
https://github.com/1901drama/webar-test
※おまけでscene-viewer単独バージョンも載せてます。

AR Quick Lookの拡張にはある程度限界があるので、
より細かいことをしたければ、こちらではなくWebXR Device APIとAppleの対応に期待です。
とはいえ遷移先URLを簡単に追加出来るのは非常に使い勝手が良いので、この機能もっと使われてて良い気がしますね。

参考

・AR Quick Look
・AR Quick Lookの拡張機能（バナー表示）を試す
・model-viewerをWebサイトに合わせてカスタマイズする

AR QuickLookのリンク付きビュー機能を使いたい

はじめに

前提

コード

ModelViewer版

QuickLook版

機能的な差異

リンク付きビュー機能で出来ないこと

参考