Xamarin.iOS の Social Framework

[アーティクル]
03/20/2017

Social Framework には、Twitter や Facebook に加え、中国のユーザー向けの SinaWeibo などのソーシャルネットワークと対話するための統合 API が用意されています。

Social Framework を使用すると、認証を管理しなくても、アプリケーションは 1 つの API からソーシャルネットワークとやり取りできます。これには、投稿を作成するためのシステム提供のビューコントローラーと、HTTP 経由で各ソーシャルネットワークの API を使用できる抽象化が含まれています。

Twitter への接続

Twitter アカウントの設定

Social Framework を使用して Twitter に接続するには、次に示すようにデバイス設定でアカウントを構成する必要があります。

アカウントが入力され、Twitter で検証されると、デバイス上で Social Framework クラスを使用して Twitter にアクセスするすべてのアプリケーションで、このアカウントが使用されます。

ツイートの送信

Social Framework には、 SLComposeViewController と呼ばれるコントローラーが含まれており、ツイートを編集および送信するためのシステム提供のビューが表示されます。次のスクリーンショットは、このビューの例を示しています。

Twitter で SLComposeViewController を使用するには、次に示すように、SLServiceType.Twitter で FromService メソッドを呼び出してコントローラーのインスタンスを作成する必要があります。

var slComposer = SLComposeViewController.FromService (SLServiceType.Twitter);

SLComposeViewController インスタンスが返されたら、それを使用して Twitter に投稿する UI を表示できます。しかし、最初に行うことは、IsAvailable を呼び出して、ソーシャルネットワーク (この場合は Twitter) の可用性を確認することです。

if (SLComposeViewController.IsAvailable (SLServiceKind.Twitter)) {
  ...
}

SLComposeViewController は、ユーザーの操作なしでツイートを直接送信することはありません。ただし、次のメソッドを使用して初期化できます。

SetInitialText - ツイートに表示する最初のテキストを追加します。
AddUrl -ツイートに URL を追加します。
AddImage - ツイートに画像を追加します。

初期化されると、PresentVIewController の呼び出しにより、SLComposeViewController で作成されたビューが表示されます。その後、ユーザーは必要に応じてツイートを編集して送信したり、送信をキャンセルしたりできます。どちらの場合も、コントローラーを CompletionHandler で閉じる必要があります。ここで、次に示すように、結果を確認して、ツイートが送信またはキャンセルされたかどうかを確認することもできます。

slComposer.CompletionHandler += (result) => {
  InvokeOnMainThread (() => {
    DismissViewController (true, null);
    resultsTextView.Text = result.ToString ();
  });
};

ツイートの例

次のコードは、SLComposeViewController を使用して、ツイートの送信に使用されるビューを表示する方法を示しています。

using System;
using Social;
using UIKit;

namespace SocialFrameworkDemo
{
    public partial class ViewController : UIViewController
    {
        #region Private Variables
        private SLComposeViewController _twitterComposer = SLComposeViewController.FromService (SLServiceType.Twitter);
        #endregion

        #region Computed Properties
        public bool isTwitterAvailable {
            get { return SLComposeViewController.IsAvailable (SLServiceKind.Twitter); }
        }

        public SLComposeViewController TwitterComposer {
            get { return _twitterComposer; }
        }
        #endregion

        #region Constructors
        protected ViewController (IntPtr handle) : base (handle)
        {

        }
        #endregion

        #region Override Methods
        public override void ViewWillAppear (bool animated)
        {
            base.ViewWillAppear (animated);

            // Update UI based on state
            SendTweet.Enabled = isTwitterAvailable;
        }
        #endregion

        #region Actions
        partial void SendTweet_TouchUpInside (UIButton sender)
        {
            // Set initial message
            TwitterComposer.SetInitialText ("Hello Twitter!");
            TwitterComposer.AddImage (UIImage.FromFile ("Icon.png"));
            TwitterComposer.CompletionHandler += (result) => {
                InvokeOnMainThread (() => {
                    DismissViewController (true, null);
                    Console.WriteLine ("Results: {0}", result);
                });
            };

            // Display controller
            PresentViewController (TwitterComposer, true, null);
        }
        #endregion
    }
}

Twitter API の呼び出し

Social Framework には、ソーシャルネットワークへの HTTP 要求の作成のサポートも含まれています。これは、特定のソーシャルネットワークの API をターゲットにするために使用される SLRequest クラスに要求をカプセル化します。

たとえば、以下のコードは (上記のコードを拡張して) Twitter にリクエストを行い、公開タイムラインを取得します:

using Accounts;
...

#region Private Variables
private ACAccount _twitterAccount;
#endregion

#region Computed Properties
public ACAccount TwitterAccount {
    get { return _twitterAccount; }
}
#endregion

#region Override Methods
public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Update UI based on state
    SendTweet.Enabled = isTwitterAvailable;
    RequestTwitterTimeline.Enabled = false;

    // Initialize Twitter Account access
    var accountStore = new ACAccountStore ();
    var accountType = accountStore.FindAccountType (ACAccountType.Twitter);

    // Request access to Twitter account
    accountStore.RequestAccess (accountType, (granted, error) => {
        // Allowed by user?
        if (granted) {
            // Get account
            _twitterAccount = accountStore.Accounts [accountStore.Accounts.Length - 1];
            InvokeOnMainThread (() => {
                // Update UI
                RequestTwitterTimeline.Enabled = true;
            });
        }
    });
}
#endregion

#region Actions
partial void RequestTwitterTimeline_TouchUpInside (UIButton sender)
{
    // Initialize request
    var parameters = new NSDictionary ();
    var url = new NSUrl("https://api.twitter.com/1.1/statuses/user_timeline.json?count=10");
    var request = SLRequest.Create (SLServiceKind.Twitter, SLRequestMethod.Get, url, parameters);

    // Request data
    request.Account = TwitterAccount;
    request.PerformRequest ((data, response, error) => {
        // Was there an error?
        if (error == null) {
            // Was the request successful?
            if (response.StatusCode == 200) {
                // Yes, display it
                InvokeOnMainThread (() => {
                    Results.Text = data.ToString ();
                });
            } else {
                // No, display error
                InvokeOnMainThread (() => {
                    Results.Text = string.Format ("Error: {0}", response.StatusCode);
                });
            }
        } else {
            // No, display error
            InvokeOnMainThread (() => {
                Results.Text = string.Format ("Error: {0}", error);
            });
        }
    });
}
#endregion

このコードを詳しく見てみましょう。まず、アカウントストアにアクセスし、Twitter アカウントの種類を取得します。

var accountStore = new ACAccountStore ();
var accountType = accountStore.FindAccountType (ACAccountType.Twitter);

次に、アプリが Twitter アカウントにアクセスできるかどうかをユーザーに確認し、アクセス権が付与されている場合は、アカウントがメモリに読み込まれ、UI が更新されます。

// Request access to Twitter account
accountStore.RequestAccess (accountType, (granted, error) => {
    // Allowed by user?
    if (granted) {
        // Get account
        _twitterAccount = accountStore.Accounts [accountStore.Accounts.Length - 1];
        InvokeOnMainThread (() => {
            // Update UI
            RequestTwitterTimeline.Enabled = true;
        });
    }
});

ユーザーが (UI のボタンをタップして) タイムラインデータを要求すると、アプリはまず Twitter からデータにアクセスするための要求を形成します。

// Initialize request
var parameters = new NSDictionary ();
var url = new NSUrl("https://api.twitter.com/1.1/statuses/user_timeline.json?count=10");
var request = SLRequest.Create (SLServiceKind.Twitter, SLRequestMethod.Get, url, parameters);

この例では、URL に ?count=10 を含めることで、返される結果を最新の 10 個のエントリに制限しています。最後に、(上記で読み込まれた) Twitter アカウントに要求をアタッチし、Twitter への呼び出しを実行してデータをフェッチします。

// Request data
request.Account = TwitterAccount;
request.PerformRequest ((data, response, error) => {
    // Was there an error?
    if (error == null) {
        // Was the request successful?
        if (response.StatusCode == 200) {
            // Yes, display it
            InvokeOnMainThread (() => {
                Results.Text = data.ToString ();
            });
        } else {
            // No, display error
            InvokeOnMainThread (() => {
                Results.Text = string.Format ("Error: {0}", response.StatusCode);
            });
        }
    } else {
        // No, display error
        InvokeOnMainThread (() => {
            Results.Text = string.Format ("Error: {0}", error);
        });
    }
});

データが正常に読み込まれた場合は、生の JSON データが表示されます (次の出力例に示されています)。

実際のアプリでは、JSON の結果を通常どおりに解析し、結果をユーザーに表示できます。 JSON の解析方法については、「Web サービスの概要」を参照してください。

Facebook への接続

Facebook アカウントの設定

Social Framework を使用した Facebook への接続は、上記の Twitter で使用されたプロセスとほぼ同じです。次に示すように、Facebook ユーザーアカウントは、デバイス設定で構成する必要があります。

構成が完了するとデバイス上で Social Framework を使用して Facebook にアクセスするすべてのアプリケーションで、このアカウントが使用されます。

Facebook への投稿

Social Framework は複数のソーシャルネットワークにアクセスするように設計された統合 API であるため、コードは使用されるソーシャルネットワークに関係なくほぼ同じままです。

たとえば、SLComposeViewController は前述の Twitter の例とまったく同じように使用できます。唯一の違いは、Facebook 固有の設定とオプションへの切り替えです。次に例を示します。

using System;
using Foundation;
using Social;
using UIKit;

namespace SocialFrameworkDemo
{
    public partial class ViewController : UIViewController
    {
        #region Private Variables
        private SLComposeViewController _facebookComposer = SLComposeViewController.FromService (SLServiceType.Facebook);
        #endregion

        #region Computed Properties
        public bool isFacebookAvailable {
            get { return SLComposeViewController.IsAvailable (SLServiceKind.Facebook); }
        }

        public SLComposeViewController FacebookComposer {
            get { return _facebookComposer; }
        }
        #endregion

        #region Constructors
        protected ViewController (IntPtr handle) : base (handle)
        {

        }
        #endregion

        #region Override Methods
        public override void ViewWillAppear (bool animated)
        {
            base.ViewWillAppear (animated);

            // Update UI based on state
            PostToFacebook.Enabled = isFacebookAvailable;
        }
        #endregion

        #region Actions
        partial void PostToFacebook_TouchUpInside (UIButton sender)
        {
            // Set initial message
            FacebookComposer.SetInitialText ("Hello Facebook!");
            FacebookComposer.AddImage (UIImage.FromFile ("Icon.png"));
            FacebookComposer.CompletionHandler += (result) => {
                InvokeOnMainThread (() => {
                    DismissViewController (true, null);
                    Console.WriteLine ("Results: {0}", result);
                });
            };

            // Display controller
            PresentViewController (FacebookComposer, true, null);
        }
        #endregion
    }
}

Facebook と共に使用すると、SLComposeViewController により Twitter の例とほぼ同じビューが表示され、この場合は Facebook がタイトルとして表示されます。

Facebook のグラフ API の呼び出し

Twitter の例と同様に、Social Framework の SLRequest オブジェクトは Facebook のグラフ API で使用できます。たとえば、次のコードは、(上記のコードを展開して) Xamarin アカウントに関する情報をグラフ API から返します。

using Accounts;
...

#region Private Variables
private ACAccount _facebookAccount;
#endregion

#region Computed Properties
public ACAccount FacebookAccount {
    get { return _facebookAccount; }
}
#endregion

#region Override Methods
public override void ViewWillAppear (bool animated)
{
    base.ViewWillAppear (animated);

    // Update UI based on state
    PostToFacebook.Enabled = isFacebookAvailable;
    RequestFacebookTimeline.Enabled = false;

    // Initialize Facebook Account access
    var accountStore = new ACAccountStore ();
    var options = new AccountStoreOptions ();
    var options.FacebookAppId = ""; // Enter your specific Facebook App ID here
    accountType = accountStore.FindAccountType (ACAccountType.Facebook);

    // Request access to Facebook account
    accountStore.RequestAccess (accountType, options, (granted, error) => {
        // Allowed by user?
        if (granted) {
            // Get account
            _facebookAccount = accountStore.Accounts [accountStore.Accounts.Length - 1];
            InvokeOnMainThread (() => {
                // Update UI
                RequestFacebookTimeline.Enabled = true;
            });
        }
    });

}
#endregion

#region Actions
partial void RequestFacebookTimeline_TouchUpInside (UIButton sender)
{
    // Initialize request
    var parameters = new NSDictionary ();
    var url = new NSUrl ("https://graph.facebook.com/283148898401104");
    var request = SLRequest.Create (SLServiceKind.Facebook, SLRequestMethod.Get, url, parameters);

    // Request data
    request.Account = FacebookAccount;
    request.PerformRequest ((data, response, error) => {
        // Was there an error?
        if (error == null) {
            // Was the request successful?
            if (response.StatusCode == 200) {
                // Yes, display it
                InvokeOnMainThread (() => {
                    Results.Text = data.ToString ();
                });
            } else {
                // No, display error
                InvokeOnMainThread (() => {
                    Results.Text = string.Format ("Error: {0}", response.StatusCode);
                });
            }
        } else {
            // No, display error
            InvokeOnMainThread (() => {
                Results.Text = string.Format ("Error: {0}", error);
            });
        }
    });
}
#endregion

このコードと上記の Twitter バージョンの唯一の実際の違いは、要求を行うときにオプションとして設定する必要がある開発者またはアプリ固有の ID (Facebook の開発者ポータルから生成できます) を取得するための Facebook の要件です。

var options = new AccountStoreOptions ();
var options.FacebookAppId = ""; // Enter your specific Facebook App ID here
...

// Request access to Facebook account
accountStore.RequestAccess (accountType, options, (granted, error) => {
    ...
});

このオプションを設定しない (または無効なキーを使用する) と、エラーが発生するか、データが返されません。

まとめ

この記事では、Social Framework を使用して Twitter や Facebook とやり取りする方法について説明しました。デバイス設定で各ソーシャルネットワークのアカウントを構成する場所を示しました。また、SLComposeViewController を使用して、ソーシャルネットワークに投稿するための統一されたビューを表示する方法についても説明しました。さらに、各ソーシャルネットワークの API を呼び出すために使用される SLRequest クラスを調べました。

Web サービスの概要

次の方法で共有

Twitter への接続

Twitter アカウントの設定

ツイートの送信

ツイートの例

Twitter API の呼び出し

Facebook への接続

Facebook アカウントの設定

Facebook への投稿

Facebook のグラフ API の呼び出し

まとめ

その他のリソース

次の方法で共有

Twitter への接続

Twitter アカウントの設定

ツイートの送信

ツイートの例

Twitter API の呼び出し

Facebook への接続

Facebook アカウントの設定

Facebook への投稿

Facebook のグラフ API の呼び出し

まとめ

関連リンク

その他のリソース