26
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【SwiftUI】iOS16.0 以降で使える ShareLinkでできることを調べてみた

Last updated at Posted at 2023-01-29

iOS16 からSwiftUIで共有シートが実装できるようになった模様です。やった!
ちょうど共有機能をつけたいアプリがあり、その実装をしたのでできることを調べてみました。

環境

  • Xcode 14.2
  • iPhone 13 mini(16.2)
  • iPhone 14 Pro(16.2)

できること

5パターン試してみたので、そのGIFを載せます。

ファイル名

コード全体はこちらに置いています。

1. リンクのみ

リンクのみの場合は、システム標準のUIになります。

VStack(alignment: .leading) {
    Text("1. システム標準の外観(リンクのみ)")
    ShareLink(item: URL(string: "https://developer.apple.com/xcode/swiftui/")!)
}

2. リンクのタイトルをカスタマイズ

VStack(alignment: .leading) {
    Text("2.リンクのタイトルだけをカスタマイズ")
    ShareLink("リンクのタイトル", item: URL(string: "https://developer.apple.com/xcode/swiftui/")!)
}

3. リンクの外観全体をカスタマイズ

VStack(alignment: .leading) {
    Text("3.リンクの外観全体をカスタマイズ")
    ShareLink(item: URL(string: "https://developer.apple.com/xcode/swiftui/")!) {
        HStack {
            Image(systemName: "personalhotspot")
            Text("共有ボタン")
        }
        .foregroundColor(.red)
    }
}

4. 独自の型を渡し、プレビューもカスタマイズ

Transferable型に準拠すれば、独自の型を渡すことができます。

// Transferableに準拠した型を定義
struct Photo: Transferable {
    static var transferRepresentation: some TransferRepresentation {
        ProxyRepresentation(exporting: \.image)
    }

    public var image: Image
    public var caption: String
}

またプレビューはリンクを共有する場合、デフォルトではプレースホルダーのリンクアイコン画像とネットワーク経由で取得したリンクのメタデータを表示するそうです。

このデフォルトを使わず、自分でプレビューを設定することができます。

VStack(alignment: .leading) {
    Text("4.Transferableに準拠した独自の型を渡し、プレビューもカスタマイズ")
    ShareLink(
        item: photo,
        preview: SharePreview(
                     photo.caption,
                     image: photo.image))
}

5. サブジェクトとメッセージを追加

共有するアプリによっては対応していないものもありますが、サブジェクトとメッセージのテキストを共有することもできます。

let photo = Photo(image: Image("people"), caption: "人々のアイコン")
・・・
VStack(alignment: .leading) {
    Text("5.サブジェクトとメッセージを追加")
    ShareLink(
        item: photo,
        subject: Text("Cool Photo"),
        message: Text("Check it out!"),
        preview: SharePreview(
                     photo.caption,
                     image: photo.image))
}

アプリによって違う共有できるデータ

今回、独自の型を使ったPhotoで他のアプリにデータを共有しようとしたとき、何を共有できるのか調べてみました。アプリによって受け取る値に違いはありましたが、全部を受け取ってくれるアプリは調査した中ではありませんでした。

共有したいデータ(↓)/アプリ(→) コピーして標準メモアプリに貼り付け 標準メモアプリ 標準メールアプリ Slack Twitter LINE
IMG_1863.PNG IMG_1862.PNG IMG_1866 2.PNG IMG_1865.PNG IMG_1867.PNG IMG_1861.PNG
Photo構造体が持つcaptionのテキスト
(「人々のアイコン」)
Photo構造体が持つimageの画像
サブジェクト
(「Cool Photo」)
メッセージ
(「Check it out!」)

一番共有される可能性が高いのは、imageの画像とメッセージでした。サブジェクトに対応しているのはこの中では標準メールアプリだけでしたね。あと独自の型で定義したcaptionもなかなか共有されませんね・・・なんでなんでしょうか・・・そこまで分かりませんでした。。

コピーしてメモアプリに貼った時と標準メモアプリに直で共有した時とで、どうして共有されるデータが違うの?と思ったりしました。。🙃

困ったこと(未解決)

未解決なのですが、実装中に不思議な事象が発生しました。

プレビューに設定した画像が逆さまに表示されることがある

共有シートに表示されるプレビューに設定した画像が逆さまになることがありました。。今のところシミュレータとXcodeプレビューで発生しており、実機では発生していないですがたまたまかもしれません。。
理由はまだわかっていませんが、公式ドキュメントの通り実装しており何か特殊なことはしていないので、不具合なのでしょうか? 🤔

ファイル名

おわりに

初めてShareLinkを触ってみました。実装したことがなかったのですが、SwiftUIがデフォルトで提供してくれていることにより簡単に実装できました。

ところで標準メモアプリの共有ボタンを押した時の共有シートのプレビューは結構複雑ですが、あれはSwiftUIのShareLinkだけでは無理そうですよね。相変わらず複雑なプレビューを実装したい場合は今回のこのShareLinkは向いていなそうだなという想像をしました。

UIKit側の実装もいつか触ってみたいです。

参考

改めて公式ドキュメント。
全部ではないですが、一部不完全なコードが載っていました。ブラケットが足りないレベルのミスですが。

UIKit側のも少し読みました。

26
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?