Group Activitiesによるカスタムエクスペリエンスの構築

Group Activitiesによるカスタムエクスペリエンスの構築

基本的なストリーミングとインタラクションを超えた、Group Activitiesフレームワークのパワーを存分に駆使した先進的なSharePlayエクスペリエンスを構築する方法について確認します。シンプルな描画Appをリアルタイムの共有キャンバスにする方法を紹介します。グループの参加者間でカスタムメッセージをやり取りするのに役立つGroupSessionMessengerなどのAPIを掘り下げ、カスタムのSharePlayエクスペリエンスで最後の仕上げをする方法を紹介します。

リソース
関連ビデオ

WWDC23
- 空間的なSharePlay体験の構築
WWDC21
ダウンロード

(音楽) (Group Activities のユーザー体験の構築) こんにちは私の名前はウィレムです Group Activities で働いているエンジニアです AngusとAdamが参加して Group Activities でユーザー体験を作成する方法について話しますまずこのセッションで開発中のアプリを紹介しなぜそれが Group Activities のサポートを追加するのに最適な候補なのかを説明します次にアクティビティの作成とセッション管理の手順について説明しメディアエクスペリエンスを作成する場合との違いについて説明します最後にユーザーがアプリを使用しているときのエクスペリエンスを向上させる方法をいくつか紹介します Group Activities ではSharePlay を使用してデバイス間で共有エクスペリエンスを構築できますメディア体験の創造に焦点を当てているがだからといって創造性を放り出してアプリが複数のデバイスでどのように体験できるかを見ることを妨げるべきではないここでは「Coordinate media experiences with Group Activities」セッションで紹介したコンセプトを基にしていきますそれをチェックすることを強くお勧めします
このセッションでは DrawTogether というアプリを使って FaceTimeで一緒に絵を描けます画面全体がキャンバスになっていて誰もがランダムな色を使って絵を描くことができますしかしシンプルであるにもかかわらず友達と一緒に絵を描いたりその素晴らしい技術に感心したり下手な絵を見て笑ったりするのは信じられないほど楽しい私自身も間違いなく 2番目のカテゴリーに入ります私たちが目指すものの簡単なデモをお見せしましょう
やあみんなどうしたの? Adam質問があるのを見たうん Angusと私は話していましたが Angusはあなたは本当に素晴らしい芸術家だと言ってピカソのクラスです見せてくれ! Willemの絵を何枚か見たけどすごいわね Angus少し誇張してるだけだと思うでも私にできることをお見せできてうれしいです DrawTogether アプリに行きましょう OK 牧歌的な風景ができますか? ええ...家を描くところから始めましょうか OK Willemこの家は基本的に見える日光浴の手伝いをしようかな木に挑戦してみますあの木は高すぎます太陽が低すぎる草を足しましょうもっと木を描きましょう OK ええと電話しようと思います私たちは芸術家ではありません今していることをやめるべきですそうしよう後で話そういいか? OK バイご覧のように Group Activities API の中核的なエクスペリエンスの1つは物理的に離れている間に一緒に何かをすることを可能にすることですリアルタイムのインタラクションを解除することができ他の人を見たり聞いたりすることができるためユーザーは即座に反応し本当に魔法のような瞬間を得ることができますこれはアプリに Group Activities を統合する方法を検討する際に留意すべきことです Group Activities を採用するにはアクティビティーの作成とセッション管理の2段階がありますこれについては「Coordinate media experiences」セッションで詳しく説明しましたこのセッションではアクティビティの作成から始めてユーザー体験の構築時にこれらの手順がどのように変化するかを見ていきましょう Group Activityを作成するには 2つのパートがありますまずアクティビティを設定し次にアクティビティをアクティブ化しますメディアグループアクティビティと比較するとカスタムアクティビティでは設定パーツのみが異なりますアクティビティを設定するときはすべての参加者間で共有する具体的なエクスペリエンスについて考える必要がありますアクティビティにはその経験を通じて一定のままである全の情報を含める必要があります「Coordinate media experiences with Group Activities」セッションを見たことがある人ならご存知でしょう GroupActivity プロトコルに準拠する DrawTogether 構造体を定義しタイトルに関連するメタデータを作成するメタデータプロパティーを実装しましたこれをカスタムアクティビティにするにはメタデータに適切なタイプを設定するだけですこれを汎用に設定することでこのアクティビティをカスタムアクティビティとして設定しますメディアアクティビティと比較してカスタムアクティビティを設定するにはこれだけで十分ですそれではXcodeに移りカスタムのグループアクティビティーの作成を開始しましょうまず最初に説明するコードについて簡単に説明します DrawTogetherはSwiftUIアプリのライフサイクルを使用するSwiftUIアプリです ContentViewはアプリのメインビューだビューの上部には描画時に使用される色を示すインジケータがありますその下にはCanvasView があるこれはキャンバスを使用しキャンバス内のすべてのストロークを描画しユーザ入力に基づいてキャンバスを更新します最後に下部には ControlBarがあり描画中に便利なコントロールがいくつか含まれています現在はキャンバスをクリアして最初から作業を開始するためのボタンが1つありますキャンバス自体はストロークの配列で構成され各ストロークにはカラー識別子およびポイントのリストがありますキャンバスにはローカルユーザが現在描画しているストロークを表す activeStrokeとユーザが使用するストロークカラーもあります次にアクティビティの設定から始めましょうその前に Group Activities エンタイトルメントを追加する必要がありますこれを行うにはプロジェクト設定に移動し Signing&Capabilities タブで新しい機能を追加しますグループアクティビティーを検索して選択しますこれで資格が得られたので最後にアクティビティーを構成しましょうファイル>新規>ファイル... Swiftファイルを選択し新しいファイルを追加しますそれをDrawTogether と呼ぶ...
... 作成をクリックしますまずフレームワークをインポートします
次に GroupActivity プロトコルに準拠する DrawTogetherという新しい構造体を定義します GroupActivity プロトコルには実装する必要ががある2つのプロパティがあります activityIdentifierとmetadata activityIdentifier についてはデフォルトの実装によるただしmetadata プロパティはまだ必要ですこれを追加しましょう
この計算されたプロパティで GroupActivityMetadata オブジェクトを作成しタイトルを設定しますタイプも汎用に設定しましたこれはカスタムアクティビティに不可欠です最後にメタデータオブジェクトを取得します
適切なタイミングで有効にする必要があります新しいボタンを追加しますコントロールバーよりも良い場所は? HStackの最初にボタンを追加します
ボタンのラベルには SFシンボルを使用しますアクションのクローズではカスタム Group Activity の新しいインスタンスを作成して activateを呼び出します私たちの活動を活発にするために必要なのはそれだけですここではカスタム Group Activity の構成方法とアクティブ化方法を説明しましたアクティビティ作成ステップには次の2つの部分が必要です次にセッション管理ステップについて説明する Angusにそれを引き継ぎますありがとうWillem 次に Group Activities を使用してアプリケーションでカスタムデータを送受信する方法について説明しますこれはグループアクティビティを使ったユニークな SharePlay体験を生み出すための中心的なものだ「Coordinate media experiences with Group Activities」というタイトルの前のセッションからセッションの受信再生の準備およびセッションへの参加の 3つのステップについて理解している必要があります再生同期の代わりにユーザー体験のためにセッションを設定する必要がありますその前にグループセッションを受信して参加するためのコードを追加しましょう Xcodeに戻りまず ContentViewに移動して GroupActivities をインポートします
次に GroupSessionを受信する非同期タスクを作成します
GroupSessionができたのでそれを保存する場所が必要です「configureGroupSession」と呼ばれる新しいメソッドを使用してこれをCanvas オブジェクトに格納します
次に Canvasに移動し configureGroupSession メソッドを実装します
まず最初に GroupActivities をインポートします
ファイルの最後に移動し次に新しいメソッドを実装します
ここでは受け取った groupSessionオオブジェクトをクラスの新しいプロパティーに割り当てましたまた groupSession プロパティを設定する前にキャンバスをリセットすることにも注意してください最後に groupSession に参加するコードを追加しましょう
この時点でプロジェクトを構築してコンパイルできるはずですここでプロダクト>構築の順に選択してテストします
いいですねこれでグループセッションを受信して参加するためのコードを設定したのでアプリケーションでカスタムデータを送受信するようにセッションを設定する方法について説明しますセッションの設定には GroupSessionMessenger を使用します GroupSessionMessenger は AWデータまたは構造化されたメッセージをグループセッション内の参加者と送受信するための簡単なAPIを提供します次に GroupSessionMessenger の使用方法について説明しますまず groupSession から GroupSessionMessenger を作成します GroupSessionMessenger を使用するための最初のステップはアプリケーションの参加者間で交換する必要があるデータの種類を定義することです DrawTogetherでは他のデバイスと共有する必要がある特定のデータはストロークそのものです 3つの属性を持つストロークを表現することができます識別子色と座標点です UpsertStrokeMessage をCodableプロトコルに準拠させることに注意してくださいこれは GroupSessionMessenger が構造化されたメッセージの送受信を可能にしメッセージがコーディング可能である限りシリアライゼーションとデシリアライゼーションを自動的に処理するためですセッションを設定するための 2番目の手順は GroupSessionMessenger のMessages APIを使用してデータを受信することです DrawTogetherの場合 UpsertStrokeMessages の受信を処理する必要がありますここに示したメッセージAPIはコーディング可能な型を取り非同期シーケンスその型のメッセージを含むタプルとメッセージを囲むコンテキストそのメッセージを送信した参加者などの情報を含むを返しますセッションを設定する為の 3番目の手順は GroupSessionMessengerのsend API を使用してデータを送信します DrawTogetherの場合グループ内のすべての参加者に UpsertStrokeMessage を送信します送信APIは非同期スローメソッドであることに注意してくださいスローされるエラーはアプリケーションによって適切に処理される必要があります次に Xcodeに移動し GroupSessionMessengerコードを追加しますまず Canvasソースファイルに移動し Groupセッションから GroupSessionMessenger を作成します
作成したメッセンジャーオブジェクトを保持する messengerプロパティーをキャンバスに追加します
次に参加者間で送受信される UpsertStrokeMessage を定義する必要がありますこのための新しいファイルを作成しますそのためにはファイル>新規>ファイル... を選択し Swiftファイルを選択します ... Modelフォルダに貼り付けますこれをMessages と呼びましょうここで UpsertStrokeMessage を定義するコードを追加します GroupSessionMessenger で送受信するメッセージを定義したので送受信するコードを作成しましょうこれを行うにはキャンバスに戻ります
ファイルの最後にメッセージを受信するコードを追加します
ここでは非同期シーケンスから UpsertStrokeMessages を受信する分離タスクを作成し新しいメソッドhandleを呼び出してメッセージを処理します次はそれを実行しましょう
このコードでは識別子をチェックしてストロークが既に存在するかどうかを確認し存在する場合はポイントを追加しますそれ以外の場合は新しいストロークを作成してポイントを追加しストロークの配列にストロークを追加します次にメッセージを送信するコードを作成します上記のメソッド addPointToActiveStrokeに進みます
すごい! 今度はアプリをビルドして実行し DrawTogetherの共有エクスペリエンスを実際に見てみましょう 2つのデバイスで FaceTime通話を始めます Phoneアプリにアクセスしてから自分に電話する
他のデバイスで応答します
マイクを消してこのデバイスでは共有DrawTogether エクスペリエンスを開始します左下のアイコンをタップしますもう一方のデバイスではグループセッションに参加します今度は私と tic-tac-toeをします先に移動します
私が勝ちそうですいいねコードは機能しているようだ
ここまで GroupSessionMessenger を使用して最初にメッセージを定義し次にメッセージを受信し最後にメッセージを送信するセッションを構成する方法について説明しました次にその他のいくつかの方法について説明します GroupSessionMessenger を使用するときに考慮すべきこと
内部的には GroupSessionMessenger はグループ内のすべてのアクティブな参加者に信頼性の高いFIFO順のメッセージ配信を提供します送信するメッセージには制約がありますサイズが大きすぎると送信APIからエラーが表示されます GroupSessionMessenger は小さなペイロード向けでありファイル画像ビデオなどの大きなアセットのストリーミングには使用しないでくださいメッセージを送信するときはフローコントロールとレートリミットを考慮する必要がありますループのように連続して大量のメッセージを送信すると送信APIからエラーが送信されることがあります最後に GroupSessionMessengerで使用するメッセージを定義する時はアプリケーションプロトコルにバージョン管理サポートを追加することを検討してくださいこれによりアプリケーションは古いバージョンのソフトウェアを実行しているデバイスとの相互運用をサポートできますそれではこの記事をAdam にお願いします Adamは GroupActivities 体験をどうに洗練させるか話しますありがとうAngus! それではアプリのカスタム体験に必要な仕上げについて話しましょうまず late joiner について話しましょう Late joinerはセッションの開始後に activitySession に結合するデバイスです適切なエクスペリエンスを確保するにはすべてのデバイスが同じデータで動作するように late joinerに最新の情報を提供する必要がありますこのシナリオを考慮することは一貫したユーザーエクスペリエンスを確保するために重要ですが万能というわけではありませんこのキャッチアップ処理に必要なデータはアプリと経験によって異なります DrawTogetherアプリにどのように適用されるか見てみようグループセッションに2つのデバイスがあるとしますこれら2つのデバイスは同じ情報を持っているキャンバスに描かれたスマイルフェイス両方とも図面を作成したときにセッションに参加していたため経験を通じて同じデータを持っていることがわかります次に別のデバイスを追加しますこの時点で新しいデバイス呼び出しは GroupSessionに参加しますがキャンバスには何も表示されません雲を描いてそれは良くない! 新しいデバイスには事前のコンテキストがなかったので笑顔には雲がかかっているさあバックアップしてもう一度やってみましょう新しいデバイスが参加するとすぐにスマイルを見せるようにするにはどうすればいいですか? 新しいデバイスがグループセッションでjoinを呼び出すとそのグループセッションに参加している他のすべてのデバイスには GroupSession起動時に activeParticipantsプロパティが表示されますその信号を観測したデバイスはキャッチアップデータこの場合は既存の描画キャンバスを新しく接続されたデバイスに送信します新しいデバイスが接続されるとスマイルマークが既に表示されていることがわかるのでそれを囲むことができますではどうやってコードを書くのでしょう? 最初にすべきことはアプリがキャッチアップメッセージで送信する必要のあるデータを理解することです DrawTogetherの体験であり目標はキャンバスが全員のデバイスで同じになることを保証することなので先に進みメッセージの中で新しいメッセージを作成しましょう「CanvasMessage」と呼ばれるswiftファイルこの構造体には　すべてのストロークと「pointCount」と呼ばれる変数が含まれますこの変数は最新のメッセージを計算するためのヒューリスティックとして使用されますすごい! さてこのメッセージの受信をどのように処理しますか? Canvas.swiftの Canvasモデルでは Angusが以前示したように GroupSessionMessenger を使って configureGroupSessionにメッセージハンドラを設定できます
ここからは handle関数を呼び出していることがわかりますのでそれを実装しましょう
このコードでは pointCount ヒューリスティックから保護して現在より新しいキャッチアップメッセージだけを受け入れるようにしていますパスした場合はキャンバスのストロークを catchupMessageのストロークでオーバーライドします先ほど説明したように activeParticipants を変更して新しい参加者と通信する必要があるかどうかを判断する必要があります次にその設定を configureGroupSession 関数に追加します
このハンドラでは新しい activeParticipants と古い activeParticipants の差分が取得されますこれにより新しく参加した参加者にのみキャッチアップメッセージを送信できますすごい! 今私たちはメッセージを作成して送信するだけです
このメッセージには現在のキャンバスの状態が含まれ newParticipants にのみ送信されます以上ですキャッチアップだグループセッションで特定のアクティビティをを行うためのすべての要素が揃ったところでアクティビティを完全に変更するにはどうすればよいでしょうかたとえば描画キャンバスを変更したりムービーを変更したりできますこのAPIにはアクティビティを変更する2つの方法があります新しいグループセッションを作成するか既存のグループセッションの全員のアクティビティを更新することができますではその2つについて話しましょうコンテンツを変更する最初の方法として推奨されるのはグループセッションを開始したのと同じAPIを呼び出す方法です GroupActivityに対する prepareForActivation この方法では GroupSessionの開始と終了のためのクリーンなバリアが提供されるため以前のGroupSessionから不要な状態やメッセージが残ってしまうことを心配する必要がないため参加者間で状態が一貫しているかどうかを判断するのが容易になりますこれはユーザーがアクティビティから戻って新しいメモや映画を検索するなど次のアクティビティを見つける場合に非常に便利ですこれによりシステムに重大な変更が示されユーザーへの通知に使用されますこの呼び出しの後グループセッションを開始するのと同じ方法で GroupActivity上のセッション非同期シーケンスを通じて新しいGroupSession を受信しますでは例えば複数の曲を交互に演奏するなどアプリケーションが移行するアクティビティーのリストを持っているとしたらどうでしょう GroupSession API はGroupSessionのアクティビティープロパティを設定するだけですべてのユーザーに対して更新をトリガーする簡単な方法を提供します次にアクティビティプロパティの変更を確認しますこのAPIはデバイスが常に同じアクティビティに収束するようにするので心配する必要はありませんこの2つを概念的に理解したところでどちらを使うべき DrawTogether アプリのために? 私たちのアプリは新しい描画キャンバスの上にクリーンなスレートを望んでいるので New Session APIは望むものを正確に提供してくれますそれでは Xcodeに移りその実装方法を見てみましょうここでの最初のステップは新しいセッションをトリガーする方法を決定することですここではクライアントがリセットボタンを使用したときに新しい GroupSessionを作成するようにします ControlBarコードを見ると Canvasモデルを呼び出してローカル状態をリセットする CapsuleButtonが既にあることがわかりますそこでこの関数を変更して GroupSessionを破棄し新しいGroupSession を作成しましょう
このコードでは GroupSessionにあるタスクとキャンセル可能なものをすべてキャンセルしますまた GroupSession があるかどうかも確認しますその場合はそのままにして DrawTogetherタイプの activateプロパティーを呼び出しますそこから通常のGroupSession 受信フローが実行されますこれで新しいキャンバスに簡単に移行できますでは SharePlayの体験を友達と試すことができることをユーザーに示すようにUIを変更したい場合は? 例えば描画アプリケーションではキャンバスをこの状態からこの状態に変更し GroupSessionの対象になるとキャンバスを共有するためのボタンが表示されますではどうすればいいのでしょう? GroupStateObserver APIを使用するとデバイスがグループセッションに適しているかどうかをパブリッシャから確認できますこれを使用してボタンを動的に表示および非表示にできますでは実行しましょう先ほど見たようにアプリケーションの左下に小さなボタンが必要ですアプリケーションの ControlBarビューにはすでに共有ボタンがあるので GroupStateObserver に基づいてボタンの表示/非表示を切り替えるように動作を変更しますまずビューに groupStateObserver を追加します
次に CapsuleButtonを囲み groupSessionに適格であるかどうかだけを表示しこのgroupSession にまだ入っていないことを示します
以上です! ボタンが動的に表示されるのはユーザーの役に立つときだけになりましたではこのセッションで見たことを見てみましょう私たちはシンプルな描画アプリを作る全プロセスを終え Group Activities を活用してこれまでにないように同期して接続できるように変更しましたしかしさらに重要なことに私たちはあなたの創造性を完全に解き放ち Group ActivitieでカスタムSharePlay体験を作成するために必要なすべてのステップを実行しましたここでは汎用タイプのカスタムアクティビティの作成 GroupSessionと GroupSessionMessenger の同期通信の設定と活用そしてアプリケーションが真にリッチなユーザエクスペリエンスを実現するために採用すべきエッジケースと APIについて説明しましたこのカスタム体験を楽しんで頂けた事を願っています皆さんの創造性がグループ活動フレームワークに活きることを楽しみにしています GroupActivities について学ぶ次のステップは「Design for Group Activities」セッションですまだご覧になっていない方は「Build media experiences with Group Activities」セッションもご覧くださいご不明な点がございましたらグループ活動ラボにお問い合わせください最後にご覧いただいてありがとうございます WWDCを楽しんでください何を作るのか楽しみです! (音楽)

3:50 - Configuring your application’s activity

struct DrawTogether: GroupActivity {

    var metadata: GroupActivityMetadata {
        var metadata = GroupActivityMetadata()
        metadata.title = NSLocalizedString("Draw Together",
                                           comment: "Title of group activity")
        metadata.type = .generic
        return metadata
    }

}

10:06 - Define, Receive and Send messages

let messenger = GroupSessionMessenger(session: groupSession)

// 1. Define
struct UpsertStrokeMessage: Codable {
    let id: UUID
    let color: Color
    let point: CGPoint
}

// 2. Receive
for await (message, context) in messenger.messages(of: UpsertStrokeMessage.self) {
    // Handle message
}

// 3. Send
do {
    try await messenger.send(UpsertStrokeMessage(id: stroke.id, color: .red, point: point))
} catch {
    // Handle error
}

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

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

リソース

関連ビデオ

WWDC23

WWDC21