[ Parse.com ] -SNS連携機能を使ってみよう-

前回は、「データストレージ機能」についてご説明しました。

今回はSNS連携機能についてご紹介します。
まず、SNS連携とは何かを簡単にご説明します。

SNS連携とは、アプリケーション側から「facebook」や「twitter」と
連携して認証を行ったり、投稿などを行うことができる機能です。

「facebook」や「twitter」と連携する場合、無料でAPIが公開されていますので、
アプリケーション側から公開されているAPIを使用して連携することができます。
デベロッパー登録を行うと、公開されているAPIを使用することができます。

それでは、SNS連携機能を使用したアプリケーションを作成してみましょう。
今回は、facebookと連携してログインから投稿までを行うアプリケーションを作成します。
※今回も「iOS」を例としてSNS連携機能をご説明します。

まずは、事前準備として下記をそろえておきましょう。

  • iPhone5端末
  • 前回使用したプロジェクトファイル
  • facebookのアカウント
  • facebookでデベロッパー登録した際に指定した「アプリ名」
  • facebookでデベロッパー登録した際に発行された「APIKey」及び、「secretKey」
  • facebookSDK

※「APIKey」、「secretKey」、「facebookSDK」は、デベロッパー登録を行うと無料で取得することができます。
デベロッパー登録によって取得した上記をParse.comサイトやプロジェクトに組み込むことによって、
簡単にfacebook連携を行うことができます。
今回、デベロッパー登録の方法及び、下記を取得する方法については割愛します。

  • APIKey
  • secretKey
  • facebookSDK

それでは、最初にParse.comサイトにログインしてfacebook連携の設定を行います。
<Parse.comサイトにてfacebook連携の設定方法>

【手順1】
Parse.comのサイトへログインし、画面中央にある「設定」リンクをクリックします。

   

【手順2】
「User authentication」リンクをクリックします。

   

【手順3】
事前準備で用意した「APIKey」を入力します。

   

【手順4】
事前準備で用意した「secretKey」を入力します。

   

facebook連携を行うための準備ができました。
これで、Parse.comサイトでのfacebook連携の設定は完了となります。

それでは、前回作成した「データストレージ機能を組み込んだプロジェクト」へfacebook連携を
実装するための準備として事前準備で用意しておいたfacebookSDKをプロジェクトに組み込みます。
<プロジェクトにfacebookのSDKを組み込む方法>

【手順1】
前回作成したプロジェクトのディレクトリを開き、事前準備で用意しておいたfacebookSDKを格納します。

   

【手順2】
前回作成したプロジェクトを開きます。

   

【手順3】
「Linked Frameworks and Libraries」の「+」ボタンをクリックします。

   

【手順4】
SDK追加画面が表示されますので、「Add Other…」ボタンをクリックします。

   

【手順5】
SDKを格納したディレクトリまで移動し、「FacebookSDK.framework」を選択して「Open」ボタンをクリックします。

   

【手順6】
「Linked Frameworks and Libraries」に「FacebookSDK.framework」が追加されていることを確認します。

   

これで、facebookSDKの組み込みは完了となります。
それでは、facebookと連携するアプリケーションを作成してみましょう。
<Facebookと連携するアプケーションを実装する方法>

【手順1】
前回作成したプロジェクトを開きます。

   

【手順2】
「testProject-Info.plist」を選択して、plistに下記を追加します。

  • FacebookAppID:事前準備で用意しておいた「APIKey」を指定する
  • FacebookDisplayName:事前準備で用意しておいた「アプリ名」を指定する
  • URL types:fb + 事前準備で用意しておいた「APIKey」を指定する
   

【手順3】
「AppDelegate.m」を選択して、「facebook」をインポートします。

■AppDelegate.m

//  AppDelegate.m
//  testProject

#import "AppDelegate.h"
#import <Parse/Parse.h>
//下記を追記
#import <FacebookSDK/FacebookSDK.h>

#define ParseApplicationID @"ApplicationIDを設定"
#define ParseClientKey     @"clientKeyを設定"

@implementation AppDelegate

【手順4】
「didFinishLaunchingWithOptions」メソッド内にfacebookの初期化処理を追加します。
※facebookの初期化処理を行うことでSDK内の各APIを使用することができます。

■AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    
    //parseを初期化する
    [Parse setApplicationId:ParseApplicationID clientKey:ParseClientKey];
    
//下記を追記
    //facebookを初期化する
    [PFFacebookUtils initializeFacebook];
    
    //プッシュ通知を有効とする
    [application registerForRemoteNotificationTypes:UIRemoteNotificationTypeAlert|
                                                    UIRemoteNotificationTypeBadge|
                                                    UIRemoteNotificationTypeSound];
    
    return YES;
}

【手順5】
アプリケーションがアクティブになった場合に呼ばれる「applicationDidBecomeActive」メソッド内に
セッションを設定する処理を追加します。

■AppDelegate.m

- (void)applicationDidBecomeActive:(UIApplication *)application
{
//下記を追記
    //アクティブ時にsessionを設定する
    [FBAppCall handleDidBecomeActiveWithSession:[PFFacebookUtils session]];
}

【手順6】
URLScheme受信時に呼ばれる「openURL」メソッドを追加します。
追加後、取得したURLスキームを設定する処理を追加します。

■AppDelegate.m

//下記を追記
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
    //urlスキームを設定する
    return [FBAppCall handleOpenURL:url
                  sourceApplication:sourceApplication
                        withSession:[PFFacebookUtils session]];
}

【手順7】
「Main.storyboard」を選択して、「ViewController」を表示します。

   

【手順8】
下記のボタンを作成し、各ボタンをタップした際に呼ばれるメソッドも作成しておきます。

  • facebook ログイン
  • facebook 投稿

※今回は、ボタンの作成及び、ボタンタップ時に呼ばれるメソッドの作成方法については割愛します。
メソッド名は下記とします。

facebook ログイン:facebookLoginClick
facebook 投稿:facebookPostClick

   

【手順9】
「ViewController.m」を選択して、「facebook」をインポートします。

■ ViewController.m

//  ViewController.m
//  testProject

#import "AppDelegate.h"
#import <Parse/Parse.h>
//下記を追記
#import <FacebookSDK/FacebookSDK.h>

【手順10】
「viewDidLoad」メソッド内にfacebookにログインしているかどうかの処理を追加します。
ログインしている場合は、ボタンを無効にする処理も追加します。

■ ViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
//下記を追記
    BOOL loginEnabled = YES;
    BOOL postEnabled  = YES;
    
    //ログインしている場合
    if( ( nil != [PFUser currentUser] ) &&
        ( YES == [PFFacebookUtils isLinkedWithUser:[PFUser currentUser]] ) )
    {
        //ログインフラグをNOにする
        loginEnabled = NO;
    }
    else
    {
        //投稿フラグをNOにする
        postEnabled  = NO;
    }
    
    //facebookログインボタンの有効/無効を設定する
    self.facebookLoginButton.enabled = loginEnabled;
    
    //facebookログインボタンの有効/無効を設定する
    self.facebookPostButton.enabled  = postEnabled;
}

【手順11】
「facebookLoginClick」メソッド内にfacebookへログインする処理を追加します。
※「facebookLoginClick」メソッド:「facebook ログイン」ボタンをタップした際に呼ばれるメソッドです。

ログイン時にアプリケーションに与える権限を設定することができます。
今回は、下記を設定します。

  • user_about_me:プロフィールの自己紹介セクションを取得できる
  • user_relationships:自分の交際ステータスを取得できる
  • user_birthday:生年月日を取得できる
  • user_location:居住地を取得できる
  • publish_stream:投稿やいいねができる

また、ログインに成功した場合は、「facebook 投稿」ボタンを有効にします。
※「facebook ログイン」ボタンは無効にします。

■ ViewController.m

- (IBAction)facebookLoginClick:(id)sender
{
//下記を追記
    //ログインする際に権限を設定する
    NSArray *permissionsArray = [NSArray arrayWithObjects:@"user_about_me",
                                                          @"user_relationships",
                                                          @"user_birthday",
                                                          @"user_location",
                                                          @"publish_stream",
                                                          nil];

    //facebookログイン画面へ遷移し、ログインを行う
    [PFFacebookUtils logInWithPermissions:permissionsArray
                                    block:^(PFUser *user, NSError *error) {
                                        if( nil != user )
                                        {
                                            NSLog( @"ログイン成功!!!" );

                                            //facebookログインボタンを無効にする
                                            self.facebookLoginButton.enabled = NO;
                                            
                                            //facebook投稿ボタンを有効にする
                                            self.facebookPostButton.enabled = YES;

                                        }
                                        else
                                        {
                                            if( nil != error )
                                            {
                                                NSLog( @"ログイン失敗!!!" );
                                            }
                                        }
                                    }];
}

【手順12】
「facebookPostClick」メソッド内にfacebookへ投稿する処理を追加します。
※「facebookPostClick」メソッド:「facebook 投稿」ボタンをタップした際に呼ばれるメソッドです。

投稿時に公開範囲を設定することができます。
今回は、「すべての友達」で設定します。

- (IBAction)facebookPostClick:(id)sender
{
//下記を追記
    NSError  *error      = nil;
    NSData   *data       = nil;
    NSString *jsonString = nil;

    //投稿する公開範囲の設定
    NSDictionary *listDictionary = [NSDictionary dictionaryWithObjectsAndKeys:@"CUSTOM", @"value",
                                                                              @"ALL_FRIENDS", @"friends",
                                                                              nil];

    //NSDataへ変換できる場合
    if( YES == [NSJSONSerialization isValidJSONObject:listDictionary] )
    {
        //公開範囲をjson文字列に変換する
        //NSDataへ変換する
        data = [NSJSONSerialization dataWithJSONObject:listDictionary options:0 error:&error];
        
        //文字列へ変換する
        jsonString = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
    }
    
    //リクエストメッセージを作成する
    NSDictionary *requestDictionary = [NSDictionary dictionaryWithObjectsAndKeys:@"テストメッセージ", @"message",
                                                                                 jsonString, @"privacy",
                                                                                 nil];
    //投稿する
    FBRequest *requestData = [FBRequest requestWithGraphPath:@"me/feed"
                                                  parameters:requestDictionary
                                                  HTTPMethod:@"POST"];
    
    //リクエストデータを作成するため、一旦リクエストする
    FBRequestConnection *connection = [requestData startWithCompletionHandler:^(FBRequestConnection *connection, id result, NSError *error) {
        NSLog( @"connection = %@", connection );
        NSLog( @"result = %@", result );
        NSLog( @"error = %@", error );
    }];
    
    //キャンセルする
    [connection cancel];
    
    //NSURLConnectionで送信するため、再度リクエスト情報を作成する
    NSMutableURLRequest *request = connection.urlRequest;
    
    //非同期にて通信を行う
    [NSURLConnection sendAsynchronousRequest:request
                                       queue:[NSOperationQueue mainQueue]
                           completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
                               NSLog( @"responseData = %@", [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding] );

                               UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
                                                                               message:@"投稿しました。"
                                                                              delegate:nil
                                                                     cancelButtonTitle:nil
                                                                     otherButtonTitles:@"OK", nil];
                               [alert show];
                           }];
}

これで、実装は完了となります。

それでは実際にアプリケーションを動かしてみましょう。
<作成したアプリケーションを動かす方法>

【手順1】
用意したiPhone5端末とPCを接続し、作成したアプリをインストールします。

   

【手順2】
作成したアプリケーションをタップして起動します。

   

【手順3】
「facebook ログイン」ボタンをタップします。

   

【手順4】

facebook画面の情報確認画面が表示されるので、「OK」ボタンをタップします。

   

【手順5】

facebook画面の投稿許可確認画面が表示されるので、「OK」ボタンをタップします。

   

【手順6】

「facebook 投稿」ボタンをタップします。

   

【手順7】

「OK」ボタンをタップします。

   

【手順8】

facebook画面を開き、投稿したメッセージが表示されていることを確認します。

   

お疲れ様でした。
Parse.comやfacebookSdKを使用することで、簡単にfacebookにログインし、投稿することができます。
それでは、SNS連携が行えたところで、今回は終了となります。

みなさんもアプリケーションを作成する際、SNS連携機能を取り入れてみてはどうでしょうか。
5回に渡って説明してきましたParse.comについて今回で終了となります。

最後にもう1度Parse.comの有効性や利便性について記載しておきます。

Parse.comとは、「BaaS」の1つです。
※「BaaS」は「Backend as a Service」の略称です。
アプリケーションのバックエンドサーバ側機能を肩代わりするクラウドサービスの総称となります。
Platform毎にSDKが提供されているので、プロジェクトにSDKを組み込むことで簡単に使用することができます。

予め下記の機能が提供されているので、バックエンドサーバ側の開発と運用をParse.comに任せることができます。
※バックエンドサーバ側の開発を短縮することで、アプケーション開発の期間短縮と開発コストの削減につながります。

  • アカウント管理機能
  • データストレージ機能
  • プッシュ通知機能
  • Analytics機能
  • SNS連携機能
  • ロケーション機能

Parse.comの登録プランは3種類あります。

  • Basic
  • Pro
  • Enterprise

■Basicプランについて
このプランは、無料です。
使用人数が限られている小規模なアプリケーションを作成する場合に適しています。
例えば、会社の出退勤を管理するアプリケーションです。

■Proプランについて
このプランは有料であり、毎月$199の支払いが発生します。
使用人数が限られている中規模なアプリケーションを作成する場合に適しています。
例えば、リアルタイムで行えるチャットアプリケーションです。

■Enterpriseプランについて
このプランは有料であり、別途お見積りを実施することによって月額が決定します。
使用人数の制限がなく、ストレージの容量も多大に必要な大規模なアプリケーションを作成する場合に適しています。
例えば、写真や動画が共有できるアプリケーションです。

Parse.comはバックエンドサーバ側の機能が充実しています。
作成するアプリケーションがバックエンドサーバ側と連携する必要がある場合は、
ぜひ、Parse.comをご検討してみてください!

それでは、今回でParse.comについてのご紹介は終了となります。
これまで、ご紹介してきた以外にもParse.comが提供している機能がありますので、
興味のある方はぜび、いろいろと試してみてください。

<次回の更新について>
次回は、cocos2d-xでParticleを使用する方法についてご紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*