はじめに
思いつきで始めた「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版
<!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版
<!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用)に対応している為、もちろん記載内容に違いがありますが、機能としても以下の違いがあります。
１.一部のオプション指定が効かない
ios-src="apple.usdz#callToAction=購入ページへ&checkoutTitle=The Apple&checkoutSubtitle=Red Color&price=1,100円"
文字の色,価格,リンク先などを指定出来ますが、ModelViewerでは一部オプションを指定出来ません。ボタンはApplePay等以外でも割と柔軟に変更出来ます。
2.リンクに遷移できない
<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サイトに合わせてカスタマイズする