iOSアプリにシェアボタンを付ける

iOS アプリ「わたしのほんやさん」をバージョンアップしました。
今回、お気に入りの本を Twitter や Facebook でシェアできるボタンを追加しています。

シェアボタンの作成は非常に簡単です。
ただし、シェア先のサービスでの表示は結構バラバラ。。。

ボタンを配置する

まず、ユーザがタップするためのボタンを配置します。

1. Storyboard の右下からUIButtonをドラッグしてViewの上にドロップ。
2. ウインドウ右上の「８」のようなアイコンをクリックし、ViewController のソースを開く。もし他のファイルが開かれてしまったら、図の (2) のところから正しいファイルを選択。
3. 先ほどドロップしたUIButtonを右クリックのドラッグでViewControllerにドロップ。UIButtonへの参照をメンバ変数として登録する。
4. UIButtonを右クリックし「Touch Down」をドラッグしてViewControllerにドロップ。タップアクションを IBAction の関数として登録する。

シェアの動作を実装する

シェアの動作は次のように UIActivityViewController を呼び出すだけです。
このサンプルコードでは shareText にシェアした時に表示される本文を記載します。
「わたしのほんやさん」では、本のタイトルと URL を入れました。

本来、リンク先 URL は shareWebsite の方に入れるようなのですが、
シェア先のサービスによって扱われ方が異なります。
詳しくは後ほど説明します。

添付画像は shareImage に入れます。
このサンプルコードではアプリ内に「ImageFile.png」という画像を保持している前提です。
外部サーバにある画像を持ってくる場合などは、取得した画像を UIImage のオブジェクトにして渡せばOKです。

// シェアした時の本文
let shareText = "あいうえお http://{本文に関するURL}/"
// 紹介 URL
let shareWebsite = "http://{アプリ紹介のURL}/"
let shareImage = UIImagePNGRepresentation(UIImage(named: "ImageFile")
// シェア項目
let activityItems = [shareText, shareWebsite, shareImage] as [Any]
// 初期化処理
let activityVC = UIActivityViewController(activityItems: activityItems, applicationActivities: nil)
self.present(activityVC, animated: true, completion: nil)

シェア結果

アプリからシェアした結果がどのように表示されるかはシェア先のサービスに依存します。
いくつかのサービスで試したところ、次のようになっていました。

【メール／メッセージ】

メールやメッセージでシェアした場合、本文、URL、画像がそのまま表示されます。

URLを複数入れていた場合は連続して見づらいので、改行などで工夫すると良さそうです。

【Twitter】 

本文内のURLと追加のURLが両方とも記載されます。
URLが長い場合、末尾を「…」で省略して表示されます。
また、リンク先のURLは「http://t.co/〜」というTwitter独自の短縮URLに置き換えられます。
画像もしっかり表示されます。

Twitter 上で見ている分には非常に自然ですね。
ただし、Twitter と Facebook を連携させているユーザの場合、
Twitter から Facebook に自動投稿された内容は次の画像のような残念な表示になります。

【Twitter → Facebook 連携】

URL が３つになってしまいました。
３つ目のURLはTwitter上の投稿へのリンクです。
しかも、URLが３つとも「http://t.co/〜」になっています。

厳密には、表示されているサムネイルも３つ目のURLに入っている画像ではありません。
自動投稿の元になったTwitter上の投稿のサムネイルです。
実際にはどちらも同じ画像なのでたいした違いはないですが。

これらの問題はTwitterの外部投稿とFacebookの仕様の都合なので、アプリではどうにもならないかもしれません。

【Facebook】

Facebook へのシェアはこのようになります。
一見、綺麗に表示されているような気がしますが、実は投稿した内容と全然違います。

まず、本文に入っていたURLが何故か削除されています。
本文にはAmazonへのリンクを入れていたのですが、サムネイルがAmazonのものに入れ替わってしまいました。
そのため、Prime だとかレビュー数などの情報が表示されています。

もともと投稿に入っていた画像は一体どこに行ってしまったのでしょうか？
しかも、本文とは別に入れていたURLも無くなってしまいました。

この例では複数のURLのうち先頭にAmazonへのリンクが入っています。
先ほどの Twitter Facebook 連携の場合は最後の URL が Twitter へのリンクで、それがサムネイルになっていました。
つまり、Facebook は複数の URL の中身を見て、サムネイルにすべき URL を選択しているようです。
さらに、サムネイル以外のURLを表示せずに捨てるかどうかの条件が不明です。

複数のURLが含まれた状態でシェアする場合は Facebook での表示を念入りに確認しておく必要がありそうです。
期待した URL がサムネイル化されているか、メインのURLが削除されていないか、などなど。

まとめ

シェア機能の実装そのものはとても簡単にできました。
シェアした内容が期待通りかどうかはシェア先のサービス次第です。
特に Facebook は怪しいです。

シェア機能はアプリをユーザに告知してもらう手段を兼ねている場合も多いと思います。
あまりに無意味な表示にならないように気をつけたいところです。