Design for Group Activities

ハイライト

Apple は、iOS 15 のグループアクティビティを使用して、FaceTime の低遅延通信機能をアプリに公開します。開発者は、元の 1 人用機能を、画面共有、同期メディア再生、リアルタイムメッセージングを通じて SharePlay 共有エクスペリエンスに変換できます。

主要内容

多くのアプリは、デフォルトでは 1 人のユーザーにのみサービスを提供します。

ユーザーが不動産リストを見たり、映画を選んだり、写真をめくったり、Swift を学習したりするとき、実際の場面では多くの場合、隣に別の人がいます。電話だとこれが難しくなります。一人は見たものを口頭で説明することしかできず、もう一人は推測する必要があります。メディアアプリでは、より具体的な問題も発生します。つまり、ある人が一時停止し、別の人のビデオが再生され続けます。 1 人が進行状況バーをドラッグしても、もう 1 人は元の時点で停止したままになります。

Apple はこのセッションでデザインの出発点を提案しました。それは、まずアプリ内のユーザーが一緒に何をしたいのかを見つけることです。多くのページは個人的な閲覧にのみ適しています。共有に適しているのは、一緒に番組を見る、一緒に歌を聴く、一緒に写真を見る、一緒に勉強するなど、ディスカッション、コラボレーション、または共同娯楽を引き起こす可能性のある活動です。

イベントを見つけたら、次のステップは共有エクスペリエンスを強化することです。グループアクティビティフレームワークは、アプリを SharePlay に接続します。メッセージング機能とメディア再生同期機能を提供します。最下層では FaceTime の低遅延通信インフラストラクチャを使用するため、開発者は通話参加者向けのリアルタイム接続システムを構築する必要がありません。

この講演では、設計計画を画面共有、同期メディア再生、カスタマイズされた UI の 3 つの入り口に分割しました。画面共有は、相手にアプリを直接見てもらうのに適しています。同期メディア再生は、保護された音楽や映画コンテンツに適しています。カスタム UI は、共同描画ボード、ゲーム、教育などの非メディアエクスペリエンスに適しています。

最後の重要な点はコンテキストです。ユーザーが FaceTime 通話中にアプリを開くと、基本的にチャットと操作が同時に行われます。イベントのプレビューには、全員が追加しようとしているコンテンツが明確に記載されている必要があります。イベントに参加する前の登録、購読、購入、フォームはすべて、可能な限り延期または自動化する必要があります。友達はあなたが参加するのを待っています。共有エクスペリエンスが長いプロセスで滞ることはありません。

詳細

画面共有: まず、どのコンテンツを表示できるかを検討します

(02:41) FaceTime 通話中に、ユーザーは画面を共有したり、アプリを自動的に共有したりできます。システムは、安全な入力フィールドを除き、デフォルトでインターフェイスの大部分を共有します。この講演では、開発者に対し、どの UI が通話に表示するのに適しているかを確認し、iOS の UIKit API を使用して可視性をさらに制限するよう促しています。

import UIKit

final class AccountViewController: UIViewController {
    @IBOutlet private weak var passwordField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        passwordField.isSecureTextEntry = true
    }
}

キーポイント:

import UIKitセッションで言及された、画面共有の可視性を制限するためのフレームワークエントリである UIKit (ユーザーインターフェイスフレームワーク) を紹介します。
AccountViewController画面共有によって表示されるアプリインターフェイスを表す通常の iOS ページです。
passwordField機密コンテンツのユーザー入力に対応するテキストボックス。
viewDidLoad()ページが読み込まれた後、入力ボックスを構成します。
isSecureTextEntry = trueテキストボックスを安全な入力フィールドとしてマークします。セッションは、安全な入力フィールドがデフォルトでは画面共有されないことを明示的に示しています。

この設計ポイントは非常に実用的です。不動産アプリは物件の写真や地図を共有できますが、アカウント情報を共有すべきではありません。ショッピングアプリは商品ページを共有できますが、支払い情報は共有できません。 SharePlay に参加する前に、まずこれらの境界について考えてください。

同期されたメディア再生: あるデバイスから別のデバイスにビデオをストリーミングしないでください。

(03:09) 画面共有ではオーディオが自動的に共有されますが、保護された音楽や映画は画面共有を通じて転送されません。メディアアプリでは、グループアクティビティを実装し、調整されたメディア再生を使用して全員のデバイスが同時に同じコンテンツを再生できるようにし、再生レートの変更とシーク操作を同期する必要があります。

import GroupActivities
import AVFoundation

struct WatchTogetherActivity: GroupActivity {
    var metadata: GroupActivityMetadata {
        var metadata = GroupActivityMetadata()
        metadata.title = "Watch Together"
        metadata.type = .watchTogether
        return metadata
    }
}

キーポイント:

import GroupActivitiesグループアクティビティフレームワークの紹介では、セッションの冒頭で、アプリを SharePlay に接続する責任があることが述べられています。
import AVFoundationメディア再生フレームワークの導入。セッションで議論された同期メディア再生は、メディア再生機能に関連しています。
WatchTogetherActivity「一緒に見る」シーンを表す共有可能なアクティビティを定義します。
metadataイベントのプレビューに必要な基本情報を提供します。セッションの後半では、プレビューが参加者にコンテキストを提供する必要があることを強調します。
metadata.titleこれは参加者に表示されるアクティビティのタイトルであり、現在のアクションを説明するために記述する必要があります。
metadata.type = .watchTogetherこれを一緒に見るアクティビティとしてマークします。これは、セッション内の「遠い親戚と一緒に映画を見る」というシーンと一致します。

ここで重要な事実は、SharePlay は発信者のデバイスから他のデバイスにメディアをストリーミングしないということです。各デバイスは独自のメディアをローカルで再生し、グループアクティビティは開始時間、再生レート、進行状況のジャンプを同期します。スマートな音量コントロールと同期はシステムによって処理され、シーク、速度、再生コントロールの具体的なエクスペリエンスはアプリによって決定されます。

メッセンジャー: リアルタイムデータを非メディアエクスペリエンスに送信します

(04:02) アプリがメディア再生タイプに属していない場合でも、グループアクティビティは利用できます。セッション氏は、メッセンジャープロトコルは通話中にほぼリアルタイムで他のアプリにデータをブロードキャストできると述べました。送信プロセスは、FaceTime 通話と同様にプライベートであり、エンドツーエンドで暗号化されます。

import GroupActivities

struct DrawingActivity: GroupActivity {
    var metadata: GroupActivityMetadata {
        var metadata = GroupActivityMetadata()
        metadata.title = "Shared Drawing"
        metadata.type = .generic
        return metadata
    }
}

struct DrawingMessage: Codable {
    let x: Double
    let y: Double
    let colorName: String
}

キーポイント:

DrawingActivityセッションで説明したカスタムビューと「Hello World」描画例に対応する共有描画アクティビティを定義します。
metadata.titleアクティビティプレビューにタイトルを付けて、それが共有図面であることを参加者に知らせます。
metadata.type = .genericこれが一般的な共有アクティビティであり、メディア再生以外のアクティビティに適していることを示します。
DrawingMessage参加者間で受け渡しできるように準備されたデータモデルです。
Codableメッセージのエンコードとデコードが可能で、メッセージチャネルを介して構造化データを送信するのに適しています。
x、y、colorName描画アクションを記述するために必要な最小限のデータ。

カスタム UI の設計目標は、インターフェイス全体のスクリーンショットの送信を避ける必要があります。より良い方法は、アクションデータを送信することです。描画ボードはストローク座標を送信し、ミニゲームはプレーヤーのアクションを送信し、教育アプリは現在の問題と選択結果を送信します。全員のアプリがローカルで同じ状態をレンダリングします。

イベントプレビュー: タイトル、サブタイトル、サムネイルを使用して、追加する内容を説明します

(05:57) アプリまたはコンテンツが共有されると、アクティビティのプレビューによって、発信者が視聴するよう提案したものが他の人に通知されます。セッションは、タイトル、サブタイトル、サムネイルを使用して現在のエクスペリエンスを説明するリッチリンクとして設計することをお勧めします。

import GroupActivities

struct EpisodeActivity: GroupActivity {
    let episodeTitle: String
    let showTitle: String

    var metadata: GroupActivityMetadata {
        var metadata = GroupActivityMetadata()
        metadata.title = episodeTitle
        metadata.subtitle = showTitle
        metadata.type = .watchTogether
        return metadata
    }
}

キーポイント:

EpisodeActivity共有イベントを特定のエピソードに関連付けます。
episodeTitleプレビュー内のタイトルに対応し、これから何が表示されるかを参加者に伝えます。
showTitleプレビューの字幕に対応し、番組ソースを補足します。
GroupActivityMetadata()イベントメタデータを作成します。
metadata.titleそしてmetadata.subtitleセッション内で言及されたタイトルとサブタイトルに対応します。
metadata.type = .watchTogetherこれは一緒に視聴するコンテンツであることを説明します。

悪いプレビューでは「イベントに参加」とだけ表示されます。ユーザーは、友人が映画を観ることを望んでいるのか、音楽を聴いてほしいのか、それともプロパティページを開いてほしいのかを知りません。優れたプレビューでは、「財団のエピソード 1 を見る」や「ナッシュビルのリストを見る」など、コンテンツとアクションが詳しく説明されています。電話の相手はチャットしているため、プレビューによって通訳コストを削減する必要があります。

自動エントリー: イベントに参加する前の手順を最小限に抑えます。

(06:42) セッションは開発者に次のことを思い出させます: SharePlay で携帯電話を操作するとき、ユーザーはマルチタスクを行っています。アプリはできるだけ多くのステップを自動化し、アクティビティに入る前の操作を減らす必要があります。 Picture in Picture のサポートにより、アプリは全員のデバイスでバックグラウンドから自動的に起動できます。

import AVKit

let playerViewController = AVPlayerViewController()
playerViewController.allowsPictureInPicturePlayback = true
playerViewController.canStartPictureInPictureAutomaticallyFromInline = true

キーポイント:

import AVKitAVKit (メディア再生インターフェイスフレームワーク) の導入により、ピクチャインピクチャのサポートが再生インターフェイスによってホストされます。
AVPlayerViewController()システムプレーヤーインターフェイスを作成します。
allowsPictureInPicturePlayback = trueプレーヤーがピクチャー・イン・ピクチャーに入ることができるようにします。
canStartPictureInPictureAutomaticallyFromInline = trueインライン再生が自動的にピクチャインピクチャに入るようにします。
セッションは、エクスペリエンスをバックグラウンドから自動的に起動するパスとして、ピクチャインピクチャのサポートを明示的にサポートします。

参加する前に登録、サブスクリプション、または購入が必要な場合、セッションは、グループアクティビティ API を通じてアプリをフロントエンドに表示する必要があることをシステムに伝えることを推奨します。ユーザーがバナーをクリックすると、アプリがフォアグラウンドに表示され、必要な操作が完了します。この能力は注意して使用してください。友達が待っているのに、長いフォームは共有体験を台無しにする可能性があります。

重要ポイント

やるべきこと: ビデオアプリに [このエピソードを一緒に見る] ボタンを追加します。

実行する価値がある理由: グループアクティビティでは、各参加者のデバイスで再生の開始、一時停止、速度変更、シークを同期できます。
開始方法: エピソードの定義GroupActivity、使用GroupActivityMetadataエピソードのタイトル、番組名、アクティビティの種類を入力し、調整されたメディア再生にアクセスします。

やるべきこと: FaceTime 共有トラベルアルバムモードをフォトアルバムアプリに追加します。

実行する価値がある理由: 画面共有を使用すると、他の人が同じ写真セットを見ることができるため、チャット中に写真の背後にあるストーリーを伝えるのに適しています。
開始方法: まず、アルバムページ内の共有可能領域と共有不可能な領域を整理し、アカウント、位置情報のプライバシー、およびセキュリティの入力フィールドを除外してから、共有の入り口に明確なプロンプトを表示します。

やるべきこと: 共有ホワイトボードゲームまたは落書きゲームを作成します。

実行する価値がある理由: メッセンジャープロトコルは、ストローク、座標、プレーヤーのアクションの受け渡しに適したカスタムデータを通話参加者間でブロードキャストできます。
開始方法: 定義Codable座標、色、アクションタイプなどのメッセージモデル。各クライアントはメッセージを受信した後、キャンバスをローカルで更新します。

やるべきこと: 不動産アプリに「物件を一緒に見る」モードを追加します。

実行する価値がある理由: セッションでは、情報密度の高いページについてリモートで議論する場合、口頭で説明するよりも画面共有の方が直接的であることを説明するために、ナッシュビルのリストを例として使用しました。
開始方法: 物件の写真、地図、価格を共有コアにします。連絡先情報、アカウントページ、支払いプロセスを非共有パス上に残します。

やるべきこと: 通話中に学習アプリのコースページを共有演習に変換します。

実行する価値がある理由: グループアクティビティは、学習コンテンツを現在のディスカッションにリンクするのに適しており、参加者が同じ質問や同じコード部分を見ることができます。
開始方法: アクティビティのプレビューを使用して、コース名と演習のタイトルを書き留めます。メッセージを使用して、現在の問題番号、選択結果、説明の進行状況を同期します。

Design for Group Activities

ハイライト

主要内容

詳細

画面共有: まず、どのコンテンツを表示できるかを検討します

同期されたメディア再生: あるデバイスから別のデバイスにビデオをストリーミングしないでください。

メッセンジャー: リアルタイムデータを非メディアエクスペリエンスに送信します

イベントプレビュー: タイトル、サブタイトル、サムネイルを使用して、追加する内容を説明します

自動エントリー: イベントに参加する前の手順を最小限に抑えます。

重要ポイント

関連セッション

コメント

ハイライト

主要内容

詳細

画面共有: まず、どのコンテンツを表示できるかを検討します

同期されたメディア再生: あるデバイスから別のデバイスにビデオをストリーミングしないでください。

メッセンジャー: リアルタイム データを非メディア エクスペリエンスに送信します

イベント プレビュー: タイトル、サブタイトル、サムネイルを使用して、追加する内容を説明します

自動エントリー: イベントに参加する前の手順を最小限に抑えます。

重要ポイント

関連セッション

コメント

メッセンジャー: リアルタイムデータを非メディアエクスペリエンスに送信します

イベントプレビュー: タイトル、サブタイトル、サムネイルを使用して、追加する内容を説明します