【Swift UI】SNSシェアボタンの作成方法!UIActivityViewControllerの使い方

この記事からわかること

  • Swift UIシェアボタン作成方法
  • SNS(Twitter/LINEなど)にシェアするには?
  • UIActivityViewControllerクラスの使い方
  • UIViewControllerpresentメソッド
  • シェアするアプリを指定するexcludedActivityTypes
  • 日本語化する方法

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Swift UIでTwitterやLINEなどのSNSにアプリをシェアするボタンの実装方法をまとめていきます。

Swift UIでシェア機能を実装する方法

SwiftUIでSNSへのシェアボタンをクリックした時の画面

今回は繰り返し使えるように引数にシェアしたい内容を受け取るメソッドとして定義しています。

 // シェアボタン
func shareApp(shareText: String, shareImage: Image, shareLink: String) {
    let items = [shareText, shareImage, URL(string: shareLink)!] as [Any]
    let activityVC = UIActivityViewController(activityItems: items, applicationActivities: nil)
    let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
    let rootVC = windowScene?.windows.first?.rootViewController
    rootVC?.present(activityVC, animated: true,completion: {})
}
Button(action: {
    shareApp(shareText: "mappingというアプリを使ってみてね♪", shareImage: Image("icon"), shareLink: "https://tech.amefure.com/")
}) {
    HStack{
        Image(systemName:"star.bubble").frame(width: 30)
        Text("シェアする")
    }
}

シェアボタンを実装するために重要なポイント

UIActivityViewControllerクラスとは?

SNSへのシェア機能を実装するのに重要なのはUIActivityViewControllerクラスです。このクラスはSNSへのシェアや電子メールによる送信など標準的なサービスを提供してくれるビューコントローラー(UIViewController)の役割を持っています。

open class UIActivityViewController : UIViewController

難しく書くとこんな感じですが要するにiPhoneの下部からこのように出てくるシェア機能を実装するためのクラスになります。

SwiftUIでSNSへのシェアボタンをクリックした時の画面

シェアできる内容(アイテム)は以下の3種類まで対応しています。

シェアできるアイテムの種類

アイテムの指定方法

シェアするアイテムはUIActivityViewControllerをインスタンス化する際の引数activityItemsに指定します。定義を見てみると[Any]となっているので異なるデータ型を保持する配列形式となります。applicationActivitiesはアプリ固有のサービスを実装したい場合に設定します。不要であればnilを指定します。

UIActivityViewControllerイニシャライザ

init(
    activityItems: [Any],
    applicationActivities: [UIActivity]?
)

ViewControllerとしてインスタンス化する際にアイテムを引数に設定します。直接引数に指定する場合は以下の通りでOKですが変数に格納して渡す際は[Any]への型変換が必要になります。

let activityVC = UIActivityViewController(activityItems:  ["mappingというアプリを使ってみてね♪",Image(systemName: "globe.asia.australia"), URL(string: "https://tech.amefure.com/")!], applicationActivities: nil)

変数に格納する場合

let items = ["mappingというアプリを使ってみてね♪",Image(systemName: "globe.asia.australia"), URL(string: "https://tech.amefure.com/")!] as [Any]
let activityVC = UIActivityViewController(activityItems: items, applicationActivities: nil)

これで表示するシェアビュー(UIActivityViewController:UIViewControllerインスタンス)の構築が完了しました。続いてこれを表示させる処理を記述していきます。

UIViewController.presentメソッド

作成したUIActivityViewController(UIViewController)インスタンスをiPhone下部に表示するにはViewControllerインスタンスをモーダルに表示できるUIViewControllerpresentメソッドを使用します。

func present(
    _ viewControllerToPresent: UIViewController,
    animated flag: Bool,
    completion: (() -> Void)? = nil
)

各引数の意味

このメソッドでシェアビューを表示するためには表示元となるビューの特定が必要です。

rootViewControllerを取得

rootViewControllerを取得するにはアプリケーションを制御、管理するUIApplicationクラスからメモリ内でアクティブになっているシーンを取得しそのシーンのrootViewControllerプロパティにアクセスします。

let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
let rootVC = windowScene?.windows.first?.rootViewController

あとは取得したrootViewControllerからpresentメソッドを呼び出して引数にシェアビューを指定すればOKです。

rootVC?.present(activityVC, animated: true,completion: {} )

完成したシェアメソッド

// シェアボタン
func shareApp(shareText: String, shareImage: Image, shareLink: String) {
    let items = [shareText, shareImage, URL(string: shareLink)!] as [Any]
    let activityVC = UIActivityViewController(activityItems: items, applicationActivities: nil)
    let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
    let rootVC = windowScene?.windows.first?.rootViewController
    rootVC?.present(activityVC, animated: true,completion: {})
}

Swift UIで使ってみる

あとはボタンなどのアクションでメソッドを呼び出せばシェアビューをモーダル表示させることができるようになります。

Button(action: {
    shareApp(shareText: "mappingというアプリを使ってみてね♪", shareImage: Image(systemName: "globe.asia.australia"), shareLink: "https://tech.amefure.com/")
}) {
    HStack{
        Image(systemName:"star.bubble").frame(width: 30)
        Text("シェアする")
    }
}

シェアするアプリを指定するexcludedActivityTypes

シェアするアプリやツールなどは何も指定しない場合、そのデバイスにインストールされているシェア可能なアプリ全てが自動で表示されます。

SwiftUIでSNSへのシェアボタンをクリックした時の画面

この中でもシェアさせたいアプリを限定するために、除外する設定ができるのがUIActivityViewControllerクラスのexcludedActivityTypesプロパティです。アプリ(ActivityType)を除外する設定なのでこのプロパティに値を渡さなければ自動で全てが表示されます。

使用方法

使用するにはインスタンス化したUIActivityViewControllerexcludedActivityTypesプロパティに配列形式で除外したいアプリを渡すだけです。

let activityVC = UIActivityViewController(activityItems: items, applicationActivities: nil)
activityVC.excludedActivityTypes = [
    // 不要なアプリ(UIActivityType)を列挙する
    UIActivity.ActivityType.message,
    UIActivity.ActivityType.mail
]

UIActivity.ActivityType

ActivityType 概要
addToReadingList Safariのリーディングリストへ追加
airDrop Air Dropで近くの端末にシェア
assignToContact 連絡先にアイテムを渡す
copyToPasteboard ペーストボード(クリップボード)へコピー
mail メールでシェア
message メッセージでシェア
openInIBooks iBooksにPDFとして保存
postToFacebook Facebookでシェア
postToFlickr Flickrでシェア
postToTencentWeibo Tencent Weiboでシェア
postToTwitter Twitterでシェア
postToVimeo Viemoでシェア
postToWeibo Weiboでシェア
print 印刷
saveToCameraRoll カメラロールに保存
markupAsPDF PDFを作成

日本語化する

設定を何もしていない状態だとシェアするための言語が「英語」になってしまっています。このままでは日本人向けではないので日本語化していきたいと思います。

SwiftUIでSNSへのシェアボタンをクリックした時の画面

日本語化する流れ

詳細は以下の記事を参考にしてください。

おすすめ記事:【Swift/Xcode】アプリを日本語化する方法!Localizationsの設定

これで日本語化することができたので確認してみます。

SwiftUIでSNSへのシェアボタンをクリックした時の画面

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index