SharePlayでの空間Personaテンプレートのカスタマイズ

SharePlayでの空間Personaテンプレートのカスタマイズ

visionOSのSharePlay体験で空間Personaのカスタムテンプレートを使用し、アプリに応じてPersonaの配置を微調整する方法を確認しましょう。サンプルアプリでSharePlayを使用して、空間Personaのカスタムテンプレートを導入する方法、シート間で参加者を移動する方法、シミュレータで変更をテストする方法を説明します。体験の魅力を高めるカスタム空間テンプレートをデザインするためのベストプラクティスもご紹介します。

関連する章
- 0:00 - Introduction
- 1:01 - SharePlay on visionOS
- 4:50 - Build "Guess Together"
- 23:41 - Play Guess Together
- 25:13 - Design for Spatial Personas
リソース
関連ビデオ

WWDC23
- 空間的なSharePlay体験の構築
WWDC22
- 優れたSharePlayエクスペリエンスを提供する
WWDC21
- Group Activitiesによるカスタムエクスペリエンスの構築
ダウンロード

― こんにちはEthanです ― Kevinです私たちは Spatial FaceTimeチームのエンジニアです本セッションでは空間Personaの臨場感を活用して visionOSアプリを構築するプロセスをご紹介しますその過程で SharePlayアプリの開発中に使用できる新しいXcodeの機能と GroupActivities APIについて説明しますこのセッションは 3つのパートに分かれています最初に visionOSの FaceTimeとSharePlayについて説明しますそのあと「Guess Together」というサンプルアプリを構築しながら空間Personaのカスタムテンプレートを定義するための新しいAPIについて説明しますまた FaceTime通話をシミュレートする新しいサポートを使用して visionOS SharePlayアプリをシミュレータでテストする方法も紹介します最後に Kevinが空間Persona向けの優れたSharePlay体験の設計方法を説明しますでは visionOSの FaceTimeとSharePlayから始めましょう
visionOSのFaceTimeは空間Personaを活用して迫力のある臨場感を生み出します FaceTimeと空間Personaによってまるで同じ部屋にいるような感覚になります SharePlayアプリは本セッションで扱うフリーボードアプリと同様にこの体験の核となる部分です SharePlayを採用することで FaceTimeが提供する共有コンテキストを自分のアプリに拡張することができます
visionOSでSharePlayを採用する時はアプリの視覚的な一貫性を保つ必要がありますアプリのUIは通話の参加者全員の環境で同期されている必要がありますそしてFaceTimeは一貫性のある方法で参加者をアプリ内に配置することで空間的なコンテキストが共有されることを維持する役割を果たしますこの視覚的および空間的な一貫性が組み合わさることで参加者が共有スペースで同じ1つのアプリを使用しているという錯覚を生み出しますコミュニケーションをとるにはアプリのUIを指差したりジェスチャを使うことができます物理的な共有スペースでホワイトボードを囲んで集まっている時と何も変わりません典型的なvisionOSでのFaceTime通話は空間Personaが円形に配置された状態から始まります参加者同士がやり取りしやすい配置ですこの状態から参加者はいつでも SharePlayアクティビティを開始できその通話は空間テンプレートに移行しますそして各参加者の空間Personaが新しく共有されたアプリを基準に再配置されます重要なのはこのテンプレートは各参加者の開始位置または座席を定義するだけだということです参加者は1人また1人といつでも最初のテンプレートの位置から離れスペース内を動き回ることができますただしいずれかの参加者がデバイスの Digital Crownを使用して中央に再配置するとすべての参加者が元の開始位置に戻ります
GroupActivitiesフレームワークには SharePlayアプリで実装できるさまざまなシステム組み込みの空間テンプレートが用意されています例えばビデオアプリではこれまで見てきた横並びテンプレートがよく使われますこのテンプレートでは前面のアプリに対して参加者が弧を描くように配置されます一方音楽アプリには会話型のテンプレートがおすすめですこのテンプレートでは参加者は開いた円形に配置されその円の端の欠けている部分にアプリが配置されますまた 3Dモデリングアプリを見る時は円形テンプレートがよく使われます参加者は中心に置かれた共有ボリュームを取り囲むように円状に配置されます
これらのテンプレートはいずれも共有するアプリを基準に席を定義します空間Personaは共有アクティビティの開始時に配置されその前に共有スペース内のどこにいたかは関係ありませんではアクティビティがこれらの組み込みのシステムテンプレートに適さない場合はどうでしょうか例えばチェスアプリを作成していて 2人のプレーヤーを向かい合わせに配置し残りの参加者は観客として脇に配置したい場合がありますまたカードゲームの場合はディーラーが他のプレーヤーの向かい側に配置されるべきでしょう visionOS 2では新機能としてカスタム空間テンプレートの作成ができます共有するシーンに合わせて空間Personaの配置をアプリで完全に制御できますカスタム空間テンプレートとそれが解き放つ visionOSのユニークなソーシャル体験の可能性に本当にワクワクしています
このセッションの次のパートではより高度なSharePlayの概念に焦点を当てます SharePlay、Group Activities visionOSを初めて使う方は「Build custom experiences with Group Activities」と「Build spatial SharePlay experiences」を先にご覧いただくとこのセッションをより深く理解できます前者ではアプリの状態をアクティビティの参加者間で同期する方法を後者では空間SharePlayの概要を説明しています
それでは私が取り組んできたサンプルアプリの「Guess Together」を見ていきましょう「Guess Together」はチームで行う言葉当てゲームです FaceTimeで空間Personaを使用してプレイしますジェスチャーゲームに少し似ています 2つのチームに分かれて順番に行います自分の番になると秘密のフレーズが与えられます有名人の名前やイディオムなどですそしてチームのメンバーにそのフレーズを当ててもらいますフレーズそのものを言わなければどんな手段を使ってもかまいません Guess Togetherは 4つのステージで構成されていますまずアプリを起動するとウェルカムUIが表示され現在のFaceTime通話で SharePlayグループセッションを作成するように招待されます SharePlayが始まるとカテゴリ選択ステージに進みますここで使用するカテゴリを決めます例えば歴史上の出来事から引用したフレーズや野菜や果物といったもっとシンプルなものもあります次はチームの選択です青チームか赤チームのどちらかを選択しますこれでゲームが始まります Guess Togetherの画面にスコアボードとタイマーが表示されますアクティブプレーヤーの前には 2つ目のビューが表示されチームメンバーが当てる秘密のフレーズが表示されますここで SharePlayの開始前に表示されるウェルカムステージを除いてそれ以外の各ステージには空間テンプレートが必要ですアプリの各画面にユーザーインターフェイスを実装する時と同じように visionOSのSharePlayアプリで共有するシーンに対して空間Personaをどのように配置するかを慎重に検討する必要があります
カテゴリ選択画面のユーザーインターフェイスはすべての参加者で共有し誰でも簡単に使えるようにしますこの時点では参加者に何の区別もなくアクティブプレーヤーはおらずプレーヤーはチームに分かれていませんしたがってここではシステムに用意されている横並びテンプレートが適していますこれはGuess Togetherのようなウインドウ表示アプリのデフォルト設定ですこのテンプレートはまさにこの目的のために設計されており参加者は共有するアプリの方を向いて弧を描くように配置され全員がインターフェイスに簡単にアクセスできますチーム選択画面も要件は同様ですが大きな違いが1つありこの時点で参加者がそれぞれのチームに分かれますそのため私はここでチームメンバー同士を隣の席にしたらどうかと考えましたそれにはチーム別の席が必要になるためチーム選択画面ではカスタム空間テンプレートを使います
最初参加者はアプリの方を向いて 5つの席のいずれかに座っています横並び型と同様ですしかしチームに参加すると Guess Togetherは参加者を青チームか赤チームの席に割り当てますそしてFaceTimeは実際に参加者を新しい席に再配置しチームの他のメンバーと隣り合わせの席になります
ゲームステージには明らかにカスタム空間テンプレートが必要です参加者はここで複数の役割に分かれますアクティブプレーヤーや相手チームのプレーヤーなどです
アクティブプレーヤーはスコアボードウインドウの左側に座ります台座が目の前にありますチームのメンバーはその向かい側に座ります共有するアプリの右側です相手チームはスコアボードのウインドウの正面に座ります
これがGuess Togetherですこのセッションの次のパートでそれぞれのテンプレートを一緒に実装していきましょうこれには SharePlayアクティビティ自体の反復とテストが少し必要です幸いこれは新しいXcode 16で実現できます
Xcode 16では visionOSシミュレータで FaceTime通話をシミュレートできますこれは visionOS向けSharePlayアプリ開発において大きな変革ですデバイスで実際にFaceTime通話を行わずにアプリを完全に構築できるようになりました FaceTime通話のシミュレーションを開始するにはまずメニューバーでメニューを開きます次はサブメニューですそこからリモート参加者の構成を選択しますアプリは様々な構成で試してみることが重要ですこんな感じです試してみましょう
XcodeでGuess Togetherプロジェクトを開きましたシミュレータで実行します
これがGuess TogetherですまだSharePlayセッションに参加していないためウェルカムステージが表示されています
マウスをメニューに動かして FaceTimeをアクティブにしますサブメニューでを選択します
このように FaceTime通話のシミュレーションが始まります空間ボタンを使用して空間Personaを有効にします
ボタンがアクティブになり SharePlayを始める準備ができましたクリックしてみましょう
アプリは現在 SharePlayセッションに参加中でカテゴリ選択ステージを表示しています左にパンすると
シミュレートされた参加者が横並びテンプレートに移動したのがわかりますではコードでどのように設定されているか見てみましょう
Guess Togetherでは現在のSharePlay グループセッションとのやり取りを SessionControllerクラスで管理しています開いてみましょう
SessionControllerは特定のSharePlayセッションにおけるアプリの状態をすべて追跡して同期しますこの部分でセッション自体と他の参加者と状態を同期するための GroupSessionMessengerと空間Personaを設定するためのセッションのSystemCoordinatorを保存しますさらにアプリの各種の状態を更新するためのメソッドがありますチーム選択ステージに入るチームへ参加するゲームを開始するなどですすでに多くは完成しているため残りの部分を確認していきましょうまずチーム選択ステージのカスタム空間テンプレートを設計して構成する必要がありますそれが終わったらゲームステージに進みそのテンプレートを構成しますそのあとゲームステージのグループイマーシブ空間を構成し現在のフレーズを表示する台座をアクティブプレーヤーの席の前に配置します
最後にアプリが完成したら FaceTime通話に参加し Guess Togetherを実際にプレイします全体の体験がどのようにまとまるかを理解できるでしょう
前に示したようにチーム選択のテンプレートの完成形はこのようになりますアプリの前に5つの観客席と 3人掛けのチーム席が2セットあります
まずはこの5つの席についてテンプレートを作成していきます空間テンプレートを定義するには SpatialTemplateプロトコルに準拠した型を作成しますここでは TeamSelectionTemplateという SpatialTemplateに準拠した構造体を作成します
SpatialTemplateの主な要件はテンプレート要素の配列です
これらの要素は所定の位置の席として定義されます
席には1つの空間Personaを設定できますあとは席の位置を決めるだけです
席の位置は共有するアプリの位置に対して相対的に定義します最初の自分の席はアプリの正面に配置したいので Xオフセットを0に設定しアプリの中心と一致させます Zオフセットを4に設定しアプリの正面4メートルに配置します 2つ目の席の Zオフセットは同じままにしますが今回はXオフセットを1に設定し最初の席から右に 1メートルのところに配置しますまず appに自分の席を配置し appの前からZ軸方向に 4メートルずらします 2つ目の席はまず同じ位置に配置してから Xオフセットを調整して右に1メートル動かします
3つ目も同じようにします今回は左に1メートルずらします残りの2つの席はそれぞれ左右にさらに1メートルずらして配置します
ここまででチーム選択のテンプレートを定義するための SpatialTemplateプロトコルに準拠した構造体の作成まで完了しましたテンプレート内の各席の位置を定義するためにアプリからオフセットされる位置を X軸とZ軸の両方の値で指定しましたこれらの値はメートル単位で指定しますここまでは順調ですがまだ赤チームと青チームの席が必要です元の5つの席から斜めの方向にあと6席設定する必要がありますさらにそれぞれ青チームと赤チームのメンバー用の予約席としてマークする必要がありますまずはテンプレートの一番左の席から左に0.5メートル前に0.5メートルずらした位置に席を作成します
同じパターンで青チームの残りの2席を作成しますここでそれらの席に何らかの方法で青チームのマークを付ける必要がありますこれには SpatialTemplateの役割を使用します席に役割を割り当てることでその役割に割り当てれらた参加者用に席を予約することができます役割を定義するには SpatialTemplateRoleプロトコルに準拠した型を作成しますそこで生の値であるStringを使用して SpatialTemplateRoleに準拠した Roleという列挙型を作成しますそのあと blueTeamとredTeamという役割を作成します
できましたこれで青チームの席に blueTeamの役割を割り当てて blueTeamのメンバー用に予約できます
ここでは青チームの席用に blueTeamの役割を SpatialTemplateRoleに準拠した列挙型を使用して作成しましたさらにテンプレートの最初の席から斜めの位置に席を3つ配置しそれぞれにその役割を割り当てましたこれで青チームの参加者用に予約されます
赤チームの席についても同様に行います
これでテンプレートは完成です！次にこれをチーム選択ステージでアクティブにする必要がありますこれはSessionControllerで行います Guess Togetherで空間テンプレートの管理に使用しているメソッドは updateSpatialTemplatePreferenceです teamSelectionのケースを更新し SystemCoordinator構成にアクセスします
組み込みの環境設定を設定する代わりに新しいカスタムメソッドを使用して TeamSelectionTemplateを渡します
これでカスタムテンプレートの作成と設定は完了しましたがまだ重要なステップが残っています役割の割り当てですローカル参加者のチームが変更された時に FaceTimeに通知し新しい席に移動することをシステムに認識させる必要があります
Guess Togetherで役割の割り当て処理に使用するメソッドは updateLocalParticipantRoleですまず現在のゲームステージを切り替えますそれに応じて必要な役割が変わるからです
teamSelectionステージではローカル参加者の空間テンプレートの役割がチームに応じて変わりますでは切り替えてみますこれで青チームの役割を割り当てる準備ができました systemCoordinatorにアクセスし assignRoleメソッドを使います先ほど定義した blueTeamの役割を渡します
赤チームについても同じパターンに従います
チームがnilの場合観客席に座ることになりますがこの席には役割はありませんそのため systemCoordinatorでは resignRole()メソッドを使うだけで済みますここで categorySelectionステージの役割の更新についても確認しておきましょうカテゴリ選択では組み込みの横並びテンプレートを使用しており役割はありませんこのステージになった時には必ず役割を破棄するようにします前のステージから役割を引き継がないようにするためです
これでOKです試してみましょう
アプリをもう一度実行して今回はチーム選択に進みます
赤チームに参加すると赤チームの席に移動します
青チームに参加するとこのように青チームに切り替わります
簡単に復習しましょう空間テンプレートの席に役割を追加するとその役割の参加者用にその席が予約されることになります FaceTimeでは関連する役割が参加者に割り当てられるまではその席は空席となりますローカル参加者に役割を割り当てるには systemCoordinatorの assignRoleメソッドを使います FaceTimeでその役割の席が空いていればローカル参加者の空間Personaがその席に移りますローカル参加者を役割のない席に戻すにはそのローカル参加者の役割を破棄しますこれを行うには systemCoordinatorの resignRoleメソッドを呼び出します
これで最初の作業は完了ですあとの2つはもっと簡単に進むはずですそれではゲームステージの空間テンプレートに進みましょう
ゲームのテンプレートの完成形はこのようになりますアクティブプレーヤーがチームメンバーと向かい合って座るようにします順番が変わると参加者の席が入れ替わります相手チームのプレーヤーは脇にある観客席に座りますここまでは新しいことは何もなくチーム選択のテンプレートの作成と同じですしかしこのテンプレートに追加したいカスタマイズが1つあります席の向きですデフォルトでは空間テンプレートの席は共有するアプリの方を向いていますが席の向きをカスタマイズして任意の方向を向くように設定できますこのテンプレートではアクティブプレーヤーがアクティブチームの方を向きアクティブチームもアクティブプレーヤーの方を向くようにします観客席についてはデフォルトのままアプリを正面から見るようにしておくのが適していますではゲームのテンプレートを開きますこのテンプレートの大半はすでに完成しているのでここでは細かい部分を見る必要はありませんそれぞれの席の向きの設定だけ行いますテンプレートでは 3種類の席のセットが定義されていますプレーヤー席アクティブチーム席観客席です
ここでアクティブチームの位置はこのテンプレートを作成する時に独自の変数として定義してありますそのためプレーヤー席の向きの設定時にはその位置を再利用できますではプレーヤー席がその位置を向くように設定します directionパラメータを指定し lookingAtメソッドを使います
これでプレーヤー席の向きが変わりアクティブチーム席の真ん中を向くようになります次にチーム席の向きを設定しましょうここでもdirectionパラメータを指定します今回は lookingAtメソッドにプレーヤー席を直接渡しています
これでテンプレートは完成です
次にこれをゲームステージでアクティブにし Guess Togetherの役割割り当てロジックを更新する必要があります SessionControllerに戻りましょう
まずはゲームのテンプレートを設定しますチーム選択で使用したのと同じパターンで構成することから始めます
次は役割を割り当てますこの場合役割はアクティブプレーヤーによって決まります 3つの分岐を持つ条件文を作成します
1つ目はアクティブプレーヤー用 2つ目はアクティブチーム用 3つ目は観客用ですここでも systemCoordinatorの assignRoleメソッドを使います
アクティブチームについても同じようにします
最後の観客については現在の役割を破棄するだけです
ではゲームステージを見てみましょう
ステージが始まると自分はチームメンバーが座る席の方を向いていますスコアボードは左側にあります
右側にいるのは観客ですこれにより Guess Togetherのユーザーに優れた体験を提供できますなぜなら自分の番が来てもそのたびに向きを変える必要がないからです部屋の反対側のチーム席にシミュレートされた参加者が 1人も座っていないのはなぜかと疑問に思うかもしれませんこれはシミュレートされた参加者がテンプレートで自分に役割を割り当てることはないからですそのため常に役割がない最初の空いている席に座ることになります
2番目の作業はこれで完了です続いてゲームステージのイマーシブ空間について見ていきましょうゲームステージでは現在の秘密のフレーズをアクティブプレーヤーに表示する方法が必要ですここで 2つ目のプライベートウインドウを用意してアクティブプレーヤーにだけ表示することもできますがオープンなイマーシブ空間を用意して空間的な共有コンテキストを維持できるようにするとよいと思います
これにより追加の共有UI要素を用意してアクティブプレーヤーの前に配置することができます
デフォルトでは SharePlayでイマーシブ空間を開くとそのスペースは非公開になりそれぞれの参加者に固有となりますつまりイマーシブ空間にいる間は参加者はお互いの空間Personaを見ることができませんイマーシブ空間を構築して参加者間で共有する場合は SystemCoordinator構成でグループイマーシブ空間を選択できますグループイマーシブ空間のカスタム空間テンプレートを開発する際テンプレート内の席に対して相対的に UI要素を配置できますテンプレートの原点は共有スペースの原点でもあるためです試してみましょう
まずは共有のグループイマーシブ空間を用意します SystemCoordinator構成にアクセスし supportsGroupImmersiveSpace プロパティを trueに設定します
これで秘密のフレーズの台座を追加する準備ができましたこれについてはすでに用意してあります確かめてみましょう ImmersiveSpaceグループを展開し PhraseDeckPodiumViewを開きます
台座は SwiftUIビューをアタッチした RealityViewとして定義してあります台座の位置の設定はこのメソッド updatePodiumPositionで行いますではアクティブプレーヤーの席の前に置いてみましょうまず台座の位置をプレーヤーの席の位置に合わせますこの位置はゲームのテンプレートで定義されていますそのあと 0.5メートルほどずらしてアクティブプレーヤーの前に置きますここではアクティブプレーヤーの席の位置をそのまま使うことができます RealityKitとGroupActivitiesはどちらもデフォルトの長さの単位がメートルであり変換の必要はありませんグループイマーシブ空間を選んだのでアプリのイマーシブ空間の原点は空間テンプレートの原点でもあります
試してみてください
アクティブプレーヤーがゲームステージに入るとチームメンバーと向かい合わせになりすぐにヒントを表示する台座が正面に現れます
試すのが今から楽しみですこれで完了です
あとは Guess Togetherを実際にプレイするだけですでは別の部屋からFaceTimeで連絡します
こんにちはKevin やあEthan GabbyとMiaも連れてきましたこんにちはみなさんこんにちは Guess Togetherをプレイしてみましょうカテゴリはどれにしますか私は野菜はやめておきますわかりました映画とテレビも外しましょう
さてではチームを選びましょうか始めましょう
私は青チームにします
私は赤チームにします
私も赤チームにします
では私は青チームですね
決まりましたねみなさん準備はいいですかではプレイしましょう
最初は私からのようですがんばってくださいでは始めます
なるほどこれは果物で普通は赤か緑ですとても甘くて人気があってあまり大きくはありませんりんごですね正解ですそうですねこれは楽器です小さい音も大きい音も出せることが名前の由来になっています見当もつきません鍵盤が88鍵ありますピアノですね
はい当たりです
楽しかったですみなさんありがとうございました
Ethan 素晴らしいサンプルのアプリを用意してくれてありがとう Guess Togetherは友だちと遊ぶときっと盛り上がりますここまでカスタム空間テンプレートを使ったアプリの作成方法を見てきたので次は空間Persona向けの SharePlay体験を設計するプロセスを見ていきましょう visionOS向けの新しいSharePlay体験を設計する最初のステップは使用する空間Personaテンプレートのタイプを選ぶことです具体的にはカスタムテンプレートか組み込みシステムテンプレートかを決めます
ここで最初の問いとしてカスタムテンプレートを使うことで体験が向上するかどうかを検討する必要があります完全にカスタムの空間Personaテンプレートを作成する前にその体験で本当に恩恵を得られると確信する必要がありますシステムの空間Personaテンプレートは空間Personaを使った体験が優れたものになるように様々な調整が施されています参加者全員がアプリの前に座る場合は横並びテンプレートがおすすめですこのテンプレートは非常に便利でウインドウ表示アプリやメディア視聴アクティビティに最適です会話テンプレートはそれぞれの参加者をアプリの近くに集めることで互いに集中できるようにします円形テンプレートはアプリがボリュームである場合参加者をその周りに円状に配置したい場合に最適ですシステムテンプレートを使用するとカスタムと比べていくつかの利点がありますその1つは使い慣れたより快適な体験をアプリのユーザーに提供できることですアプリのインターフェイスになるべく標準のUIコントロールの使用が推奨されるのと同じようにユーザーがすでに慣れ親しんでいる空間Personaテンプレートを使用することをおすすめします
さらにシステムテンプレートは通話の空間Personaの数に合わせて自動的に調整されますアクティビティの途中での参加者の増減にも対応できますまた FaceTimeでサポートされる上限に対応した十分な席が常に確保され全員が互いに見えるように配置されますさらにシステムテンプレートは全員がアプリを使用できるように共有するシーンのサイズに合わせて動的に調整されます
すべてのシステムテンプレートを検討したうえでそれでも完全なカスタムの方が効果的であると判断した場合は次の問いとして複数のテンプレートを使うことで体験が向上するかどうかを検討します
自分の体験を一枚岩として扱わないことをおすすめします Guess Togetherを設計する時はアプリ全体に1つのカスタムテンプレートを使用するのでなくゲームの各ステージを個別に検討しシステム提供とカスタムのテンプレートを組み合わせて使用しますこうした問いに対する答えはアクティビティの段階によって異なる場合があるためそれぞれの部分に応じて該当するテンプレートを使用することをおすすめします先に進む前にもう1つ問いかけるべき質問があります
空間Personaを使用しない参加者をどのようにサポートするかということです
visionOSを念頭に置いて SharePlay体験を設計する際には SharePlayアクティビティで空間Personaを使用している参加者のことだけを考えてしまいがちですがそれでは十分でないことがありますマルチプラットフォームの SharePlayアクティビティであればプラットフォームが空間Personaに対応していない参加者もいるかもしれません visionOS向けの専用アプリであっても SharePlayアクティビティの間に参加者はいつでも空間Personaを切り替えることができます体験を設計する時は両方のケースを想定するようにしてください以上がテンプレートの選択です続いて席の定義に進みましょう席を定義するにあたり鍵となるベストプラクティスがいくつかありますすべての空間Personaの席を用意すること席と席の間に十分な間隔を設けることそして席の順番を慎重にそして意図的に検討することです例えばチェスのような2人用ボードゲームのテンプレートを作成するとしますテンプレートの最初のドラフトはこんな感じですアプリのボリュームを挟んで 2つの席を向かい合わせにしています SharePlayアクティビティに参加する空間Personaが2つだけであればこれで問題ありませんしかし 3人目の参加者が加わり空間Personaを使うとなると使い勝手がよくありません追加の参加者の席を作成していないため FaceTimeはその空間Personaを他の参加者と一緒に配置できません代替手段として 3人目の参加者は組み込みのテンプレートに単独で配置されますがそれだとチェスをする2人から3人目は見えず 3人目から最初の2人も見えませんそのためすべての空間Personaの席を用意することが重要ですテンプレートに3席追加すると FaceTime通話でサポートされる空間Personaの最大数に対応した十分な席が確保されアクティビティに参加するすべてのユーザーの体験が向上します同様に重要なのはすべての空間Personaの席について席と席の間に十分な間隔を設けることですそれぞれの席を少なくとも1メートルは離して配置することをおすすめしますこれにより隣の席の人が多少動いても十分なスペースがあるため狭いと感じることはありません
空間Persona同士の距離が近すぎるとその人たちは消え静的な連絡先の画像に置き換わってしまう点にも注意が必要です席と席の間に十分な間隔を設けることでアクティビティの参加者に互いの空間Personaが常に快適に見えるようになります
最後に席の順番は意図を持って決めることが重要です考えられるすべての空間Personaの組み合わせをテンプレートで検討し席が正しく埋まるように確認することをおすすめします例えば空間Personaが3つの場合カスタムテンプレートの設定時に指定した最初の3席が順番に使用されます
この例では新しい参加者が加わると中央から順番に席が埋まっていきます
一方左から右の順に席を定義した場合はその順番で席が埋まっていくためすべての席が埋まらない場合にバランスの悪いテンプレートになります
席が埋まる順番はテンプレートのelements配列での席の指定順序で決まりますこれはアプリに向かって席を一列に並べるシンプルなテンプレートです Guess Togetherでチーム選択に使用したものに似ています参加者が通話に参加すると elementsリストの席の順序に従って席が埋まっていくのがわかります
カスタム空間テンプレートの席の定義については以上ですが次に進む前にあと1つ非常に重要な問いがありますそれぞれの席に最初に座った時にその人がどこを見るようにするかつまり各席の焦点をどこにするかということですデフォルトでは席はアプリの中心を向いていますが席の向きは自由に変えることができますアプリを使う人が席に座った時に何に焦点を当てるべきかがわかるようにする必要があります別の参加者のアプリを見ればよいでしょうかまったく別の場所でしょうか新しいAPIには席の向きを設定するための様々なツールが用意されています Guess Togetherのゲームのテンプレートでは lookingAtメソッドを使用してアクティブプレーヤーの席がチームのメンバーの方を向くようにしました lookingAtで空間テンプレートの任意の要素の位置を指定してどこか別の具体的な場所を向くように席の向きを変えることもできますまた alignedWithメソッドを使うと X軸やZ軸などアプリの直交軸に沿って席を並べることができます例えば席を一列に並べすべての席がアプリの面に対して直角にアプリの方を向くようにするには席をZ軸にそろえて配置しますさらに最初の向きを決めたあといつでも席を回転させることができます指定する値には度数とラジアンのどちらも使用できますそれぞれの席の向きと位置が決まったら次はテンプレート内のどの席が特別であるかについて検討しますつまりいずれかの席を予約する必要があるかどうかです
どの席に役割が必要かではなくどの席が特別であるかまたはどの席に予約が必要かを検討するのです先ほど見たチェスのテンプレートでは対戦するアクティブプレーヤーがそれぞれの席に座るまでプレーヤーの席は空席になるようにしています一方または両方のプレーヤーが空間Personaを有効にしていない場合でも空席のままにしてあとで必要になった時のために予約しておく必要があります一方観客席は特別ではないので役割は割り当てません観客用に3つ目の役割を作ろうと考えがちですが各参加者が観客の役割をリクエストすることで遅延が生じユーザー体験の低下につながる可能性があるので代わりに役割がない席に FaceTimeで直接座らせるようにします可能な限り役割のない席を使用することで FaceTimeで参加者を遅滞なく席に着かせることができます
参加者を特定の場所に配置する必要がある場合は席を予約する方法として役割を使いますただしすべての参加者が役割を使えるわけではありません別のプラットフォームを使用していたり空間Personaを無効にしていることもあります
ここまでにどのタイプのテンプレートを使用すべきか席の位置や向きはどうするかそして特定の参加者用に席を予約する必要があるかを検討しましたこれで SharePlay体験向けの優れたカスタム空間テンプレートができたはずです最後にあと1つ設計する時にぜひ覚えておいてほしいことがあります
驚きは不要だということです空間Persona向けの SharePlayアプリを設計する時に設計者にできる重要なことの1つはアプリを使う人が想定していないような空間Personaのテンプレートは作らないということですカスタム空間テンプレートを使うとアプリで実に様々なことができますテンプレートの切り替えと役割の変更により参加者の空間Personaをアプリで動かすことができます FaceTime通話の表現は共有スペースのあちこちに現れますテンプレートが変わった時や役割を使って別の席に割り当てられた時に使う人がどのような反応をするかをよく検討することが非常に重要です一般的なガイドラインを見てみましょう
テンプレートの切り替えは最小限にします
テンプレートを変更すると席の移動や回転役割の交代テンプレートタイプの変更などで方向感覚が失われることがありますそのためあまり頻繁に行うべきではありません Guess Togetherではステージごとに席の位置が変わらない場合は単一のテンプレートを使い必要な時だけ役割を使用して参加者を別の席に移動しています
テンプレートを切り替える時は参加者が向きを変えられるように必ず視覚的なコンテキストの手掛かりを用意しますこれは席の向きに限らず各席の視野に視覚的なアンカ点を持つようにすることが重要ですアプリ自体でも別の参加者でもかまいません
最後にテンプレートの変更は参加者の明示的な操作と結びつけるようにします Guess Togetherのチーム選択ステージはこの典型的な例で役割の変更は誰かがボタンを押して青チームか赤チームに参加する操作と
結びついています
設計プロセスのすべての段階で不要な驚きは与えずに驚きが本当に楽しい体験になるように最善の方法を検討してください最後になりますが Guess Togetherのサンプルコードはぜひダウンロードして友だちと使ってみてください本当に楽しいだけでなく空間テンプレートで何ができるか優れたアイデアがたくさんつまっていますまたXcode 16の新しいvisionOSシミュレータで FaceTime通話のシミュレーションを使って SharePlay体験を試してみてくださいこの素晴らしいツールは visionOS向けの優れたSharePlayアプリを開発するのに役立ちますどの種類の空間テンプレートを使うかに関係なく使用できますそしてカスタム空間テンプレートで体験が向上するかどうかを検討してください既存のシステムテンプレートを使った方が効果的な場合もあります最後に visionOS向けの優れた SharePlay体験の設計を始めるにあたり不要な驚きは避けるようにしてくださいカスタム空間テンプレートは本当に素晴らしい体験を FaceTimeで実現する優れたツールですが使う時は慎重な検討が必要です
カスタム空間テンプレートを使用してみなさんがvisionOSで素晴らしい体験を構築されることを楽しみにしていますご視聴ありがとうございました

// Team selection template – custom spatial template

import GroupActivities

struct TeamSelectionTemplate: SpatialTemplate {
    let elements: [any SpatialTemplateElement] = [
        .seat(position: .app.offsetBy(x: 0, z: 4)),
        
        .seat(position: .app.offsetBy(x: 1, z: 4)),
        .seat(position: .app.offsetBy(x: -1, z: 4)),
        
        .seat(position: .app.offsetBy(x: 2, z: 4)),
        .seat(position: .app.offsetBy(x: -2, z: 4)),
    ]
}

13:31 - Completed team selection template with seat roles

import GroupActivities

/// The custom spatial template used to arrange Spatial Personas
/// during Guess Together's team-selection stage.
///
/// The team selection template contains three sets of seats:
///
/// 1. Five audience seats that participants are initially placed in.
/// 2. Three Blue Team seats that participants are moved to
///    when they join team Blue.
/// 3. Three Red Team seats.
///
/// ```
///                ┌────────────────────┐
///                │   Guess Together   │
///                │     app window     │
///                └────────────────────┘
///
///
///              %                       $
///                %                   $
///   Blue Team      %               $      Red Team
///                    *  *  *  *  *
///
///                       Audience
/// ```
struct TeamSelectionTemplate: SpatialTemplate {
    enum Role: String, SpatialTemplateRole {
        case blueTeam
        case redTeam
    }
    
    let elements: [any SpatialTemplateElement] = [
        // Blue team:
        .seat(position: .app.offsetBy(x: -2.5, z: 3.5), role: Role.blueTeam),
        .seat(position: .app.offsetBy(x: -3.0, z: 3.0), role: Role.blueTeam),
        .seat(position: .app.offsetBy(x: -3.5, z: 2.5), role: Role.blueTeam),
        
        // Starting positions:
        .seat(position: .app.offsetBy(x: 0, z: 4)),
        .seat(position: .app.offsetBy(x: 1, z: 4)),
        .seat(position: .app.offsetBy(x: -1, z: 4)),
        .seat(position: .app.offsetBy(x: 2, z: 4)),
        .seat(position: .app.offsetBy(x: -2, z: 4)),
        
        // Red team:
        .seat(position: .app.offsetBy(x: 2.5, z: 3.5), role: Role.redTeam),
        .seat(position: .app.offsetBy(x: 3.0, z: 3.0), role: Role.redTeam),
        .seat(position: .app.offsetBy(x: 3.5, z: 2.5), role: Role.redTeam)
    ]
}

14:59 - Configuring a custom spatial template

systemCoordinator.configuration.spatialTemplatePreference = .custom(TeamSelectionTemplate())

15:39 - Assigning the local participant a spatial template role
```
systemCoordinator.assignRole(TeamSelectionTemplate.Role.blueTeam)
```
16:00 - Resigning the local participant from a spatial template role
```
systemCoordinator.resignRole()
```

17:00 - Spatial template roles

// Associating a role with a seat

.seat(position: .app.offsetBy(x: -2.5, z: 3.5), role: TeamSelectionTemplate.Role.blueTeam)

// Assigning the local participant a role

systemCoordinator.assignRole(TeamSelectionTemplate.Role.blueTeam)

// Resigning the local participant from their current role

systemCoordinator.resignRole()

18:42 - Game template with seat direction

import GroupActivities

/// The custom spatial template used to arrange spatial Personas
/// during Guess Together's game stage.
///
/// The team selection template contains three sets of seats:
///
/// 1. An seat to the left of the app window for the active player.
/// 2. Two seats to the right of the app window for the active player's
///    teammates.
/// 3. Five seats in front of the app window for the inactive team-members
///    and any audience members.
///
/// ```
///                  ┌────────────────────┐
///                  │   Guess Together   │
///                  │     app window     │
///                  └────────────────────┘
///
///
/// Active Player  %                       $  Active Team
///                                        $
///
///                      *  *  *  *  *
///
///                         Audience
///
/// ```
struct GameTemplate: SpatialTemplate {
    enum Role: String, SpatialTemplateRole {
        case player
        case activeTeam
    }
    
    var elements: [any SpatialTemplateElement] {
        let activeTeamCenterPosition = SpatialTemplateElementPosition.app.offsetBy(x: 2, z: 3)

        let playerSeat = SpatialTemplateSeatElement(
            position: .app.offsetBy(x: -2, z: 3),
            direction: .lookingAt(activeTeamCenterPosition),
            role: Role.player
        )
        
        let activeTeamSeats: [any SpatialTemplateElement] = [
            .seat(
                position: activeTeamCenterPosition.offsetBy(x: 0, z: -0.5),
                direction: .lookingAt(playerSeat),
                role: Role.activeTeam
            ),
            .seat(
                position: activeTeamCenterPosition.offsetBy(x: 0, z: 0.5),
                direction: .lookingAt(playerSeat),
                role: Role.activeTeam
            )
        ]
        
        let audienceSeats: [any SpatialTemplateElement] = [
            .seat(position: .app.offsetBy(x: 0, z: 5)),
            .seat(position: .app.offsetBy(x: 1, z: 5)),
            .seat(position: .app.offsetBy(x: -1, z: 5)),
            .seat(position: .app.offsetBy(x: 2, z: 5)),
            .seat(position: .app.offsetBy(x: -2, z: 5))
        ]
        
        return audienceSeats + [playerSeat] + activeTeamSeats
    }
}

21:41 - Configure group immersive space

// Configure group immersive space

for await session in GuessingActivity.sessions() {
    guard let systemCoordinator = await session.systemCoordinator else { continue }

    systemCoordinator.configuration.supportsGroupImmersiveSpace = true
}

30:35 - SimpleLine Template

// SimpleLine.swift

struct SimpleLine: SpatialTemplate {

    let elements: [any SpatialTemplateElement] = [
        .seat(position: .app.offsetBy(x:  0, z: 2)),
        .seat(position: .app.offsetBy(x:  1, z: 2)),
        .seat(position: .app.offsetBy(x: -1, z: 2)),
        .seat(position: .app.offsetBy(x:  2, z: 2)),
        .seat(position: .app.offsetBy(x: -2, z: 2))
    ]

}

31:35 - lookingAt Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

31:46 - alignedWith Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

// Align with a given app axis
.seat(
    position: teamSeatPosition,
    direction: .alignedWith(appAxis: .z)
)

32:02 - rotatedBy Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

// Align with a given app axis
.seat(
    position: teamSeatPosition,
    direction: .alignedWith(appAxis: .z)
)

// Rotate by a given angle
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(.app).rotatedBy(.degrees(30))
)

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC22

WWDC21