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


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

https://adventar.org/calendars/6820


いつの間にか AR Quick Lookにリンク遷移機能が追加されていました。
![38972179-24e6-44ab-b075-f62bba5a7f80.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/080a69c8-82d0-c392-4c97-725a830dab47.png)
[AR Quick LookでのApple Payボタンまたはカスタムアクションの追加](https://developer.apple.com/jp/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look/)


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

# 前提

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


# コード
### [ModelViewer版](https://github.com/1901drama/webar-test/blob/main/model-viewer/index.html)

```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>
```
![qrcode_1901drama.github.io (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/0205f288-58a1-8e3e-d21a-5904e08ee7b3.png)
https://1901drama.github.io/webar-test/model-viewer/index.html


### [QuickLook版](https://github.com/1901drama/webar-test/blob/main/quick-look/index.html)

```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>
```
![qrcode_1901drama.github.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/c19a25ed-8002-b6f7-8cf2-1f4bf05b4c44.png)
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は撮影ボタンがありません。。。

![IMG_6344.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222377/1904b3f2-10c1-54f8-7688-4ac53393e6c8.jpeg)

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

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

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

#参考
・[AR Quick Look](https://developer.apple.com/jp/augmented-reality/quick-look/)
・[AR Quick Lookの拡張機能（バナー表示）を試す](https://recruit.gmo.jp/engineer/jisedai/blog/ar-quick-look-banner/)
・[model-viewerをWebサイトに合わせてカスタマイズする](https://www.jyuko49.com/entry/2020/07/24/135155)