WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

Cocos2d-xのSDKBOXを利用してFacebook連携をしてみる

こんにちは。今回ブログを担当する長屋です。
SDKBOXはCocos2d-xのプロジェクトに対してサポートしているSDKを簡単に追加できるプラグインです。
今回はSDKBOX内のFacebookプラグインを利用してFacebook連携をしてみたいと思います。

SDKBOX
- http://www.cocos2d-x.org/sdkbox

Cocos2d-x
- http://jp.cocos.com/products/download/

※Cocos2d-x v3.7.1のプロジェクトを使用しています。

SDKBOXのインストール
Facebook Plugin内のAuto Installerのファイルをダウンロード
ダウンロード解凍後、以下のコマンドでsdkboxファイルをコピーします

cp /・・・解凍先パス・・・/sdkbox_installer/sdkbox /usr/local/bin

Facebookプラグインをインストール
プラグインを追加したいCocos2d-xプロジェクトのディレクトリをターミナルで開き以下のコマンドを入力します。

sdkbox import facebook

インストールに成功すれば Installation Successful :) と表示されます。

image01

他のサービスを追加したい場合はFacebookの部分を別サービスに変えてください。

sdkbox import XXXX

コレでプラグインのインストールは完了です。お手軽です。
試しにiOSのプロジェクトを開いてみると必要なファイルがコピーされプロジェクトに追加されています。

image02 image03

FacebookプラグインのAPIを叩いてみる (下準備編)

1.Facebook Developersにログイン後、アプリのバンドルIDを登録します。
※SDKのダウンロード及び追加は必要有りません。

2.登録後、以下ファイルに項目を追加します。

プロジェク名/proj.ios_mac/ios/Info.plist

image04

3.「AppController.mm」を変更します。

#import <FBSDKCoreKit/FBSDKCoreKit.h>  
  
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
  
    ~~ 省略 ~~  
  
    //return YES;  
  
    //戻り値を変更  
    return [[FBSDKApplicationDelegate sharedInstance] application:application  
                                    didFinishLaunchingWithOptions:launchOptions];  
}  
  
- (void)applicationDidBecomeActive:(UIApplication *)application {  
    /*  
     Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.  
     */  
    //We don't need to call this method any more. It will interupt user defined game pause & resume logic  
    /* cocos2d::Director::getInstance()->resume(); */  
  
    //追記  
    [FBSDKAppEvents activateApp];  
}  
  
//メソッドを追加  
- (BOOL)application:(UIApplication *)application  
            openURL:(NSURL *)url  
  sourceApplication:(NSString *)sourceApplication  
         annotation:(id)annotation {  
    return [[FBSDKApplicationDelegate sharedInstance] application:application  
                                                          openURL:url  
                                                sourceApplication:sourceApplication  
                                                       annotation:annotation];  
}  

4.プラグインの初期化処理を追加します。
問題がなければプラグイン追加時に初期化処理が「AppDelegate::applicationDidFinishLaunching」内に自動的に追加されます。

bool AppDelegate::applicationDidFinishLaunching()  
{  
  
    //自動的に追記される  
    sdkbox::PluginFacebook::init();  
  
}  

FacebookプラグインのAPIを叩いてみる

ログイン&ログアウト処理です。

    //ログイン処理  
    sdkbox::PluginFacebook::login();

    //ログアウト処理  
    sdkbox::PluginFacebook::logout();

Facebookでシェアしたい場合は「FBShareInfo」オブジェクトを作成して以下のメソッド叩きます。

    sdkbox::FBShareInfo shareInfo;  
  
    //共有タイプ  
    shareInfo.type = sdkbox::FBShareType::FB_LINK;  
  
    //タイトル  
    shareInfo.title = "SDK_BOX";  
  
    //メインテキスト  
    shareInfo.text = "SDK_BOXてすとだよ!";  
  
    //共有したいURL  
    shareInfo.link = "URL";  
  
    //表示したい画像のURK  
    shareInfo.image = "画像URL";  
  
    //---そのまま共有---  
    sdkbox::PluginFacebook::share(const FBShareInfo & info);  
  
    //---ダイアログをだして共有---  
    sdkbox::PluginFacebook::dialog(const FBShareInfo & info);

Facebookからの通知は「sdkbox::FacebookListener」を継承してリスナーを設定してあげることで受け取れます。

    //リスナー設定  
    sdkbox::PluginFacebook::setListener(this);  

ボタンを押すとログインとログアウト、シェアができるものを作ってみました。

bool HelloWorld::init()  
{  
    //////////////////////////////  
    // 1. super init first  
    if ( !Layer::init() )  
    {  
        return false;  
    }  
  
    Size visibleSize = Director::getInstance()->getVisibleSize();  
    Vec2 origin = Director::getInstance()->getVisibleOrigin();  
  
    //リスナー設定  
    sdkbox::PluginFacebook::setListener(this);  
  
    //ログイン用ボタン作成  
    auto loginItem = MenuItemImage::create(  
                                           "login.png",  
                                           "login_tap.png",  
                                           [=](Ref*){  
  
                                               //FBログイン処理  
                                               //ログイン成功後、権限設定を行う  
                                               sdkbox::PluginFacebook::login();  
  
                                           });  
  
    loginItem->setPosition(Vec2(visibleSize.width / 2 - (150) ,  
                                visibleSize.height * 0.2 + loginItem->getContentSize().height/2));  
  
    //ログアウトボタン作成  
    auto logoutItem = MenuItemImage::create(  
                                           "logout.png",  
                                           "logout_tap.png",  
                                           [=](Ref*){  
  
                                               //FBログアウト処理  
                                               sdkbox::PluginFacebook::logout();  
  
                                           });  
  
    logoutItem->setPosition(Vec2(visibleSize.width / 2 + (150) ,  
                                 visibleSize.height * 0.2 + loginItem->getContentSize().height/2));  
  
    auto shareItem = MenuItemImage::create(  
                                            "share.png",  
                                            "share.png",  
                                            [=](Ref*) {  
  
                                               //共有オブジェクト作成  
                                               sdkbox::FBShareInfo shareInfo;  
                                               shareInfo.type = sdkbox::FBShareType::FB_LINK;  
                                               shareInfo.title = "SDK_BOX";  
                                               shareInfo.text = "SDK_BOXてすとだよ!";  
                                               shareInfo.link = "共有したいリンク";  
                                               shareInfo.image = "画像リンク";  
  
                                               sdkbox::PluginFacebook::dialog(shareInfo);  
  
                                            });  
  
    shareItem->setPosition(Vec2(visibleSize.width / 2,  
                                visibleSize.height * 0.2 + shareItem->getContentSize().height/2));  
  
    auto menu = Menu::create(loginItem, logoutItem,shareItem,NULL);  
    menu->setPosition(Vec2::ZERO);  
    this->addChild(menu, 1);  
  
    return true;                     
}  
  
//  
// FBからのイベント通知  
//  
void HelloWorld::onLogin(bool isLogin, const std::string& msg)  
{  
    CCLOG("ログイン %d, %s",(int)isLogin,msg.c_str());  
      
    //ログイン成功後、パーミッションを設定する  
    sdkbox::PluginFacebook::requestPublishPermissions({sdkbox::FB_PERM_PUBLISH_POST});  
      
}  
  
void HelloWorld::onSharedSuccess(const std::string& message)  
{  
    CCLOG("シェア成功");  
}  
  
void HelloWorld::onSharedFailed(const std::string& message)  
{  
    CCLOG("シェア失敗 msg %s",message.c_str());  
}  
  
void HelloWorld::onSharedCancel()  
{  
    CCLOG("シェア中断");  
}  
  
void HelloWorld::onAPI(const std::string& key, const std::string& jsonData)  
{  
    CCLOG("onAPI key %s jsonData %s",key.c_str(),jsonData.c_str());  
}  
  
void HelloWorld::onPermission(bool isLogin, const std::string& msg)  
{  
    CCLOG("onPermission isLogin %d msd %s",(int)isLogin,msg.c_str());  
}  
  
void HelloWorld::onFetchFriends(bool ok, const std::string& msg)  
{  
    CCLOG("onFetchFriends ok %d msd %s",(int)ok,msg.c_str());  
}   

実行結果
image05

ログイン後共有ボタンをタップ

image06image07

かなりシンプルなコードの追加でFacebookを利用することができました。
他のサービスもSDKのダウンロードと追加まで自動的に行えるので便利です。