アプリを収益化する上で、広告は有効な手段の1つです。
広告サービスにはいくつかありますが、Googleが提供するAdMobが有名ですので、こちらをCocos2d-xで開発したアプリに組み込んでみました。
環境は以下の通りです。
- Cocos2d-x 3.5
- (iOS) Google Mobile Ads SDK 7.1.0
- (Android) Google Play services rev.23
AdMobに登録する
https://www.google.co.jp/ads/admob/
AdMobのページへ行き、「AdMobに申し込む」から登録していく。
Googleアカウントを用意して、そのアカウントで AdSense, AdWords にも登録する必要がある。
この画面で同時に作成できるので、規約に同意しAdMobの登録を進めていく。
広告を作成する
広告ユニットを作成する。
管理画面で「新しいアプリを収益化」ボタンを押下。
アプリを手動で追加を選択し、アプリ名とプラットフォームを選択する。
広告タイプを設定して保存をすると広告ユニットが作成できる。
クロスプラットフォームなら、別のプラットフォームについても同じように登録する。
(ここではiOSとAndroid二つ作成)
作成されたそれぞれの広告ユニットIDは後で必要になる。
iOSへの組み込み
https://developers.google.com/mobile-ads-sdk/download?hl=ja
iOS版の googlemobileadssdkios.zip をダウンロードする。
適当な場所へ解凍する。(自分の場合は /Users/ユーザ名/Documents/cocos2d-x/GoogleMobileAdsSdkiOS-7.1.0 )
Xcodeでプロジェクトを開き、SDKをインポートする。
プロジェクトで Add Files to … を選択。
解凍したAdMob SDKのフォルダを選択し、
「Copy items if needed」にチェック、「Create groups」を選択して、Addする。
プロジェクトを選んで、[General]タブのLinked Frameworks and Libraries から、AdMobに必要なライブラリを追加する。
- AdSupport
- AudioToolbox
- AVFoundation
- CoreMedia
- CoreGraphics
- CoreTelephony
- EventKit
- EventKitUI
- MessageUI
- StoreKit
- SystemConfiguration
cocos2dライブラリ側のプロジェクトにある ios – AppController.h, AppContoller.mm にコードを追加する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#import <UIKit/UIKit.h> @class RootViewController; extern "C" { #import <GoogleMobileAds/GoogleMobileAds.h> } @interface AppController : NSObject <UIApplicationDelegate> { UIWindow *window; GADBannerView *bannerView_; // 追加 } @property(nonatomic, readonly) RootViewController* viewController; @end |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 〜省略 app->run(); bannerView_ = [[GADBannerView alloc]initWithAdSize:kGADAdSizeSmartBannerPortrait]; bannerView_.adUnitID = @"ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxx"; // 広告ユニットID bannerView_.rootViewController = self.viewController; [self.viewController.view addSubview:bannerView_]; // 一番下に広告を表示 bannerView_.center = CGPointMake( self.viewController.view.center.x, self.viewController.view.frame.size.height-bannerView_.frame.size.height/2 ); GADRequest *request = [GADRequest request]; // テストデバイス登録 request.testDevices = [NSArray arrayWithObjects: kGADSimulatorID, // エミュレータ @"テスト用端末のデバイスID", nil]; [bannerView_ loadRequest:request]; return YES; |
これで実機で確認すると、画面下部に広告が出ていることを確認できる。
なお、SDK 7.0以降では testDevicesにエミュレータIDを指定しなくても、エミュレータ上では広告は表示されないようになっている。（2015/06/26修正 7.2.1以降ではエミュレータIDを指定する仕様になった。testDevicesにkGADSimulatorIDを追加することで、エミュレータ内でテスト広告になる。）
testDevicesにデバイスIDを登録すると、その端末ではテスト用広告が表示されるようになる。デバイスIDは、実機デバッグ時にコンソールに表示される。
…… が、
<Google> Advertising tracking may be disabled. To get test ads on this device, enable advertising tracking.
と出ている場合は、端末側の設定で広告制限がされているため、確認ができなくなっている。
実機端末にて、設定 > プライバシー > 広告 > 追跡型広告を制限
をOFFにすることで、デバイスIDをコンソールで確認することができる。
<Google> To get test ads on this device, call: request.testDevices = @[ @”xxxxxxxxxxxxx” ];
うまく設定できると以下のようにテスト用バナーが表示される。
開発時に本番広告をクリックしたりするとポリシー違反となるので、できるだけテスト用バナーが表示されるように設定をしておくのが無難。
Androidへの組み込み
eclipseのメニューから、Window > Android SDK Manager を開く。
Extras にある Google Play services がインストールされていなければ、インストールする。
(Installedになっていたらインストール済みなのでそのまま次へ)
インストールした Google Play services をプロジェクトに追加する。
File > New > Project… > Android Project from Existing Code から
C:\Android\android-sdk\extras\google\google_play_services\libproject
(Android SDKの配置先がC:\Android\android-sdkの場合)
を選択する。
登録時には、Copy projects into workspace にチェックを入れておく。
自分のプロジェクト(ここではSampleGame)を右クリックして、Properties を開く。
Android の Library に、登録した google-play-services_lib をAdd する。
プロジェクトのAndroidManifest.xmlを開き、AndroidManifest.xmlタブより編集を行う。
|
1 2 3 4 |
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/> <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"/> |
|
1 2 |
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> |
プロジェクトのsrc内にある AppActivity.java にコードを実装する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
package org.cocos2dx.cpp; import org.cocos2dx.lib.Cocos2dxActivity; import android.graphics.Color; import android.os.Bundle; import android.view.Gravity; import android.view.WindowManager; import android.widget.FrameLayout; import com.google.android.gms.ads.*; public class AppActivity extends Cocos2dxActivity { private AdView _adView; private final String AD_UNIT_ID = "ca-app-pub-xxxxxxxxxxxxxx/xxxxxxxx"; // 広告ユニットID @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); FrameLayout.LayoutParams adParams = new FrameLayout.LayoutParams( FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT); adParams.gravity = (Gravity.BOTTOM | Gravity.CENTER); // 最下部中央へ表示 _adView = new AdView(this); _adView.setAdSize(AdSize.BANNER); _adView.setAdUnitId(AD_UNIT_ID); AdRequest adRequest = new AdRequest.Builder() .addTestDevice(AdRequest.DEVICE_ID_EMULATOR) // エミュレータはテストバナーを表示する .addTestDevice("Test Device ID") // 引数に指定したデバイスIDの場合はテストバナーを表示する .build(); _adView.loadAd(adRequest); _adView.setBackgroundColor(Color.TRANSPARENT); addContentView(_adView, adParams); } @Override protected void onPause() { if (_adView != null) { _adView.pause(); } super.onPause(); } @Override protected void onResume() { super.onResume(); if (_adView != null) { _adView.resume(); } } @Override protected void onDestroy() { _adView.destroy(); super.onDestroy(); } } |
うまくいくと、テスト広告が表示される。
参考：
https://developers.google.com/mobile-ads-sdk/docs/admob/ios/quick-start
http://ladywendy.com/lab/cocos2d-x-v3/189.html
http://ladywendy.com/lab/cocos2d-x-v3/190.html
http://nobuo-create.net/admob/
