Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cocos2d-x(JS) ハンズオン #13「SNS対応(Twitter, Facebook)」

745 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocos2d-x(JS) ハンズオン #13「SNS対応(Twitter, Facebook)」

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

×