WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Discover Quick Look for spatial computing

Discover Quick Look for spatial computing

Quick LookvisionOSSpatial ComputingUSDZ
元の動画を見る

ハイライト

visionOS の Quick Look は Windowed モードをサポートし、ユーザーが App や Web サイトからファイルを空間にドラッグして独立したプレビューウィンドウを作成できます。3D モデルは自由な拡大縮小と没入型表示に対応し、既存の iOS Quick Look コードは変更なしで自動的に適応します。

主要内容

Quick Look とは

Quick Look は Apple プラットフォームのシステムフレームワークで、専用アプリを開かずにファイルをプレビュー・編集できます。iOS ではメッセージの添付ファイルに表示され、macOS では Finder でスペースキーを押すとプレビューできます。

visionOS では Quick Look はファイルコンテンツのシステムレベルビューアです。動画のトリミング、PDF や画像の Markup などの編集機能を内蔵し、信頼できないファイルを安全に処理します。

Windowed Quick Look：新しい表示方式

Windowed Quick Look は visionOS の新機能です。ユーザーは App からファイルを空間内の任意の位置にドラッグし、独立した Quick Look プレビューウィンドウを生成できます。

このウィンドウの特徴：

  • ソース App と共存し、App を閉じてもプレビューウィンドウは残る
  • 3D モデル（USDZ と Reality ファイル）は自由な拡大縮小と配置に対応
  • 3D モデルを拡大すると環境が暗くなり他のシーンが非表示になり、コンテンツに集中できる
  • 複数ファイルのプレビューに対応し、複数の Quick Look ウィンドウを同時に表示できる
  • 一部のファイルタイプは SharePlay に対応し、FaceTime で共有・同期表示できる

SharePlay の動作：3D コンテンツを共有すると Quick Look はモデルの向き・拡大率・アニメーションを同期します。画像を共有すると複数人で Markup できます。

App が Windowed Quick Look をサポートする方法

App はドラッグ可能な要素に onDrag 修飾子を追加し、ファイル URL を含む NSItemProvider を返すだけです。ユーザーがファイルを App 外の空白スペースにドロップすると、システムが自動的に Quick Look ウィンドウを作成します。

URL がリモートファイル（iCloud など）を指す場合、システムが自動的にダウンロードします。プレビューはファイルのコピーであり、Markup などの編集は元の URL に書き戻されない点に注意してください。

Web サイトが Windowed Quick Look をサポートする方法

Web サイトは iOS 12 から AR Quick Look をサポートしており、リンクに rel="ar" 属性を追加するだけです。visionOS でも自動的に有効になり、Safari が Quick Look ウィィンドウで 3D コンテンツを開きます。

既存の iOS AR Quick Look Web サイトは、コンテンツの拡大縮小を無効にするなどのカスタムオプションを含め、変更なしで visionOS で動作します。

App in Quick Look

Windowed モードに加え、App 内でも Quick Look プレビューを表示できます。SwiftUI は .quickLookPreview() 修飾子を提供し、URL 配列と現在選択中の URL を渡します。プレビューは sheet 形式でビューコンテンツの上に表示されます。

より多くのカスタマイズが必要な場合は QLPreviewController を使用します。既存の iOS Quick Look コードを visionOS に移行する際、ほぼ変更は不要です。

サポートされるファイルタイプ

visionOS の Quick Look は一般的なファイルタイプをサポートします：

  • 3D モデル：USDZ、Reality ファイル
  • 画像（空間画像を含む）
  • 動画（空間動画を含む）
  • PDF（Markup 対応）

空間画像と動画は、写真 App と同じ表示効果で Quick Look に表示されます。

詳細

App にドラッグサポートを追加

（05:15）

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()
            }
        }
    }
}

キーポイント:

  • onDrag 修飾子でリスト項目をドラッグソースにする
  • NSItemProvider(contentsOf:) でファイル URL から item provider を作成
  • ユーザーがファイルを App 外の空白スペースにドロップすると、システムが自動的に Quick Look ウィンドウを作成
  • リモート URL（iCloud など）は自動的にダウンロードされる
  • Markup などの編集はコピーに適用され、元のファイルには影響しない

App in Quick Look プレビュー

（08:45）

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 })
    }
}

キーポイント:

  • .quickLookPreview($previewedURL, in:) でビューに Quick Look プレビューを追加
  • 第1引数はバインドされた URL で、現在プレビュー中のファイルを制御
  • 第2引数はプレビュー可能な全ファイルの URL 配列で、ツールバーナビゲーションに使用
  • プレビューは sheet 形式で表示され、ファイル間を切り替えられる
  • QLPreviewController や .quickLookPreview を使う既存の iOS App コードは visionOS に自動適応

Web サイトの AR Quick Look サポート

（06:59）

Web サイトはリンクに rel="ar" 属性を追加するだけです：

<a href="path/to/model.usdz" rel="ar">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

キーポイント:

  • rel="ar" で Safari の新しいページへの遷移を防ぐ
  • クリックすると Quick Look ウィンドウで 3D モデルを開く
  • iOS/iPadOS の既存 AR Quick Look サポートは visionOS に自動移行
  • コンテンツの拡大縮小を無効にするなどのカスタムオプションに対応（WWDC19 “Advances in AR Quick Look” 参照）
  • EC サイトでユーザーが空間内で商品を閲覧・配置できる

重要ポイント

  • やること：ファイル管理 App にドラッグプレビュー機能を追加し、ユーザーがファイルを空間にドラッグして閲覧できるようにする

  • 価値：Windowed Quick Look でファイル閲覧と App 操作を同時に行え、3D モデルは没入型表示に対応。onDrag 修飾子を追加するだけで実装コストは極めて低い

  • 始め方：ファイルリストの各項目に .onDrag { NSItemProvider(contentsOf: file.url) } を追加し、有効な URL を持つことを確認

  • やること：EC サイトの 3D 商品モデルに AR Quick Look サポートを追加

  • 価値：visionOS ユーザーが空間内で直接商品を閲覧・配置でき、画像より直感的なショッピング体験を提供。iOS の既存 rel="ar" サポートが自動的に有効

  • 始め方：商品ページの 3D モデルリンクに rel="ar" 属性を追加し、USDZ 形式のモデルファイルを用意

  • やること：コラボレーション App で Quick Look を使い、デザイン案やドキュメントをチームレビュー用に表示

  • 価値：PDF と画像は Markup に対応し、SharePlay で複数人の同期閲覧・注釈が可能。Windowed モードで各メンバーが独自の視点を調整できる

  • 始め方：.quickLookPreview($previewedURL, in: fileURLs) で App 内表示するか、ドラッグサポートを追加して共有空間にファイルをドラッグ

  • やること：空間画像と動画の Quick Look プレビュー入口を提供

  • 価値：空間画像と動画は写真 App と同じ表示効果で、ユーザーが空間内で立体コンテンツを体験できる

  • 始め方：空間画像と動画の URL を .quickLookPreview() や NSItemProvider(contentsOf:) に直接渡すだけで追加処理は不要

関連セッション

コメント

GitHub Issues · utterances