Shared with YouをAppに追加する

Shared with YouをAppに追加する

Shared with Youを使用すると、メッセージAppで共有されたコンテンツを、あなたのAppの中で簡単に見つけられるようになります。AppでShared with Youをサポートして、メッセージAppでコンテンツを扱う方法を学びましょう。「ピンで固定」することで暗黙的にShared with Youが許可され、コンテンツが自動的に共有される仕組みについて解説します。また、Shared with Youのコンテンツを「あなたと共有」の棚に表示したり、アトリビューションビューで表示する方法も紹介します。

リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- カスタムコラボレーションAppをメッセージAppと統合する
- メッセージAppで共同制作の体験を強化する
WWDC20
- ユニバーサルリンクの新機能
ダウンロード

♪♪
こんにちは Karthik と申します Messages チームのエンジニアですこの動画では Shared with You と App への導入方法を紹介します
Shared with You は iOS 15 で発表されました友人や家族がメッセージApp で送信したリンクに簡単にアクセスできるようデザインされています Shared with You を採用しているシステム App は Safari や News ミュージックにポッドキャスト TV App や写真 App です Shared with You はコンテンツに対応します視聴できていないときにコンテンツを受理することもありますたとえば買い物中に友達からテレビ番組のおすすめを受け取ってもそれは忘れられてしまうでしょう Shared with You を使用すると後で TV App で視聴するTV番組を簡単に見つけられます Shared with You を使用するとメッセージApp のチャットで共有されたコンテンツに App から離れることなくアクセスできます
ユーザーが共有されたコンテンツをメッセージApp で「ピンで固定」すると Shared with You の検索でそのコンテンツの優先度が上がりこのコンテンツが重要であると認識され自動共有に同意した処理を開始しますこれについては後ほど詳しく説明します iOS 16 では Shared with You が拡張されました Shared with You の利便性を App に取り入れましょう
まず App でのShared with You のデザインについて説明します次にそれがどう機能するか最後に導入方法について説明します
まずはデザインから Appでの体験には２つの部分があります Shared with You シェルフとアトリビューションビューですシェルフは App でブラウジングを行う専用スペースでメッセージ App で共有されたコンテンツをハイライトします TV App の「今すぐ観る」タブの「あなたと共有」シェルフミュージックとポッドキャストの「今すぐ聴く」タブも同様です
コンテンツはランク付け順序付けされたリストですこれについては後半で説明しますシェルフの各アイテムについてアトリビューションビューとリッチプレビューを表示しますリッチプレビューにはサムネイルとタイトルあればサブタイトルも含まれますこの例ではリッチプレビューはポッドキャストアートとエピソード名と番組名で構成されています共有コンテンツのアトリビューションビューもあります誰からシェアされたのか一目で分かります
ビューを展開したり全ての一覧を表示する「Show More すべて見る」を用意しますアトリビューションビューは共有した人の名前とアバターを安全に表示するプロセス外のビューですコンテンツが「ピンで固定」されているかどうかも表示されますコンテンツの詳細ビューにもアトリビューションビューを表示しますユーザーはコンテンツが共有されたメッセージApp の会話に戻れますたとえばテレビ番組を視聴しているときにアトリビューションビューを見ておすすめされた事を思い出します今番組を見ようとしていることを友達に伝えることも可能ですすべて App 内で行われ返信した後は App のコンテンツに戻りますアトリビューションビューはインタラクティブですビューをタップすると App 内で直接メッセージ App の会話を表示しますアトリビューションビューには返信や削除などのコンテキストメニューもあり返信はビューのタップと同じ動作です削除オプションは今後このコンテンツを表示しないように指示しますあなたのコンテキストメニューにこれを追加することもできますコンテキストメニューの「削除」のタイトルはカスタマイズ可で Safariでは Webページのコンテキストメニューに「リンクの削除」と表示されますこの動画の後半で処理方法を説明しますこれでシェルフを表示する場所とアトリビューションビューを表示する場所がわかりましたでは Shared with You の機能をお見せしますメッセージで友人や家族が共有したリンクは Shared with You に表示されますグループ会話に含まれるリンクは少なくとも1人の参加者が連絡先にある場合に表示されます Shared with You はユニバーサルリンクと同じテクノロジーをベースにしていますユニバーサルリンクを使用すると App とウェブサイトのコンテンツをシームレスにリンクできますユーザーは Shared with You のコンテンツを細かく制御できます
メッセージApp の外部で共有するコンテンツを会話ごと App ごとまたは全部まとめて設定できます事前に許可を要求する必要はありませんオーガニックに発生するものですリンクの「ピンで固定」は Shared with You でコンテンツを表示するための暗黙の許可です「ピンで固定」されたコンテンツは App 内の Shared with You で常に利用できますコンテンツがメッセージAppで「ピンに固定」されるとヒューリスティックに基づき自動共有を有効にするオプションが表示されます自動共有をオンにすると App の Shared with You にさらなるコンテンツが自動的に表示されます
Shared with You のコンテンツは順序を持っていますシェルフの最初のアイテムはシステムからの情報に基づいて Siri によってキュレーションされますピンで固定されたアイテムがこれに続きリストの残りの部分は時系列で並べられます
Siri Suggestionsはユーザーがそのコンテンツを見たかまたはインタラクトしたかといった情報を使用しますコンテンツはピンで固定されていますか？どのような文脈で提示されているますか？ App がこのフィードバックを提供します後半で詳しく説明しますこれらはすべてコンテンツがあまりに一時的で陳腐化しないようにするために行われますリンクが複数回共有された会話では最新のメッセージを表示しますリンクが複数のメッセージ App 内の会話で共有された場合アトリビューションビューはそれを視覚的に表現しますたとえば Enrique と Sarah がシカゴのトップ25プレイリストを共有している場合アトリビューションビューには両方の連絡先アバターが表示されますアトリビューションビューをタップすると曖昧さ回避のためのメニューが表示されどちらのメッセージに返信するか選択することができます Shared with You の設計ではセキュリティとプライバシーを重視していますアトリビューションビューと曖昧性回避ビューはプロセスの外で描画されます Shared with Youは Universal Links の関連付けによってアプリケーションのコンテンツを保護しその App のみがそのコンテンツにアクセスできるようになっています App は受信者との会話にアクセスできません
これで Shared with You の機能がわかりました最もエキサイティングな部分は App で Shared with You を導入する方法ですまず Universal Links を導入し次に Xcode の Capabilities タブで新しい Shared with You を追加します次にシェルフを App に配置しコンテンツにアトリビューションビューを追加します Universal Links の導入方法はこうです
ユーザーは App 内のコンテンツまたはウェブサイトへのリンクをインテリジェントにたどれますサポートするには次の手順を実行しますまず App とウェブサイト間の双方向の関連付けを行い App が処理する URL を指定します作成方法は App に Associated Domains を追加しウェブサーバーにJSONファイルを追加します次に App デリゲートを更新してシステムが提供するユーザーアクティビティオブジェクトに応答します詳細は2020のセッションをご覧ください「ユニバーサルリンクの新機能」 iOS 16で Shared with You のフレームワークが新たに導入されましたこのフレームワークには３つの主要なクラスがあります SWHighlightCenter SWHighlight と SWAttributionView SWHighlightCenter は Shared with You のコンテンツを取得するクラスです SWHighlight は共有コンテンツをラップするモデルオブジェクトです SWAttributionView はコンテンツをメッセージ App の会話に関連付け属性情報を表示します
ハイライトセンターは以下のようなシンプルなオブジェクトで構成されています SWHighlight オブジェクトの配列であるハイライトコンテンツが追加や削除または更新されたときに App に通知を送信するデリゲートプロパティを持っていますハイライトは SWHighlight クラスで表示されますメッセージApp で共有された App のコンテンツの URL を持っておりこれを利用してコンテンツの参照とリッチプレビューのレンダリング App 内のコンテンツへのナビゲーションを行います App の Shared with You コンテンツを列挙する方法を説明します
まず SWHighlightCenter のインスタンスを作成します次にデリゲートプロパティを設定します SWHighlightCenter Delegate メソッドを実装してハイライトセンターの highlights プロパティから Shared with You コンテンツにアクセスします App は前回のハイライトリストを保持することで最新のハイライトリストとの差分を素早く取得することができます
各ハイライトの URL プロパティによりリッチプレビューを生成しますこのように App 内の Shared with You コンテンツを簡単に列挙することができます次にコンテンツにアトリビューションビューを追加してカスタマイズする方法を説明します SWAttributionView はコンテンツを共有した人の名前とアバターを表示するビューです各ハイライトには対応するアトリビューションビューがありますアトリビューションビューにハイライトのプロパティを設定すると帰属情報が他のプロセスによりレンダリングされます
アトリビューションビューの最大幅を指定しますアトリビューションビューは必要に応じてスペースを埋めますアトリビューションビューのアラインメントを最大スペース内に設定します例をお見せしましょう
SWAttributionView のインスタンスを作成し highlight パティを設定します PreferredMaxLayout Width を設定しますこの例では共有コンテンツのサムネイルの下部ですこのビューの幅アンカーを制限するかフレーム幅を設定してコンテンツの最大幅を制御します UIView の minimumContentSizeCategory か maximumContentSizeCategory を使用して必要に応じてビューの最大AXコンテンツサイズカテゴリを設定しますこのビューの周囲に十分な垂直方向のスペースを確保しますビューの高さは preferredContentSizeCategory とその結果のフォントサイズに依存しますビューの高さが不必要に制限されている場合ビューはクリップされるか描画されない可能性がありますこの場合 horizontalAlignment は leading に設定されます Center または Trailing に設定することもできます次にアトリビューションビューのカスタマイズの方法です表示コンテキストを設定することでユーザーがどのようにコンテンツを消費しているかをシステムに通知することができますまた Shared with You コンテンツのランキングにも影響しますウィンドウに追加する前にこれを設定してくださいアトリビューションビューの背景スタイルは使用されているコンテンツの背景に基づいてカスタマイズできます例を示します displayContext プロパティのデフォルト値は summary ですこれはコンテンツが一覧の中に表示されていることを示しています映画を見たりポッドキャストを聞くなどユーザーがコンテンツを積極的に利用しているとき displayContext を detail に設定します displayContext の設定は App が提供するフィードバックとなりこれは Siri Suggestions のランク付けに役立ちますアトリビューションビューをモノクロ背景に配置するときにはこの例のようにアトリビューションビューの背景スタイルをカラーに設定しますカラー背景にアトリビューションビューを配置する場合はマテリアルを使いますこれでビューのコンテンツにマテリアル背景のブラーが設定されますこの例ではSafariのローディングページには背景に画像があり背景スタイルを正しく設定するとアトリビューションビューの内容がより見やすくなります次にコンテキストメニューを App のコンテンツに追加しタイトルをカスタマイズする方法を紹介します Appのコンテンツに添付されている既存のコンテキストメニューをアトリビューションビューで補完できますこのメニューは補強するコンテクストメニューのインラインまたは末尾に追加する必要がありますコンテキストメニューの削除オプションにカスタムタイトルを指定することができますこの文字列には正しくローカライズされた「削除」が含まれている必要がありますこの例ではSafariはメニューのタイトルを「リンクの削除」にコンテキストメニューでカスタマイズしています例を提示してこれを行う方法を紹介しますまず AttributionView のインスタンスを作成し hilight プロパティを設定します menuTitleForHideAction からコンテキストメニューの削除にカスタムのタイトルを指定しますコンテンツのコンテキストメニューを構成するには attributionView の supplementalMenu でメニューを取得しそれをコンテンツのコンテキストメニューに追加しますこれらの簡単な手順により App はアトリビューションビューで使用可能なコンテキストメニューオプションをコンテンツに追加できますこれで App に Shared with You を導入する方法が分かりました導入方法の３つの簡単な手順を要約します Universal Links を導入 Xcode で Shared with You を App の Capabolity に追加 Shared with You フレームワークをインポートして使用メッセージ App でコンテンツを共有しあなたの App で Shared with You を使用することを楽しみにしています

// Enumerate Shared with You shelf

class SharedWithYouViewController: UIViewController, SWHighlightCenterDelegate {
    let highlightCenter = SWHighlightCenter()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        highlightCenter.delegate = self
    }
    
    func highlightCenterHighlightsDidChange(_ highlightCenter: SWHighlightCenter) {
        for highlight in highlightCenter.highlights {
            let highlightURL = highlight.url
            // Generate a rich preview for the Highlight
        }
    }
}

13:42 - Setting appearance of Attribution View

// Setting appearance of Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView

14:36 - Horizontal Alignment for Attribution View

// Horizontal Alignment for Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView
attributionView.horizontalAlignment = .leading

15:19 - Display Context for Attribution View

// Display Context for Attribution View

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.preferredMaxLayoutWidth = maximumWidthForView
attributionView.horizontalAlignment = .center
attributionView.displayContext = .summary

17:12 - Add Shared with You Content Menu to your app’s content

// Add Shared with You Content Menu to your app’s content

let attributionView = SWAttributionView()
attributionView.highlight = self.highlightCenter.highlights[index]
attributionView.menuTitleForHideAction = "Remove Item"

let contextMenuConfig = UIContextMenuConfiguration(identifier: nil,previewProvider: nil) { [weak self] _ in
        let additionalMenu = attributionView.supplementalMenu
        // Append additionalMenu items to your content’s menu items
}

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

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

リソース

関連ビデオ

WWDC22

WWDC20