Cocos2d-x(JS) + SDKBOXで簡単Facebook連携

#はじめに
Cocos2d-x用にSDKBOXというライブラリが提供されています。
SDKBOXを使うことで、Cocos2d-xを使ううえで、ネイティブ連携で苦労していた
課金まわりや、広告、分析(Analytics)といった機能を簡単に構築することができるようになりました。
http://www.cocos2d-x.org/sdkbox

#JSでも使える? Web版では?
今回試したかったのはJSとの連携。C++のdocumentが多いようなのですが、
"cocos2d-x that you are using, C++ or Javascript or Lua, SDKBOX will... "
とあるので、JavaScriptでも問題なく使えます。
ただし、Web版に書き出した場合には使用できません。(iOSやAndroidアプリとして書き出した場合に使用できる）

#version
Cocos2d-x の2系、3系ともに使えるようですが、今回使用したのは、3.6を利用しました。

#ログイン〜シェアまでの流れ

##1)新しいアプリを作成する(今回はjsで作ります）
>cocos new sdkbox_demo -p com.your_company.mygame -l js -d /Users/user_name/workspace
cd sdkbox_demo/

##2) SDKBOXをインストールする
>python -c "import urllib; s = urllib.urlopen('https://raw.githubusercontent.com/sdkbox-doc/en/master/install/install.py').read(); exec s"

##3)facebook-apiをインストール
cd (自分のワークスペース)
sdkbox import facebook

##4)facebookにログインした状態で、下記にアクセスする
https://developers.facebook.com/apps/

##5)add Platformで iOS を追加し、バンドルIDを入力する
(ストアIDは空欄で大丈夫そう)
![スクリーンショット 2016-01-12 13.56.48.png](https://qiita-image-store.s3.amazonaws.com/0/43766/124bdf6f-5d8d-0bd4-7e10-9d48bb20ead8.png)

(BundleIDの確認/変更はXCodeから..)
![スクリーンショット 2016-01-12 14.12.47.png](https://qiita-image-store.s3.amazonaws.com/0/43766/8725afdf-b6fd-eb9a-d72e-79868077bb3e.png)


##6) app.jsでsdkboxを読み込み、設定する

        sdkbox.PluginFacebook.init();
        sdkbox.PluginFacebook.setListener({
            onLogin: function(isLogin, msg) {
              if(isLogin){
                cc.log("login successful");
              }
              else {
                cc.log("login failed");
              }
            },
            onAPI: function(tag, data) {
            },
            onSharedSuccess: function(data) {
            },
            onSharedFailed: function(data) {
            },
            onSharedCancel: function() {
            },
            onPermission: function(isLogin, msg) {
              if(isLogin) {
                cc.log("request permission successful");
              }
              else {
                cc.log("request permission failed");
              }
            }
        });


##7 buttonを押下した時にloginやshareが発動するようにする

	var loginItem = new cc.MenuItemImage(
	    res.CloseNormal_png,
	    res.CloseSelected_png,
	    function () {
	        sdkbox.PluginFacebook.login();
	...

	var shareItem = new cc.MenuItemImage(
	    res.CloseNormal_png,
	    res.CloseSelected_png,
	    function () {
			var info = new Object();
			info.type  = "link";
			info.link  = "http://www.cocos2d-x.org";
			info.title = "cocos2d-x";
			info.text  = "Best Game Engine";
			info.image = "http://cocos2d-x.org/images/logo.png";
			sdkbox.PluginFacebook.dialog(info);
	...


##8.info.plistにAppIDを入力する
(AppIDはFacebookのappページに記載されている）
	vim /frameworks/runtime-src/proj.ios_mac/ios/Info.plist

	<string>1.0</string>....

	<key>FacebookAppID</key>
	<string>150000000000000</string>
	<key>FacebookDisplayName</key>
	<string>test</string>
	<key>LSApplicationQueriesSchemes</key>

	...<key>LSRequiresIPhoneOS</key>
	<true/>


##9 .xcodeproj　をXCodeで開き、シュミレーターで実行する
/hoge/frameworks/runtime-src/proj.ios_mac/hoge.xcodeproj

##10 シェアする
シュミレーターからシェアしてみると..
![スクリーンショット 2016-01-12 14.09.53.png](https://qiita-image-store.s3.amazonaws.com/0/43766/fdb5b935-0362-d201-da82-af3b9c9d9c33.png)

このようにShareされました。
![screen.png](https://qiita-image-store.s3.amazonaws.com/0/43766/20a1e559-c0db-79b3-741f-b6f249faf8d7.png)

#最後に
IAPやADなども同じように簡単に実装できるらしいです。
これまでネイティブ連携はなかなか大変だったので、このように楽に実装できるようになると使い方広がりそうです。

#参考
インストール
http://docs.sdkbox.com/en/installer/#sdkbox-installing-sdkbox-plugins-using-the-installer
Facebook使い方
http://docs.sdkbox.com/en/plugins/facebook/v3-js/