AR Quick Lookの拡張機能（バナー表示）を試す
こんにちは F.S.です。
今回は先月（2020年2月）iOS13.3より追加されたAR Quick Lookの拡張機能で、AR体験の中で購入ができるようにアクションボタンを設置する機能を試してみます。
AR Quick LookでのApple Payボタンまたはカスタムアクションの追加 – Apple Developer
ECサイトではAR体験により購入される可能性が高まることが期待されており、Webで簡単に商品イメージの確認と購入のアクションが起こせるのには価値があります。
こんな感じで購入ボタンをつけることができます。
AR Quick Look のおさらい
2018年、iOS12のARKit2からARモデルを簡単にプレビューするためのQuick Lookという仕組みが導入されました。AR Quick Lookを使ったモデルのプレビュー – Apple Developer
左のギターはARオブジェクトです。
これを使ってネイティブアプリ、またはWebサイトからAR体験による3Dモデルのプレビューができるようになりました。
ネイティブアプリにも組み込める機能ですが、ブラウザで手軽にAR体験ができるということでWebサイトでの実装が注目を集めましたね。
組み込み方法はこのようなイメージです。
- ネイティブアプリ
→ QLPreviewControllerを使ってプレビュー画面を組み込む - Webサイト
→ HTMLでQuick Lookに対応した3Dモデルファイル（usdz）へのアンカーリンクを設置する（タップすると自動的にQuick Lookのビューが表示される）
2020年3月現在ではSafariの他にChrome（バージョン80.3987.95）やSmooz（バージョン1.98.2）ではQuick Lookが動作するようです。
ただし、今回試す拡張機能が動作するのは今のところSafariのみのようです。
なお、Firefox（バージョン23.0）はPCブラウザと同様にQuick Lookが開かず usdzファイルのダウンロードになってしまいました。
ちなみに、Android（ARCore対応機種）ではGoogle I/O 2019でScene Viewerという同等の機能を発表しています。Googleで猫を検索すると出てきたアレですね。
Scene Viewer – Google Developers
また、両プラットフォームの差異を吸収するWebコンポーネント（model-viewer）の提案もあります。
google/model-viewer: Easily display interactive 3D models on the web and in AR! – GitHub
拡張機能（バナー表示）
Quick LookはWeb XR技術とは異なりブラウザとは別のビューに3Dモデルを表示するだけなので、AR体験をWebアプリから制御することはできません。その本質は変わりませんが、iOS13.3の拡張機能でできるようになったのは下記です。
- Quick Lookビューに固定バナーを表示
→3DモデルのアンカーリンクURLに属性を埋め込んでQuick Lookビューへバナー情報を渡す
<a id=“ar-link” href=“3d-model.usdz#applePayButtonType=buy&checkoutTitle=…”> …</a>
- バナーのタップイベントのハンドリング
→3Dモデルのアンカー要素に送られる message イベントをリッスンする
const linkElement = document.getElementById("ar-link"); linkElement.addEventListener("message", function (event) { ... }, false);
表示できるバナーには下記のパターンがあります。
- アイテム情報 ＋ Apple Payボタン
※Apple Payのボタンが表示できるだけでApple Payの実装は別途必要 - アイテム情報 ＋ カスタムアクションボタン（テキストアンカー）
- カスタムHTMLバナー（HTML）
※バナーの高さを大中小指定可能
※スクリプトは一切動かない
アイテム情報の属性に特に意味はなく、例えばpriceが価格の意味を持っているわけではなく、priceの位置に表示されるテキストを渡しているだけです。checkoutSubtitle, priceは1行で表示される仕様のため、checkoutSubtitleが長いと … で省略されます。文章の長さの調整が必要になります。
実装サンプル
Glitchにてサンプル実装してみたので、iPhone 6s以降をお持ちの方は試してみてください。Quick Look Demo
動作確認の動画も載せておきます。タップした場所が見えないのでイマイチわかりづらいですが、3種類のバナー表示とタップイベントのハンドリングを確認することができます。
やってみてわかったのですが、Quick Look自体はランドスケープに対応しているもののランドスケープにするとバナーは消えてしまいます。
バナー機能を使わないQuick Lookでは、ポートレートの場合に下部（バナーが表示される位置）にスクリーンキャプチャボタンがあります。このボタンはランドスケープにすると右側に移動しますが、バナーは横長なので同様にはいきません。ECサイトでの利用を想定するにランドスケープではあえて無視したのでしょう。
また、Quick Lookで3Dモデルが空間に配置されるとともにバナーが表示されますが、最初は出てなくてしばらく眺めているとトーストっぽく出てくる方が気づきを与えるような気がしました。
ついでに
今回はAppleのギャラリーから3Dモデルを拝借しても良かったのですが、せっかくなので usdz の生成（一般的なフォーマットからの変換）もやってみました。環境のせいで少しハマったので記載しておきます。環境
- macOS：10.14.6
- Xcode：11.3.1 (11C504)
モデリングからやると少し骨が折れるので、フリー素材サイト（Free3D）から objファイルをダウンロードします。
今回利用したのはこちらのモデル。
スカルV3 3Dモデルモデリングソフトの環境によって軸方向に違いがあるようで、ダウンロードした objファイルを FinderのファイルプレビューやXcodeで開くとX軸に沿って90度回転した状態になってしまいます。objファイルをXcodeで開き、向き（回転）を調整します。
そして Fileメニューの Exportから「Universal Scene Description（Mobile）」（つまりusdz）に書き出しで済むはずだったのですが・・・
なんとテクスチャが一部しか効かず、歯と下顎が消えてしまうことに。
そこで別の手段を試してみることにしました。
現在は objなどから usdzへ変換するのは Reality Converter（現時点ではベータ版）を利用するのが良いらしいですが、macOS Catalina（10.15）が必要なようです。
手元の社用macがMojaveだったため利用できず、Apple DeveloperのARリソースダウンロードサイト（拡張現実リソース – Apple Developer）からusdz Tools（USDPython）をダウンロードして使用しました。使用したバージョンは 0.63です。
USDPythonのインストーラーでインストールすると、/Applicationディレクトリにusdpythonが格納されます。この中に usdz変換プログラムがあり、必要なPATHを通してTerminalから使用します。
USDPYTHON_PATH=/Applications/usdpython export PATH=$PATH:$USDPYTHON_PATH/USD:$USDPYTHON_PATH/usdzconvert export PYTHONPATH=$PYTHONPATH:$USDPYTHON_PATH/USD/lib/python
いざ変換。
$ usdzconvert 12140_Skull_v3_L2.obj \ -diffuseColor Skull.jpg -emissiveColor Skull.jpg
なんとかできました。
今回以上です。
それではまた。
次世代システム研究室では、アプリケーション開発や設計を行うアーキテクトを募集しています。アプリケーション開発者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ 募集職種一覧 からご応募をお願いします。
