SharePlayを利用したファイルの共有

♪ ♪

こんにちは SharePlayチームの エンジニアのAdamです 今日は皆さんから要望の多かった エキサイティングな 新機能についてお話します セッションのタイトルから お察しの通り SharePlayを使った ファイル共有についてお話します まず添付ファイルの 転送について説明します ファイルや共有したい大量のデータを 「添付ファイル」と呼んでいます 次に GroupActivitiesの新しいAPI GroupSessionJournalについてお話します その後 後発ユーザーについて説明し 最後にDrawTogetherアプリで GroupSessionJournalを 簡単に導入する方法を説明します まず 添付ファイルの 転送について見ていきましょう 描画アプリを例に解説します GroupSessionMessengerを使って 2つのデバイス間で 画像を同期しています キャンバスに画像をドロップすると どうなるでしょうか？ GroupSessionMessengerの サイズ制限があるため 以前はSharePlayを利用できませんでした しかし このたびデバイス間の 超高速なメッセージングを 可能にするAppleのインフラにより 添付ファイルも転送できるようになりました 愛犬のかわいい写真を キャンバスにドロップすると クラウドインフラを経由して 今までよりも高速に転送できます ここでは 転送に必要なデータを最小化し アイドル時の待ち時間を 最小限に抑えるため Appleの複数の テクノロジーレイヤーを 活用して すべての体験を可能な限り 高速化しています これらはすべて システムレイヤーで行われますが それだけではありません SharePlayはユーザーのプライバシーを 考慮して構築されているため 転送するデータがデバイス間で エンドツーエンドで 暗号化されることを確認しながら行われます Appleは転送される データの内容を知りません かわいい犬「モチ」の写真だけでなく あらゆる用途にご利用いただけます PDFのようなファイルにも使えます 音声録音やアノテーションはどうでしょう？ 共同作業中のユーザーコンテンツは この新しいAPIにより さらに高速化されます ではAPIとは どのようなものでしょうか？ さっそく見てみましょう！ 主体となるオブジェクトは 「GroupSessionJournal」です このオブジェクトは iOS 17で新たに追加されました 「GroupSessionMessenger」と同じように 「GroupSession」を使用して初期化します ですが このオブジェクトの目的を 理解することが重要です これは GroupSession全体で 一貫して存在するオブジェクトです つまり ジャーナル上で行う操作は すべての人に影響し ジャーナルのプロパティも同様に 全員に同期されます いくつかの例を見てみましょう ジャーナルを作成したら 「attachments」AsyncSequenceで 添付ファイルの変更を観察できます また「add」関数を使って カスタム 添付ファイルをアップロードできます 必要なことは Transferable プロトコルに準拠した型にするだけです 1つのデバイスが「add」を呼び出すと そのデバイスの「attachments」 AsyncSequenceが新しい添付ファイルを 提供するだけでなく GroupSessionの すべてのユーザーが同じイベントを見て アップロードしている 添付ファイルを読み込めます 同様に「remove」関数を呼び出して 添付ファイルを削除する場合 全員の「attachments」 AsyncSequenceが イベントに対応して更新されます これが主な内容です この新しいAPIを使用すると 添付ファイルの アップロードと受信が簡単にできますね DrawTogetherアプリに この機能を実装する前に この新しいAPIを利用する際に 考慮する点についてお話します 添付ファイルのサイズは 無制限ではなく 実際は100MBに制限されています これは ユーザー体験について 慎重に考慮したためです これらの体験は高速である必要があり デバイスのアップロードやダウンロード 速度には限界があります したがって 送信する添付ファイルの サイズを常に最小限に 抑えるようにしてください これは 描画アプリの場合キャンバスに 表示できる写真を100MB以下に 制限することを意味するかもしれません ユーザーが作成したコンテンツに関連する データであれば完璧ですが ムービーのような ユーザーが 作成したものではない大きなファイルは ユーザーのデバイスではなくデベロッパの サーバーから提供する必要があります そして ライフサイクルにも考慮が必要です ジャーナルに追加されたものは GroupSessionに 誰かがいる限りずっと残ります つまり ジャーナルに 添付ファイルを追加した人が GroupSessionから切断しても その添付ファイルは残ります しかし全員がGroupSessionを抜けると 添付ファイルも一緒に削除されます GroupSessionMessengerの 利用に慣れていれば 後発ユーザーについて 覚えているかもしれません 通常 新規ユーザーが GroupSessionに参加すると アプリはそのユーザーに 現在の状況を再送信して グループの残りのメンバーと 同じ状態にする必要があります これはGroupSessionMessengerを 採用したアプリにより管理され 各デバイスが キャッチアップが必要な人に メッセージを送ることになり かなりの処理量となります 次の例を見てみましょう GroupSessionに2人の人がいるとします AdamとBrianがいます 一方 Claraはまだ参加していません Claraが参加する前 AdamとBrianは楽しく絵を描いています Adamが犬の骨を描くと Brian側でも更新されます そしてClaraが参加しますが 彼女のキャンバスは参加時には空白です 彼女のデバイスは AdamとBrianが行っていた 内容の情報を入手する必要があります この時点でAdamとBrianはClaraに 自分たちの状況を送信することで Claraのデバイスも 同一の状態になるようにします 描画の代わりに添付ファイルを追加すると AdamとBrianから送られる メッセージが大きくなります これが問題になることは想像がつきます 1つのデバイスに画像を送るためだけに 100MBを再アップロードすることになります そこで GroupSessionJournalが 後発参加者に対処できるようにしました 後発参加者は 他のユーザーからの 再アップロードなしに ジャーナルにアップロードされた 添付ファイルを受信し より高速で帯域幅を節約できる 体験を提供します たくさんの情報でしたね ここから楽しい部分に入ります DrawTogetherアプリで GroupSessionJournalを 利用する方法を説明します このDrawTogetherアプリに 変更を加えます ご覧のように 下部にSharePlayセッションを 開始するボタンや セッションを リセットするゴミ箱ボタンがあります 画面下部に キャンバスに載せたい写真を 選択できるボタンがあると便利だと思います SwiftUIを使えば簡単に始められます やってみましょう 修正する必要がある 主なコンポーネントは4つあります まずは「Canvas」モデルです これはアプリ全体のメインモデル オブジェクトです ローカルとリモートの参加者の すべてのストロークを記録するGroup Activitiesのインターフェイスです そして 3つのビューです 「ContentView」は他の2つのビューの すべてのサブビューを保持します 「ControlBar」ビューは先ほど説明した 下部のボタンを管理します 「CanvasView」はストロークモデルから すべてのオブジェクトを描画し 画像も描画します まずモデルから始めましょう モデルは2つの要素を トラッキングします まず ジャーナルから取得する すべての画像を 「CanvasImage」という新しい構造体で トラッキングします 次に 画像をローカルで選択して 配置する場合はその画像と すべての画像をトラッキングします では キャンバスに GroupSessionJournalを作成します そして configureGroupSession関数で すべての添付ファイルを 処理するようにします そして ローカルで選択した画像を ジャーナルに追加する関数を作り ビューから呼び出せるようにします これでUI以外のパーツはすべて揃ったので いくつかのビューを変更してみましょう まず 写真を選択するボタンから始めます 先ほど ControlBarにボタンを 追加したいとお話しました PhotosUIをインポートして 「PhotosPicker」ビューを使い ボタンを追加して selectedImageData を持つモデルに直接配置します PhotoPlacementViewという シンプルなビューを作成して 選択された写真を視覚化し キャンバス上の好きな場所に 移動できるようにします では このビューを ContentViewに追加しましょう 進捗状況を見てみます セッションを開始すると Photosボタンが表示されます 写真を選択すると ドラッグ可能な画像が表示されました さて 最後のパートは モデルから すべての画像を視覚化するために 「Canvas」ビューを変更することです 試してみます　画像の最終的な位置を 選択すると同時に 両方に画像が表示されます 安心しました これで終了です かなり良い体験ができたと思います ご視聴ありがとうございました このセッションのご視聴後 GroupActivitiesを使って どのような素晴らしい体験が 創造できるか ぜひ試してみてください まだGroupActivitiesを未導入の方は 「Add SharePlay to your app」で SharePlayでどのようなことが アプリで実現できるか ご覧ください このDrawTogetherアプリの始め方や GroupActivitiesの採用例を見たい場合は 「Build custom experiences with GroupActivities」をご覧ください ありがとうございました 皆さんが何を作るのか楽しみです！ ♪ ♪