@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

iOS 12のSafari用にARオブジェクトをプレビュー(Quick Look)する仕組みのサンプルを作ってみた

iOS 12のSafariではARオブジェクト (usd フォーマット？)をプレビューすることができる。 aタグでusdzファイルを指定して、その中にimgタグがあれば勝手にプレビュー機能が有効になる。

デモ : AR Quick Look Example

html

<a href="path/to/stratocaster.usdz">
  <img src="path/to/stratocaster.jpg" width="250" height="250">
</a>

JavaScriptでAR機能が有効かどうか判断する

/* from Apple's AR Quick Look Gallery */
(function () {
  var isRelAR = false;
  var a = document.createElement('a');
  if (a.relList.supports('ar')) {
    isRelAR = true;
  }
})();

Appleのページはこれでhtmlタグにクラスを追加して、CSSで 「Visit this page on iOS 12 to try AR Quick Look」の要素を消していた。 (上記デモページにも記載した)

その他リソース