空間コンピューティングのためのQuick Look

空間コンピューティングのためのQuick Look

visionOSのQuick Lookを使って、3Dコンテンツや、空間画像、および空間動画などのパワフルなプレビューを実現する方法について確認しましょう。これらの体験をシステムで実現する上での様々な方法について解説し、Quick LookのコンテンツをアプリからWebサイトにドラッグアンドドロップし、そのコンテンツで別のウインドウを作成する方法を実践し、またアプリ内で直接Quick Lookを表示する方法について解説します。

リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- Quick Lookによる空間体験のための3Dモデルの作成
- RoomPlanにおける機能強化の詳細
WWDC20
- AR Quick Lookでオンラインショッピング
ダウンロード

♪♪ ♪ こんにちは「空間コンピューティングのためのQuick Look」へようこそ Youssefと申します AR Quick Look Teamのエンジニアです今日お話しするのは xrOSでの Quick Lookのすべての機能とそれをプラットフォームで使ってアプリやWebサイトでの新体験を生み出す方法についてです内容に入る前にまず Quick Lookについて説明しましょう Quick Lookはファイルのプレビューや編集を iOSやmacOS そして今ではxrOSで簡単に行えるシステムフレームワークです Quick Lookにはパワフルな編集機能が付いていて例としては動画のトリミングや PDFや画像でのマークアップが初めからすぐに行えますまたファイルへの安心で安全なアクセスを行うためアプリ内で信用されていないファイルを開けてしまう心配もありません Quick LookはAppleのプラットフォームのいろんな場所で目にされます iOSではメッセージスレッドのアタッチメントを開けばそこに出てきます macOSでは Finderかデスクトップでファイルを選択してスペースバーを押すたびに Quick Lookが現れます xrOSではファイルベースのコンテンツのシステムビューアですそして iOSやmacOSと同様 xrOSアプリもQuick Lookを利用して機能満載なファイルの表示や編集が簡単にできるようになります具体的に見ていきましょう最近はアパートの改装に手をかけていてプロジェクトの進捗を追ったりチームと共同作業をするのにアプリを使っています一緒に作業をしているインテリアデザイナーの1人が家の改装案の入ったフォルダを送ってきましたここにフォルダを開いてあるのでどんな案か見てみましょうどうやら彼が提案する居間の USDZモデルのようですね開けてみましょうそのためにはファイルをピンチ＆ドラッグで出しアプリの外側にドロップします
USDZファイルをドロップするとそのドロップした場所に 3DのQuick Lookプレビューが現れますそしてすぐにインタラクションが可能ですピンチ＆ドラッグのジェスチャでモデルを回転させ美しいレンガのファサードをよく見る事ができます居間をもう少し近くで見たければモデルをズームインして拡大しますデザイナーは家の周りの近所の写真も送ってきたようです最後は書類が付いていて家のために計画した機能のリストがありますどれも良さそうなのですがこの最後の項目は疑問なのであとで話し合うためにメモを残しますウインドウのトップにあるメニューを開けてマークアップを選ぶとマークアップのパレットが出てきますあとで考えたい項目に丸をつけておきます
アプリからファイルを外側にドラッグしてプレビューできました複数のファイルを元のアプリの横に出しすべてが見られました Quick Lookでのこの新しいファイルの表示方法は Windowed Quick Lookと呼ばれますこのセッションではさらに詳しくこの表示スタイルやアプリやWebサイトへの適用方法について確認していきますそのあと直接アプリ内で Quick Lookプレビューを表示する方法について見ていきますまず Windowed Quick Lookについて詳しく見ていきましょう Windowed Quick Lookを使うと Quick Lookプレビューがアプリの外側に表示できますこれはファイルコンテンツをアプリの横に表示するようなノンブロッキング体験には最適です Windowed Quick Lookプレビューは別のアプリがホストなのでプレビューが出ている間にもアプリを閉じることができます Windowed Quick Lookは USDZやRealityファイルによる 3Dモデルにはるかにリッチなビュー体験を与えてくれますアプリから切り離して3Dコンテンツをスケールしたり配置したりできますまた 3Dモデルをスケールして環境を暗くしてほかのシーンをすべて隠し 3Dコンテンツだけに焦点を当てる事もできます Quick Lookウインドウに表示される特定のファイルタイプは SharePlay体験もできるのでファイルを共有して FaceTimeで見る事もできます SharePlayで3Dコンテンツを共有すると Quick Lookは3Dモデルのオリエンテーションやスケールやアニメーションを同期します SharePlayで画像を共有するとほかの人たちと一緒にその画像にマークアップができます Quick LookでファイルをSharePlayすればグループと一緒にファイルでコラボレーションするのが簡単でシンプルになりますアプリもWebサイトも Quick Lookウインドウでコンテンツを表示し Quick Lookの数多くの利点を利用する事ができますまずはアプリがどのように Windowed Quick Lookを表示するか見てみましょうアプリは URLを含むドラッグソースを提供して Quick Lookウインドウにファイルを表示しますドラッグ＆ドロップのインタラクション中にドロップターゲットがアプリの外側にある時システムはみなさんが提供する URLを Quick Lookウインドウにコピーして表示します提供されたURLが iCloudのようなリモートの場所でホストされているような場合はシステムはまずダウンロードしますですがこれは提供ファイルのコピーが表示されているので表示ファイルに施された画像のマークアップなどの編集は提供されたURLには書き戻されませんでは実際の動作を見るために Xcodeに行きましょう
アプリにドラッグのサポートを加える前にアプリの概要について簡単に説明しますアプリではプロジェクトの進捗やほかのチームメンバーが共有したファイルのリストが見られますここでは FileViewを表示するリストビューが出ています各ファイルをドラッグアウトしたいので各FileViewをドラッグソースに変える必要がありますそのために FileViewに onDragモディファイアを追加します onDragモディファイアは NSItemProviderを期待するので FileViewで表示されるファイルの URLを含むアイテムプロバイダを戻します
シミュレータでアプリをビルドして実行したのでビューファイルからドラッグアウトしそのファイルを新しい Quick Lookウインドウで表示できますそしてアプリを閉じてもファイルのプレビューはずっと表示されたままですほんの数行のコードを加えればアプリ内でドラッグ＆ドロップが有効になり別のウインドウでコンテンツを見る事ができてアプリも自由に使えます今度は Webサイトでの方法を見てみましょう iOS 12から Webサイトは AR属性でのリンクのマークアップで 3DコンテンツをiPhoneやiPadの Quick Lookでリンクを付けたり見たりできるようになりましたマークアップされた3DコンテンツのリンクをxrOSで開くと Safariが新しいQuick Lookウインドウで 3Dコンテンツを表示します既にiOSやiPadで ARコンテンツのリンク付けをサポートしているWebサイトはこのビヘイビアが余分に何の手を加えなくても xrOSに引き継がれます xrOSはコンテンツスケーリングを無効にするなどのカスタマイズオプションも重視していますカスタマイズオプションの詳細情報については WWDC19での「AR Quick Lookの最新情報」のセッションをどうぞ Safariからの3Dコンテンツを表示するWebサイトをまだ設定していない場合は次のようにリンクのマークアップをするだけでいいのです rel="ar"をリンクやaタグに追加すれば Safariはタップでのナビゲートをしません代わりにWebサイトの横に Quick Lookウインドウで 3Dファイルを表示します Safariに行ってチェックしてみましょうここでは AR Quick Lookのギャラリーページが Safariで開いていますこのページからリンクされている3Dモデルがたくさんあるのでそのいくつかを開けてみましょうこのティーポットのリンクをタップし Quick Lookウインドウに3Dモデルをダウンロードし表示しますダウンロードされるとモデルが現れますこのマグカップのリンクをタップするとティーポットとSafariの近くにマグカップが置かれますこれはプロダクトを共有スペースに置いてみて自分に合っているかどうか確かめたい Eコマースのサイトにはピッタリです以上アプリの外側でファイルをプレビューするための Quick Lookウインドウでのファイルの表示方法でした時にはアプリの中で直接ファイルをプレビューしたいユースケースもあるでしょう Quick Lookコンテンツのアプリ内表示は SwiftUIでquickLookPreview機能に URLを渡すだけのシンプルな作業です quickLookPreviewを使って表示されるとプレビューはシートとしてビューコンテンツの上に表示されます表示されたプレビューにさらにカスタマイズオプションが欲しい場合はここでは代わりに QLPreviewControllerを使います iOSアプリをxrOSに持ち込みたいなら quickLookPreviewや QLPreviewController APIの既存の機能がそのまま無料で引き継がれますシミュレータに行って Project Trackerアプリのどこでこれが利用できるか確認しましょうチームの新しいデザインを家主に送って承認を求める前にそのデザインをレビューできるビューがあります現在はファイルのリストは見えますがどのファイルも実際にはプレビューできません Xcodeに行ってこれを修正できるか見てみましょうこれが今の私のビューですアプリ内で直接ファイルをプレビューするためにまずは QuickLookをインポートしますそれから SwiftUIの quickLookPreview機能を追加しプレビューしたいファイルと最初に選びたかった特定ファイルをすべて渡します
では実行してみましょう
アプリに戻ってみて今度はこのビューを選んでみるとプレビューと一緒にシートが直接アプリ内に現れるのが分かりますツールバーのナビゲーションコントロールを使いファイルを一巡して家主に送る前にすべて問題が無い事を確認しますファイルをアプリ内で直接プレビューするのは quickLookPreview機能にURLを渡せば簡単に表示できるものでしたこれでプラットフォームにおける Quick Lookの両方の使い方を見たのでサポート対象のプレビューを持つファイルタイプについて触れましょう Quick Lookがサポートする最も一般的なファイルタイプには画像や動画 PDFや USDZファイルが含まれています Quick Lookで表示された空間再現画像や動画は「写真」での画像や動画と同じくらい良質です xrOSでのQuick Lookを簡単に見てみましたでは今日の内容をすべて見返してみましょう Quick Lookがアプリに提供するリッチなプレビューと編集機能について説明しましたそのあと Quick Lookを使ってアプリがコンテンツをプレビューできる Windowed Quick Lookの話をし Windowed Quick Lookが提供する機能について例えばアプリの外側にコンテンツを表示するマルチビューサポートで実現されるボリュメトリックかつイマーシブな3Dコンテンツの表示や SharePlayサポートについて話しましたそれからドラッグ＆ドロップのサポートを追加すればアプリのワークフローを合理化し Quick Lookウインドウを活用できるという事や Webサイトでも Quick Lookウインドウを利用して Safariの外側に3Dコンテンツを表示できる事を見ましたまたアプリがSwiftUIのシーン内で Quick Lookコンテンツを表示するのがいかに簡単であるかも見ました既にQuick Lookを使っているアプリを持ち込む場合はほぼ何もせずにこのプラットフォームでも素晴らしいQuick Look体験が得られます同様に既にARコンテンツにリンクしているWebサイトはそのビヘイビアを無料で引き継げます Quick Lookはアプリに対しシンプルでパワフルかつ安全なファイル表示体験を提供しますので是非みなさんもxrOSでQuick Lookを使って素晴らしいものを作成してください ♪

5:15 - drag support for quick look from apps

import Foundation
import SwiftUI
import UniformTypeIdentifiers

struct FileList: View {
    
    @State var files: [File]
    @State var previewedURL: URL? = nil
    @State var selectedFile: File? {
        didSet {
            self.previewedURL = selectedFile?.url
        }
    }
    
    var body: some View {
        List(files, selection: $selectedFile) { file in
            Button(file.name) {
                selectedFile = file
            }
            .onDrag {
                return NSItemProvider(contentsOf: file.url) ?? NSItemProvider()
            }
        }
    }
}

8:45 - swiftUI quick look preview function

import Foundation import SwiftUI
struct FileList: View {
  
@State var files: [File]
@State var previewedURL: URL? = nil
@State var selectedFile: File? {
	didSet {
		self.previewedURL = selectedFile?.url
		}
  }
  
var body: some View {
	List(files, selection: $selectedFile) { file in
			Button(file.name) {
				selectedFile = file
			}
		}
		.quickLookPreview($previewedURL, in: files.map { $0.url })
  	}
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

WWDC20