はじめに

思いつきで始めた「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サイトに合わせてカスタマイズする