エンジニア

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

投稿日：2015年8月24日 更新日：

こんにちは。今回ブログを担当する長屋です。
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のダウンロードと追加まで自動的に行えるので便利です。

採用情報

ワンダープラネットでは、一緒に働く仲間を幅広い職種で募集しております。

-エンジニア
-

© WonderPlanet Inc.