近年のアプリはSNS対応が必須となっており、iOS, Androidにはツイートやシェアに必要な機能が備わっています。また本格的に導入するには、専用のSDKを利用する必要がありますが、何もない状態から導入するには非常に骨の折れる作業です。そこで今回はこのSNS対応の方法について紹介しました。

1. Cocos2d-x(JS) ハンズオン #13
SNS対応(Twitter, Facebook)
Nobollel株式会社 清水友晶

2. 清水 友晶
 Nobollel株式会社 CTO
チームビルディング
スマホアプリ開発
Cocos2d-xサポート
TECH.C.非常勤講師
 プライベートでも
Cocos2d-xに関するゲーム開発
講演活動
執筆活動
 マイブーム: Ingress
 チラ裏開発メモ: http://tks2.net/memo
 SlideShare: http://www.slideshare.net/doraemonsss
 Facebook: http://www.facebook.com/doraemonsss

4. http://line.me/S/sticker/1085672

5. もくじ
 SNS対応について
 SDKBOXの復習
 SDKBOXとは
 SDKBOXの導入方法
 SNS対応してみよう
 Twitterプラグイン
 Facebookプラグイン

6. 注意
 今回紹介するSNS対応は、OpenURLやIntentを利用し
た簡易的なものではありません
 正式なSDKを利用した本格的な対応です
 シェア機能の利用だけを目的とした場合、簡易的に済
ませてしまう方法をオススメします
 今回紹介する過程で、簡易的な利用を行うことができ
るプラグインも紹介します

7. SNS対応について

8. SNS対応

9. Facebook
 Facebook SDKを利用すると、次のようなことができ
ます。
 Facebookログイン
 Facebookの認証情報で利用者を認証
 シェアと送信のダイアログ
 アプリ内のコンテンツをFacebookにシェアできる
 App Events
 アプリケーション内のイベントをログ記録
 Graph API
 Graph APIの読み取りと書き込み

10. Fabric (Twitter)
 Fabricは、スマートフォンのアプリ開発者が体験する
よくある課題に対応するプラットフォーム
 安定性を高める
 利用者を増やす
 収益を得る
 ユーザの本人確認
 Twitter機能
 Twitterを使った本人確認
 Twitter上の会話を取り込む

11. SDKBOXの復習

12. SDKBOXサイト
http://cocos2d-x.org/sdkbox/

13. SDKBOXサイト
http://sdkbox.com

14.  最新版: SDKBOX v2.1.3
 対応プラットフォーム: iOS, Android
 プラグイン:
 アプリ内課金
 広告
 解析
 ストア
 ソーシャル
 動画

15. SDKBOXプラグイン

16. シーケンス図

17. SDKBOXの導入
 コマンドラインによる方法
 Cocosを利用する方法

18. Pythonインストール
 SDKBOXのインストールにはPythonが必要
 ただしCocos2d-xのインストールにもPythonが必要であ
るため、正常にインストールが完了していれば、その途
中でPythonもインストールしたはず
 Python v3.x
 https://www.python.org/

19. SDKBOXインストール
 SDKBOXプラグインのページにあるリンクから
SDKBOXのユーザ登録を行う
python -c "import urllib; s = urllib.urlopen('https://raw.githubusercontent.com/sdkbox-doc/en/master/install/install.py').read(); exec s"

20. SDKBOX動作確認
 SDKBOXプラグイン一覧取得
$ sdkbox list

21. SNS対応してみよう

22. プロジェクト作成
 Cocos2d-xのプロジェクトを作成します
$ cocos new SNSTest –l js

23. Twitter用プラグイン
 作成したプロジェクトに移動して、shareプラグイン
を適用する
$ cd SNSTest
$ sdkbox import share

24. Facebook用プラグイン
 続けてfacebookプラグインを適用する
$ sdkbox import facebook

25. Twitter対応
 TwitterでAPI Key, API Secretを取得する
 Twitterでアプリの設定を行う
https://apps.twitter.com/

26. Twitter対応
 res/sdkbox.jsonにTwitterのAPI Key, API Secretを
設定する
 iOSとAndroidに分かれているので注意
もちろん共通でも問題ありません
"Twitter": {
"params": {
"secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"key": "XXXXXXXXXXXXXXXXXXXXXXXXX"
}
},

27. Twitter対応（iOS）
 App Transport Security(ATS)を無効にする
 info.plistに下記を追加する
 注意: ATSは2016年末には必須になります
今後SDKBOXプラグインのアップデートにより
対応されることが予想されます
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

28. Twitter対応（Android）
 fabricでAPI Keyを取得する
 https://fabric.io/settings/organizations

29. Twitter対応（Android）
 AndroidManifest.xmlを編集する
 SNSTest/frameworks/runtime-src/proj.android-
studio/app/AndroidManifest.xml
<meta-data android:name="io.fabric.ApiKey"
android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

30. プラグイン初期化
 利用前にプラグインの初期化が必要
 例: app.js ctor関数で初期化を行う
//ボタン
var item = new cc.MenuItemFont("Button", this.onTouchButton, this);
var menu = new cc.Menu(item);
menu.setPosition(size.width / 2, size.height / 2);
this.addChild(menu);
//プラグイン初期化
sdkbox.PluginShare.init();

31. ツイート画面表示
 ボタンが押された時の処理
onTouchButton:function (sender) {
var shareInfo = {};
shareInfo.text = "メッセージ";
shareInfo.title = "タイトル";
//shareInfo.image = "path/to/image";
shareInfo.link = "http://tks2.net";
shareInfo.showDialog = true; //ダイアログの表示
shareInfo.platform = sdkbox.SocialPlatform.Platform_Twitter;
sdkbox.PluginShare.share(shareInfo);
}

32. 実行画面

33. Facebook対応（iOS）
 AppController.mmの編集
 33行目付近 Headerのインクルード
 81行目付近 didFinishLaunchingWithOptions関数内
#import <FBSDKCoreKit/FBSDKCoreKit.h>
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];

34. Facebook対応（iOS）
 AppController.mmの編集
 107行目付近 applicationDidBecomeActive関数内
 132行目付近 openURL関数追加
[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];
}

35. Facebook対応（iOS）
 info.plistの編集
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>xxxxxxxxxxxxxxx</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>xxxxxxxxxxxxxxx</string>
<key>FacebookDisplayName</key>
<string>SNSTest</string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

36. Facebook対応（Android）
 res/values/strings.xmlの編集
<?xml version='1.0' encoding='UTF-8'?>
<resources>
<string name="app_name">SNSTest</string>
<string name="facebook_app_id">xxxxxxxxxxxxxxx</string>
</resources>

37. Facebook対応（Android）
 AndroidManifest.xmlの編集
<provider android:authorities="com.facebook.app.FacebookContentProvider_replace_with_your_app_id_"
android:exported="true" android:name="com.facebook.FacebookContentProvider" />
<provider android:authorities="com.facebook.app.FacebookContentProviderxxxxxxxxxxxxxxx"
android:exported="true" android:name="com.facebook.FacebookContentProvider" />

38. Facebook対応
 sdkbox_config.jsonの編集
{
"android": {
"Facebook": {
"debug": false,
"app_id": “xxxxxxxxxxxxxxx"
},
},
"ios": {
"Facebook": {
"debug": true,
"url_scheme_suffix": "",
"app_id": “xxxxxxxxxxxxxxx"
},
}
}

39. プラグイン初期化
 利用前にプラグインの初期化が必要
 例: app.js ctor関数で初期化を行う
//ボタン
var item = new cc.MenuItemFont("Button", this.onTouchButton, this);
var menu = new cc.Menu(item);
menu.setPosition(size.width / 2, size.height / 2);
this.addChild(menu);
//プラグイン初期化
sdkbox.PluginFacebook.init();
sdkbox.PluginFacebook.setListener({
onLogin: function(isLogin, msg) {
if (isLogin) {
sdkbox.PluginFacebook.requestPublishPermissions(["publish_actions"]);
}
},
onAPI: function(tag, data) {},
onSharedSuccess: function(data) {},
onSharedFailed: function(data) {},
onSharedCancel: function() {},
onPermission: function(isLogin, msg) {
this.share();
}
});

40. 投稿画面表示
 ボタンが押された時の処理
onTouchButton:function (sender) {
if (sdkbox.PluginFacebook.isLoggedIn()) {
this.share();
} else {
sdkbox.PluginFacebook.login();
}
},
share: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);
}

41. 投稿画面表示

42. 作業はここまで

43. 参考になるサイト
 Cocos公式Wiki
http://www.cocos2d-
x.org/wiki/Cocos2d-JS
 Cocos2d-JS APIリファレンス
http://cocos2d-x.org/wiki/Reference
 Qiita
（tag: cocos2d-js）
https://qiita.com

44. おわり
 ありがとうございました