visionOS向けQuick Lookの新機能

visionOS向けQuick Lookの新機能

アプリでファイルのプレビューや編集を手早く行える、visionOSのQuick Lookについて説明します。アプリ内およびウインドウに表示されるQuick Lookの統合や、アプリでウインドウに表示されるQuick Look体験をカスタマイズするまったく新しいAPIもご紹介します。Quick Look内に3Dモデルを表示する最新の機能強化も取り上げます。

関連する章
- 0:00 - Introduction
- 2:20 - PreviewApplication API
- 9:15 - 3D preview enhancements
リソース
- Forum: Spatial Computing
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC24
- 空間コンピューティング向けに3Dアセットを最適化
- 魅力的な空間写真と空間ビデオの作成
ダウンロード

皆さんこんにちは visionOS向けクイックルックの新機能へようこそ Quick Lookチームのソフトウェアエンジニア Naveenです今日はクイックルックに追加された最新機能をご紹介しますまたそれらの機能をアプリケーションで活用する方法も取り上げますクイックルックとは何でしょうかクイックルックは多目的なシステムツールでファイルのプレビューと編集をすべての Appleプラットフォームで可能にしますファイルメッセージフリーボードなど多くのシステムアプリで使用されていますファイルへの安全で確実なアクセスを確保しながら広く使用されている一般的なファイルタイプを表示または編集できます一部の主要なファイルタイプはFaceTime通話で SharePlayを使用できます visionOSは3Dに最適です URLを指定するだけで簡単にクイックルックで表示できますクイックルックで3Dをプレビューする方法としては主に2種類あります 1つはアプリ内スタイルですクイックルックをシームレスに組み込みアプリ内でフルスクリーンカバーとして表示しますもう1つはウィンドウへの表示ですこの方法では3Dモデルがボリュームで表示されアプリとコンテンツを並べたお互いが切り離された状態でマルチタスクでの作業を強化します以前はこの操作をドラッグ＆ドロップで実現していました
これを SwiftUIとSwiftの並行処理を活用しながらクイックルック体験に対するアプリの制御を強化することが目標です今年このすべての原則に基づいて構築された PreviewApplication APIを新たに導入します現在はわずか数行のコードでアプリにクイックルックを統合できますこのAPIを使用すると個々のファイルをプレビューできるだけでなくコレクションビューで複数のファイルを開くこともできますデフォルトの編集オプションをカスタマイズすることができプレビューするファイルのライフサイクルを直感的に管理する方法を提供します
これは新しいAPIの概要に過ぎません次のセクションでは新しいPreviewApplication APIを使用してクイックルック体験をアプリ用にカスタマイズする方法について詳しく説明します
その後クイックルックの最新の3Dプレビューの機能強化について説明します
では PreviewApplication APIの使用方法について見ていきましょう
友人や家族と旅行体験を共有するアプリを作成しました友人のMichaelが最近のガラパゴス旅行のエントリを追加しました彼はこの旅行で多くの素晴らしい空間ビデオを撮影しましたこのアプリでそれらのビデオを写真アプリと同様に全画面表示して空間上でプレビューするとしますこれにはクイックルックが最適です PreviewApplication APIを使用していかにそれが簡単かをお見せしたいと思います
アプリにはThumbnailImageというカスタムビューを作成済みですこれはエントリにある 1つのファイルを表しますタップしたファイルがクイックルックウインドウで開くようにします
そのためには onTapGestureを追加して
PreviewApplication.openをコールします
URLのパラメータとして選択したファイルのURLを指定します
このコードを実行して実際の動作を見てみましょうファイルをタップすると
クイックルックがウインドウで表示されます
そして完全に空間上で再生できます
このビデオを楽しみながらアプリの操作も続けられます
エントリのファイルすべてをプレビューすることもできます先ほど渡したURLは1つでしたがこのAPIではURLの配列を受け取ることができます
ここでは現在のエントリにあるすべてのURLをAPIに渡します
選択したURLには選択したファイルのURLを指定します
これによりすべてのファイルがコレクションビューで開き選択したファイルにフォーカスが当たるはずです確かめてみましょう同じファイルをタップするとコレクションビューにナビゲーションの矢印が表示されますこの矢印を使用してエントリにあるすべてのファイルを順番に表示できます
素晴らしいですね個々のファイルを開かなくてもすべてのビデオを楽しむことができますしかしタイトルの表示が意図した内容になっていませんまたタイトルをタップするとトリミングなどの編集オプションが表示されます
クイックルックはこの便利な編集オプションをデフォルトでサポートしており行われた編集内容は自動的に元のファイルに書き込まれます
より細かく制御できるようにこのAPIにはPreviewItemを使用するオプションが用意されています
URLには selectedURLを指定します
displayNameは上部のメニューに表示されるタイトルですここには現在のエントリの名前を指定します
editingModeを disableに設定すると
上部のメニューから編集オプションを削除できますこの他にも使用できる編集モードがあります詳しくはこのAPIに関するドキュメントをご覧ください
最後に APIでpreviewItemを使用します
このコードを実行してどのように変わったかを確認しますタイトルにはエントリの名前が表示されています上部のメニューにアクセスすると編集オプションが表示されなくなっていますまさに意図したとおりの動作です APIは 1つのファイルにつき 1つのプレビューのみ表示します同じファイルをもう一度開いても新しいプレビューは作成されず既存のプレビューが隠れていればそれが最前面に移動しますそのため開いているプレビューを表すインジケータを表示したいと思いますしかしプレビューが閉じたときにはそのインジケータを削除する必要がありますこのAPIにはプレビューのライフサイクルを管理する新しいオプションがあります PreviewApplication.openを呼び出すとセッションのインスタンスが得られますこれをセッションの状態を表す変数に格納します
このセッションにはイベントとして Swift非同期データストリームが含まれています
イベントを使用するとプレビューがいつ開きいつ閉じたかを知ることができますこのイベントを監視するメソッドを作成します
開いているプレビューを画面上で確認できるようにクイックルックでファイルがプレビューされていることを示す眼のアイコンを使用します
プレビューの状態に基づいてこのアイコンの不透明度を変更します
この機能を実際に見てみましょう新しいプレビューを開くと開いたプレビューのサムネールにこのアイコンが表示されます
プレビューを閉じるとこのアイコンは表示されなくなります狙いどおりの動作ですね
これらはPreviewApplication APIを活用しアプリに合わせてクイックルック体験をカスタマイズする素晴らしい方法ですここまで見てきたようにアプリで空間メディアをプレビューする場合クイックルックがきわめて効果的ですアプリ用の空間写真や空間ビデオを作成する方法の詳細については「Building compelling spatial photo and video experiences」で Vedantの説明を参照してください
つづいてクイックルックで3Dコンテンツを表示する最新の強化機能を見てみます皆さんからいただいたフィードバックはとても貴重なものでしたそして今年皆さんからの要望の多かった 2つの機能を導入しましたその一つは平面マッピングですここにiPhoneの3Dモデルがあります良くできていますねこれを机の上に置きたいと思いますクイックルックでは床やテーブルのように水平な面にあらゆる3Dモデルをスナップできるのでこの操作が可能です
ウインドウのバーをピンチして机の近くまでドラッグしますこれで iPhoneを机にスナップできますこの操作の確定を示すサウンドが聞こえます
スナップしたモデルはテーブル上で自由にドラッグできます
平面へのスナップはクイックルックのすべての 3Dモデルに対して自動的に有効になります追加の作業は不要ですテーブルや床などの水平な面でこの機能を使用できますクイックルックでは 3Dモデルが面と交差しないようにスナップ操作中はピッチ方向の回転が無効になります 3Dモデルが面にスナップされているように見せるには必ずモデルの底部を原点に配置してください
これがクイックルックの平面マッピング機能ですではもう一つの強化機能を見るためにまたiPhoneのモデルを取り上げます
ご存じの通り iPhoneには多くのカラーオプションがありますこれまでこれらをプレビューするには考えられる組み合わせごとに USDZファイルを用意する必要がありましたこれらの組み合わせがすべて同じファイルにあれば便利だと思いませんかそれが可能になります
クイックルックには単一ファイルにあるさまざまな色からいずれかを選択できる設定が用意されていますクイックルックを使用した設定の簡単なデモを見てみましょう画面下部のメニューをタップするとこのiPhoneの色を変更できる新たなオプションが表示されます色を選択してホワイトチタニウムに変更してみます
素敵な色ですねクイックルックを使用すればこのように簡単にさまざまな設定を表示できますクイックルックでは USDZと Realityファイルを設定に使用できます
各設定はUSDZのバリアントに相当します
visionOSでは設定は FaceTime通話のすべての参加者間で同期されます
設定はiOSやmacOSなどすべてのプラットフォームでサポートされています同じiPhoneをiOSで表示しています
クイックルックのプレビューから設定に直接切り替えることができるので iPhoneを購入する前にすべての色を確認できたいへん便利です
こちらは設定の別の活用例ですクイックルックを使用して太陽系のすべての惑星について簡単に学ぶことができます USDZのバリアントのコード例を見てみましょうすでにお話したようにクイックルックでの各設定は USDZファイルのバリアントに相当しますこれは USDZでiPhoneのモデルを記述したコードの抜粋です
すべてのバリアントをdefaultPrimに定義したことを確認しますこの定義によりクイックルックからバリアントを問い合わせて表示できます
タイトルに色を適用しデフォルトの色をブラックチタニウムとしていますこの色がモデルと共に表示されるので現在どの設定が読み込まれているかがかわかります
設定のボタンをタップすれば他の色を選択できます
ホワイトチタニアムを選択すると選択した色に変更されたモデルが再度読み込まれます
バリアント名にはスペースを使用できないので代わりにアンダースコアを使用しますクイックルックで表示されるときには自動的にスペースに変換されます設定を作成するときには読み込み時間への影響を考慮してください重いテクスチャ複雑なジオメトリシェーダの多用は避けてください迅速かつシームレスに読み込まれる設定を目指しスムーズなクイックルック体験を提供しましょうまた異なるデバイスやプラットフォームで設定を十分にテストし見た目や使い勝手が満足行くものであることを確認するとよいでしょう詳しくは Scottのセッションで空間コンピューティングでの3Dアセットの最適化について説明しています今日のお話をまとめたいと思います PreviewApplication APIを使用することでウィンドウ形式のクイックルック体験をアプリからより細かく制御できますこの制御はコレクションビューやセッションの編集と管理にまで及びます平面へのスナップにより水平面に3Dモデルを容易に配置できます最後に設定を使用するとクイックルックで多彩なプレビューができ製品教育デザインに新たなユースケースが生まれます
クイックルックの新機能は以上です皆さんがどのようなものを作るのか楽しみにしています

#usda 1.0
(
	defaultPrim = "iPhone"
)

def Xform "iPhone" (
	variants = {
		string Color = "Black_Titanium"
	}
	prepend variantSets = ["Color"]
)
{
	variantSet "Color" = {
		"Black_Titanium" { }
		"Blue_Titanium" { }
		"Natural_Titanium" { }
		"White_Titanium" { }
 }
}

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

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

関連する章

リソース

関連ビデオ

WWDC24