【SwiftUI】iOS16+のShareLink｜シェアリンクの実装例とボタンのカスタマイズについて

iOS16+のアップデートにより、新機能として「ShareLink」が登場しました！

本記事ではiOS16+におけるSwiftUIのShareLinkについて見ていきます。

本記事のソースコード

本記事で使用しているサンプルコードはGitHubにて公開されています。

コード内容の確認にぜひご利用ください🍎

GitHubを見に行く>>

[ 本記事はこんな人におすすめ ]

・iOS16+のShareLinkの使い方を知りたい

・SwiftUIでアプリ開発をしている

1 概要
2 ShareLinkのシンプルな実装
- 2.1 テキスト（String）をシェアする
- 2.2 URLリンクをシェアする
3 カスタムデータをシェア(共有)する方法
- 3.1 データをTransferableプロトコルに準拠させる
4 シェアボタンの外観をカスタマイズ
- 4.1 ボタンのラベル全体を変更する
- 4.2 ボタンのタイトルのみを変更する
5 共有シート上の表示カスタマイズ
- 5.1 シートのプレビューをカスタマイズ
6 ShareLink使用時のエラーについて
- 6.1 カスタムデータをシェアする際に発生するエラー
7 まとめ

概要

ShareLinkとは、外部アプリケーションとデータの共有を行えるシステムを提供するビューのことを指します。

シェアボタンをタップすることで、共有先アプリの選択を行うシート型のビューが表示されます。写真の共有などで利用したことがあるかと思います。

【公式ドキュメント】

👉参考 : ShareLink | Apple Developer Documentation

ShareLinkのシンプルな実装

テキスト（String）をシェアする

「item:」に文字列を指定することで、テキストを共有することができます。

				
					ShareLink(item: "CodeCandy")

URLリンクをシェアする

「item:」にURLを指定することで、コンテンツリンクを共有できます。

				
					ShareLink(item: URL(string: "https://developer.apple.com/xcode/swiftui/")!)

URL を共有する場合、特に指定がなければ、ネットワーク経由でリンクのメタデータを自動取得して、共有シート上にアイコン画像とメッセージのプレビューを表示します。（シート上部）

メタデータ・・・あるデータに関する情報を記述する説明データのことを指す。

カスタムデータをシェア(共有)する方法

データをTransferableプロトコルに準拠させる

自作のカスタムデータをTransferableプロトコルに準拠することで、シェア共有できるデータとして扱うことができるようになります。

前述のように「String」や「URL」のデータをシェアできるのは、これらのデータ型がTransferableプロトコルに準拠したものであることが理由です。

以下はドキュメントに記述されているサンプルをもとに、「Image」データをShareLinkに渡せるように実装したコードです。

イメージ(image)と見出し(caption)が定義されたカスタム構造体「Photo」に、Transferableプロトコルを準拠させています。

				
					// Transferableに準拠し準拠したデータ
struct Photo: Transferable {
    static var transferRepresentation: some TransferRepresentation {
        ProxyRepresentation(\.image)
    }


    public var image: Image
    public var caption: String
}

これによって、ShareLinkにカスタムデータを渡すことが可能になります。

※カスタムデータ使用時には、引数「preview:」に値を設定する必要があります。詳しくは後の項目【ShareLink使用時のエラーについて】で解説しています。

シミュレータだと見出し(caption)しか表示されませんが、実機ではイメージ画像も共有シート上に表示されます。

ここに表示される内容は、引数「preview:」に指定した値が表示されます。

シェアボタンの外観をカスタマイズ

シェアボタンのタイトルやシンボルの外観を変更することができます。

ボタンのラベル全体を変更する

Labelを使ってシェアボタンの全体をカスタマイズできます。

				
					// シェアボタンのラベル全体を変更
ShareLink(item: URL(
    string: "https://developer.apple.com/xcode/swiftui/")!
) {
    Label("ラベル全体を変更", systemImage: "message.fill")
}

ボタンのタイトルのみを変更する

シェアボタンのタイトルのみ変更したい場合は以下のように記述します。

				
					// シェアボタンのタイトルのみ変更
ShareLink("Share URL", item: URL(
    string: "https://developer.apple.com/xcode/swiftui/")!
)

共有シート上の表示カスタマイズ

シェアボタンを押して表示される共有シートも、一部カスタマイズが可能です。

下記の「イメージ」と「メッセージ」の部分をカスタマイズできます。

シートのプレビューをカスタマイズ

共有シート上でのイメージやメッセージブレビューを指定するには、引数「preview:」にSharePreview構造体を渡します。

				
					// Transferableに準拠した独自のカスタムデータ
let photo = Photo(image: Image("sampleImage"), caption: "シューズ")

// ...

// 共有シート用のプレビューデータを設定
ShareLink(item: "CodeCandy",
          preview: SharePreview("プレビュー用のMessage",
                                image: photo.image)
)

これにより、シート内に表示するデータを指定できます。