[iOS] 標準コンポーネント「SLComposeViewController」を使って Twitter や Facebook に投稿する

2016.05.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

本記事では、iOS の 標準コンポーネント「SLComposeViewController」の使い方や注意点などを紹介していきます。

sl-compose-view-controller-00

サンプルアプリについて

本記事で解説するコードは以下のリポジトリで公開してます。

検証環境

  • OS X El Capitan 10.11.4
  • Xcode 7.3
  • 検証した iOS 端末
    • iPhone 4s iOS 8.4.1
    • iPhone 5s iOS 9.3.1

目次

SLComposeViewController

SLComposeViewController は「Social Framework」のクラスであり、SNS (Social Networking Service) への投稿を作成するための画面を提供します。コードを 2 行書くだけで SNS へ投稿する機能を提供できます。

「Social Framework」は以下の SNS をサポートしていますが、本記事では「Facebook」と「Twitter」だけ扱います。

  • Facebook
  • Twitter
  • Sina Weibo
  • Tencent Weibo

投稿画面

Twitter

他の標準 UI コンポーネントと同様の外観をもつ投稿画面が提供されます。

  • 投稿画面表示後にユーザーが入力/選択可能な項目
    • 入力可能な項目
      • 本文
    • 選択可能な項目
      • 位置情報

sl-compose-view-controller-00

Facebook

Facebook 公式アプリをインストールしていない場合

Twitter の場合と同様の投稿画面が提供されます。

  • 投稿画面表示後にユーザーが入力/選択可能な項目
    • 入力可能な項目
      • 本文
    • 選択可能な項目
      • アルバム(画像がある場合のみ)
      • 位置情報(チェックイン)
      • 共有範囲(公開範囲)

sl-compose-view-controller-02

Facebook 公式アプリをインストールしている場合

公式アプリをインストールしている場合は、公式アプリに近い外観をもつ投稿画面が提供されます。

  • 投稿画面表示後にユーザーが入力/選択可能な項目
    • 入力可能な項目
      • 本文
    • 選択可能な項目
      • 公開範囲
      • タグ設定
      • 今なにしてる? (Eating、Feeling など)
      • 位置情報(チェックイン)

sl-compose-view-controller-03

アカウント情報

SLComposeViewController は基本的に「設定アプリ」に設定されている SNS アカウントを使用します。

sl-compose-view-controller-01

「Accounts Framework」のクラスを使用すれば「設定アプリ」に設定されているアカウントの情報を取得できます。「Accounts Framework」については別の記事で扱う予定です。

作成と表示

SLComposeViewControllercomposeViewControllerForServiceType メソッドを使用して、SLComposeViewController インスタンスを作成します。 Twitter の場合は SLServiceTypeTwitter を、Facebook の場合は SLServiceTypeFacebook を引数に指定します。

// ServiceType を指定して SLComposeViewController を作成
SLComposeViewController *composeViewController = 
[SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];

そして、通常の UIViewController などの場合と同様に presentViewController:animated:completion: を使用すれば表示できます。

// SLComposeViewController を表示する
[self presentViewController:composeViewController animated:YES completion:nil];

各 SNS サービスの利用可否

SLComposeViewController には isAvailableForServiceType メソッドが用意されていて、各サービスが利用可能かを知ることができます。

// Twitter を利用できるかをチェックする
if (![SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter]) {
    NSLog(@"Twitter is not Available");
    return;
}

基本的には、このメソッドを使えば「各 SNS に投稿が可能か」を判別できます。しかし、一部例外があり「各 SNS の公式アプリ」をインストールしている場合は期待通りの動きになりませんでした。

Twitter

Twitter 公式アプリをインストールしていない場合

公式アプリをインストールしていない場合は期待通りに動作します。

No. 設定アプリに
アカウントを設定
公式アプリの
インストール
公式アプリで
ログイン
isAvailableForServiceType の値 投稿できるか
1 - - NO
2 - - YES

パターン 1 の場合、投稿画面表示時に以下のアラートが表示されました。

sl-compose-view-controller-04

Twitter 公式アプリをインストールしている場合

公式アプリをインストールしている場合、公式アプリ上でログインしているかどうかに関わらず、isAvailableForServiceType の値は YES になりました。

例えば、以下の表の「3」のパターン は「公式アプリのインストール」だけを行っていて、実際に投稿することはできませんが、isAvailableForServiceType の値は YES になりました。

No. 設定アプリに
アカウントを設定
公式アプリの
インストール
公式アプリで
ログイン
isAvailableForServiceType の値 投稿できるか
3 YES
4 YES
5 - -
6 YES

パターン 3 の場合、投稿画面表示時に以下のアラートが表示されました。

sl-compose-view-controller-04

パターン 4 に関して、iOS 9.3.1の場合、設定アプリと公式アプリが連動するのでこのパターンは実現できませんでした。

また、パターン 5 に関して、設定アプリにアカウントを設定していない状態で公式アプリでログインすると、設定アプリにもアカウントが設定されてしまったのでこのパターンは実現できませんでした。

使用されるアカウントについて

設定アプリと Twitter 公式アプリの動作を見る限り、基本的に設定アプリと公式アプリ上のアカウントは連動するようです。

例えば、設定アプリにアカウントを設定していない状態で公式アプリでログインすると、設定アプリにもそのアカウントが追加されます。公式アプリを使っているユーザー (ログイン済み) であれば、「設定アプリの中に Twitter アカウントが設定済み」であると言えます。

Facebook

Facebook 公式アプリをインストールしていない場合

Facebook の場合も同様に、公式アプリをインストールしていない場合は期待通りに動作します。

No. 設定アプリに
アカウントを設定
公式アプリの
インストール
公式アプリで
ログイン
isAvailableForServiceType の値 投稿できるか
1 - - NO
2 - - YES

パターン 1 の場合、投稿画面表示時に以下のアラートが表示されました。

sl-compose-view-controller-05

Facebook 公式アプリをインストールしている場合

Facebook の場合も同様に、公式アプリをインストールしている場合、公式アプリ上でログインしているかどうかに関わらず、isAvailableForServiceType の値は YES になりました。

例えば、以下の表の「3」のパターン は「公式アプリのインストール」だけを行っていて、実際に投稿することはできませんが、isAvailableForServiceType の値は YES になりました。

No. 設定アプリに
アカウントを設定
公式アプリの
インストール
公式アプリで
ログイン
isAvailableForServiceType の値 投稿できるか
3 YES
4 YES
5 YES
6 YES

パターン 3 と 4 の場合、投稿画面表示時に以下のアラートが表示されました。

sl-compose-view-controller-06

使用されるアカウントについて

Facebook の場合、設定アプリと公式アプリ上のアカウントは連動しないようです。

例えば、設定アプリにアカウントを設定していない状態で公式アプリにログインしても、設定アプリにそのアカウントが追加されませんでした。また、設定アプリと公式アプリにそれぞれ別々のアカウントが入っている場合、公式アプリの方に設定されているアカウントが投稿に使用されました。

テキスト、画像、URL を追加

SLComposeViewController には以下のメソッドが用意されており、投稿に含める「テキスト」「画像」「URL」を指定できます。これらは SLComposeViewController を表示する前に設定する必要があるようです。

  • setInitialText
  • addImage
  • addURL
// テキスト、画像、URL を追加したい場合は、SLComposeViewController を表示する前に設定する
[composeViewController setInitialText:@"これはデフォルトのテキストです。"];
[composeViewController addImage:[UIImage imageNamed:@"image"]];
[composeViewController addURL:[NSURL URLWithString:@"https://dev.classmethod.jp/"]];

動作結果

「テキスト」「画像」「URL」を指定した場合の動作結果は以下の通りです。

Twitter

  • 投稿に含めることができたデフォルト値
    • 「テキスト」
    • 「画像」
    • 「URL」

sl-compose-view-controller-00

sl-compose-view-controller-07

Facebook

Facebook 公式アプリをインストールしていない場合
  • 投稿に含めることができたデフォルト値
    • 「テキスト」
    • 「画像」
    • 「URL」

sl-compose-view-controller-08

sl-compose-view-controller-09

Facebook 公式アプリをインストールしている場合
  • 投稿に含めることができたデフォルト値
    • 「URL」

sl-compose-view-controller-10

sl-compose-view-controller-11

操作完了時の処理を指定

投稿画面上の「キャンセル」または「投稿」ボタンがタップされたタイミングで特定の処理を行うには、SLComposeViewControllercompletionHandler プロパティにブロックを指定します。

// 処理完了時に実行される completionHandler を設定
composeViewController.completionHandler = ^(SLComposeViewControllerResult result) {
    if (result == SLComposeViewControllerResultCancelled) {
        NSLog(@"Cancelled");
    } else {
        NSLog(@"Done");
    }
};

まとめ

本記事では、iOS の標準コンポーネント「SLComposeViewController」の使い方や挙動を紹介しました。

「SLComposeViewController」を使えば、ほんの少しのコードを追加するだけで SNS へ投稿する機能を提供できます。

各 SNS の公式アプリをインストールしているかどうかによって、投稿画面の外観や動作が異なる場合があります。作成するアプリによっては、気をつけたほうが良いポイントになるかもしれません。

本記事が「SLComposeViewController」を使う際の参考になれば幸いです。