Embed Size (px)
Citation preview
Cocos2d-x(JS)ハンズオン #13
SNS対応(Twitter, Facebook)
Nobollel株式会社清水友晶
清水 友晶 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
http://line.me/S/sticker/1085672
もくじ
SNS対応について
SDKBOXの復習
SDKBOXとは
SDKBOXの導入方法
SNS対応してみよう
Twitterプラグイン
Facebookプラグイン
注意 今回紹介するSNS対応は、OpenURLやIntentを利用した簡易的なものではありません
正式なSDKを利用した本格的な対応です
シェア機能の利用だけを目的とした場合、簡易的に済ませてしまう方法をオススメします
今回紹介する過程で、簡易的な利用を行うことができるプラグインも紹介します
SNS対応について
SNS対応
Facebook Facebook SDKを利用すると、次のようなことができます。
Facebookログイン
Facebookの認証情報で利用者を認証
シェアと送信のダイアログ
アプリ内のコンテンツをFacebookにシェアできる
App Events
アプリケーション内のイベントをログ記録
Graph API
Graph APIの読み取りと書き込み
Fabric (Twitter) Fabricは、スマートフォンのアプリ開発者が体験するよくある課題に対応するプラットフォーム
安定性を高める
利用者を増やす
収益を得る
ユーザの本人確認
Twitter機能
Twitterを使った本人確認
Twitter上の会話を取り込む
SDKBOXの復習
最新版: SDKBOX v2.1.3
対応プラットフォーム: iOS, Android
プラグイン:
アプリ内課金
広告
解析
ストア
ソーシャル
動画
SDKBOXプラグイン
シーケンス図
SDKBOXの導入 コマンドラインによる方法
Cocosを利用する方法
Pythonインストール SDKBOXのインストールにはPythonが必要
ただしCocos2d-xのインストールにもPythonが必要であるため、正常にインストールが完了していれば、その途中でPythonもインストールしたはず
Python v3.x
https://www.python.org/
SDKBOXインストール SDKBOXプラグインのページにあるリンクから
SDKBOXのユーザ登録を行う
python -c "import urllib; s = urllib.urlopen('https://raw.githubusercontent.com/sdkbox-doc/en/master/install/install.py').read(); exec s"
SDKBOX動作確認 SDKBOXプラグイン一覧取得
$ sdkbox list
SNS対応してみよう
プロジェクト作成 Cocos2d-xのプロジェクトを作成します
$ cocos new SNSTest –l js
Twitter用プラグイン 作成したプロジェクトに移動して、shareプラグインを適用する
$ cd SNSTest
$ sdkbox import share
Facebook用プラグイン 続けてfacebookプラグインを適用する
$ sdkbox import facebook
Twitter対応 TwitterでAPI Key, API Secretを取得する
Twitterでアプリの設定を行うhttps://apps.twitter.com/
Twitter対応 res/sdkbox.jsonにTwitterのAPI Key, API Secretを設定する
iOSとAndroidに分かれているので注意もちろん共通でも問題ありません
"Twitter": {
"params": {
"secret": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"key": "XXXXXXXXXXXXXXXXXXXXXXXXX"
}
},
Twitter対応（iOS） App Transport Security(ATS)を無効にする
info.plistに下記を追加する
注意: ATSは2016年末には必須になります今後SDKBOXプラグインのアップデートにより対応されることが予想されます
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Twitter対応（Android） fabricでAPI Keyを取得する
https://fabric.io/settings/organizations
Twitter対応（Android） AndroidManifest.xmlを編集する
SNSTest/frameworks/runtime-src/proj.android-studio/app/AndroidManifest.xml
<meta-data android:name="io.fabric.ApiKey"
android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
プラグイン初期化 利用前にプラグインの初期化が必要
例: 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();
ツイート画面表示 ボタンが押された時の処理
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);
}
実行画面
Facebook対応（iOS） AppController.mmの編集
33行目付近 Headerのインクルード
81行目付近 didFinishLaunchingWithOptions関数内
#import <FBSDKCoreKit/FBSDKCoreKit.h>
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
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];
}
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>
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>
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" />
Facebook対応 sdkbox_config.jsonの編集
{
"android": {
"Facebook": {
"debug": false,
"app_id": “xxxxxxxxxxxxxxx"
},
},
"ios": {
"Facebook": {
"debug": true,
"url_scheme_suffix": "",
"app_id": “xxxxxxxxxxxxxxx"
},
}
}
プラグイン初期化 利用前にプラグインの初期化が必要
例: 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();
}
});
投稿画面表示 ボタンが押された時の処理
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);
}
投稿画面表示
作業はここまで
参考になるサイト
Cocos公式Wikihttp://www.cocos2d-x.org/wiki/Cocos2d-JS
Cocos2d-JS APIリファレンスhttp://cocos2d-x.org/wiki/Reference
Qiita（tag: cocos2d-js）https://qiita.com
おわり
ありがとうございました
