cocos2d-x で AppBank Network の無料アプリ用の広告を実装する方法(iOS, Android)
AppBank アプリ担当のラクイシです。
今回は cocos2d-x で作成したアプリ(iOS 及び Android)に AppBank Network を実装する方法を紹介します。
AppBank Network を実装するために必要な Nend SDK は、iOS と Android 向けの2種類を利用します。こちらの管理画面から取得できます。
(AppBank Network は、AppBank が提供する広告ネットワークです → AppBank Network)
実装の流れ
NendSDK は、iOS からは Objective-C、Android からは Java で記述する必要があります。iOS からは、広告を表示するメソッドを Objective-C で AppController.h, .mm に記述。Android からは、Java で AdViewProject.java に記述します。
そして、それらのメソッドを呼ぶためのクラス AdViewManager を作成します。AdViewManager のヘッダーファイル(AdViewManager.h)は共通ですが、iOS 向けに AdViewManager.mm を作成、Android 向けに AdViewManager.cpp を作成します。
*.mm 拡張子は、Objective-C / C++ を混在して実装できるので、C++ で記述される cocos2d-x からビルド可能です。
以上のように、iOS における実装は簡単ですが、Android では、少し遠回りな実装をする必要があります。Android では、C++ と Java を連携するために、JNI を使用します。JNI を使用することで、C++ で記述される AdViewManager.cpp から .java ファイルに記述されたメソッドを呼ぶことができます。
実装環境・使用した SDK・プロジェクト名
- Xcode v4.6.3
- Android Developer Tools v22.0.5-757759
- NendSDK iOS v2.1.0
- NendSDK Android v2.1.0
cocos2d-x のプロジェクト名は【AdViewProject】と名付けました。また、プロジェクトのパッケージ名は、【net.appbank.adviewproject】と指定しました。以降、プロジェクト名・パッケージ名について、自身で設定した値に読み替えをお願いします。
※ 広告を表示するのに指定している apiKey 及び spotID はテスト用の値を使用しています。アプリをリリースする際には、自身で取得された値に変更する必要があります
※ Nend SDK のバージョンによっては、必要なフレームワーク・ファイルが変わることがあります。SDK に付属しているマニュアルをご確認ください
各種ファイルを作成&配置する
AppBankNetwork の管理画面より、Nend SDK iOS, Nend SDK Android を取得します。iOS は、取得したファイルの中にある libNendAd.a, NADView.h を使用します。Android は、nendSDK-2.1.0.jar を使用します。
cocos2d-x で作成したプロジェクトにある Classes フォルダに、以下のようにフォルダ&ファイルを配置していきます。
Classes
┣ AdViewManager.h(iOS, Android 共通)
┣ iOS(フォルダ)
┃┣ AdViewManager.mm
┃┣ libNendAd.a
┃┗ NADView.h
┗ Android(フォルダ)
┗AdViewManager.cpp
また、【proj.android】以下にある【libs】フォルダに、nendSDK-2.1.0.jar を配置します。
AdViewManager.h の実装(iOS・Android 共通)
広告表示を管理する【AdViewManager.h】を以下のように記述しました。広告を表示する showAdView() メソッドを宣言しています。
// AdViewManager.h
#ifndef AdViewProject_AdViewManager_h
#define AdViewProject_AdViewManager_h
class AdViewManager
{
public:
static void showAdView();
};
#endif
iOS アプリに実装する
iOS アプリに実装する方法を紹介します。以下にある iOS 向けのプロジェクトを Xcode で開きます。
AdViewProject/proj.ios/AdViewProject.xcodeproj
ヘッダーファイル/メソッドファイルを追加
以下の4つのファイルをプロジェクトに含めます。
- AdViewManager.h
- AdViewManager.mm
- libNendAd.a
- NADView.h
フレームワークの追加
Nend SDK を実装する上で必要なフレームワークを追加します。
- AdSupport.framework
- Security.framework
AdSuport.framework は、【Required】から【Optional】に設定します。
実装
cocos2d-x プロジェクト作成時に、自動生成される【AppController.h】に以下の内容を記述します。広告 NADView のインスタンス作成、デリゲートの設定、showAdView メソッドを記述します。
// AppController.h
#import
#import "NADView.h" // 追加
@class RootViewController;
@interface AppController : NSObject { // 追加
UIWindow *window;
RootViewController *viewController;
NADView *nadView; // 追加
}
- (void)showAdView; // 追加
@end
【AppController.mm】に以下の内容を記述します。showAdView メソッドの記述、広告ロード完了処理、dealloc 時の処理を記述しています。
// AppController.mm
- (void)showAdView
{
if (!nadView) {
CGRect frame = CGRectMake(0.f, 0.f, NAD_ADVIEW_SIZE_320x50.width, NAD_ADVIEW_SIZE_320x50.height);
// NADView の作成
nadView = [[NADView alloc] initWithFrame:frame];
[nadView setNendID:@"a6eca9dd074372c898dd1df549301f277c53f2b9" spotID:@"3172"];
[nadView setDelegate:self];
[viewController.view addSubview:nadView];
[nadView load];
}
}
// 広告のロードが完了した時に実行される
- (void)nadViewDidFinishLoad:(NADView *)adView
{
NSLog(@"%s", __FUNCTION__);
}
- (void)dealloc
{
[window release];
[nadView setDelegate:nil];
[nadView release];
[super dealloc];
}
以上、【AppController.h, .m】に記述した showAdView を【AdViewManager.mm】から呼び出します。
// AdViewManager.mm
#import "AdViewManager.h"
#import "AppController.h"
void AdViewManager::showAdView()
{
AppController *appController = (AppController *)[UIApplication sharedApplication].delegate;
[appController showAdView];
}
以上で、iOS における実装は完了しました。後は、cocos2d-x のプロジェクトの任意の場所で、AdViewManager.h に記述した showAdView() メソッドを呼び出すだけになります。
試しに、プロジェクト作成時に自動生成される【HelloWorldScene.cpp】を編集して広告を表示させます。
// HelloWorldScene.cpp
#include "AdViewManager.h"
// ...
void HelloWorld::menuCloseCallback(CCObject* pSender)
{
AdViewManager::showAdView();
}
右下の電源ボタンを押すと広告が表示されます。iPhone 6.1 Simulator で確認しました。
Android アプリに実装する
Android アプリに実装する方法を紹介します。以下にある Android 向けのプロジェクトフォルダを Eclipse にインポートして開きます。
AdViewProject/proj.android/
ヘッダーファイル/メソッドファイルを追加
[File] → [Refresh] を選択すると、作成したヘッダーファイル・メソッドファイル・.jar ファイルが指定の場所に配置されます。ビルドに含めるファイルを指定
【jni/Android.mk】に、以下の内容を記述します。AdViewManager.cpp, Classes/Android フォルダをビルドに含めるようにします。
LOCAL_SRC_FILES := hellocpp/main.cpp \
../../Classes/AppDelegate.cpp \
../../Classes/HelloWorldScene.cpp \
../../Classes/Android/AdViewManager.cpp
LOCAL_C_INCLUDES := $(LOCAL_PATH)/../../Classes
LOCAL_C_INCLUDES += $(LOCAL_PATH)/../../Classes/Android
マニフェストファイルの編集
Nend SDK Android を動作させるのに必要なパーミッションを追加します。
実装
cocos2d-x プロジェクト作成時に、自動生成される【AdViewProject.java】に以下の内容を記述します。NendAdView のインスタンス作成、showAdView メソッドを記述します。
// AdViewProject.java
package net.appbank.adviewproject;
import org.cocos2dx.lib.Cocos2dxActivity;
import org.cocos2dx.lib.Cocos2dxGLSurfaceView;
import android.os.Bundle;
// 追加
import net.nend.android.NendAdView;
import android.app.Activity;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
public class AdViewProject extends Cocos2dxActivity {
private static Activity activity = null; // 追加
private static NendAdView adView = null; // 追加
// ...
// 追加
public static void showAdView()
{
activity.runOnUiThread(new Runnable(){
public void run()
{
if (adView == null) {
adView = new NendAdView(activity, 3174, "c5cb8bc474345961c6e7a9778c947957ed8e1e4f");
RelativeLayout relativeLayout = new RelativeLayout(activity);
activity.addContentView(relativeLayout, new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
relativeLayout.addView(adView);
adView.loadAd();
}
}
});
}
}
【AdViewProject.java】に記述した showAdView を【AdViewManager.cpp】から呼び出します。C++ から Java のコードを呼ぶときには、JNI を使用します。また、CLASS_NAME は、パッケージ名と Java クラス名をスラッシュで区切った文字列になります。
// AdViewManager.cpp
#include "AdViewManager.h"
#include
#include "platform/android/jni/JniHelper.h"
// パッケージ名と Java クラス名
#define CLASS_NAME "net/appbank/adviewproject/AdViewProject"
void AdViewManager::showAdView()
{
cocos2d::JniMethodInfo t;
if (cocos2d::JniHelper::getStaticMethodInfo(t, CLASS_NAME, "showAdView", "()V")) {
t.env->CallStaticVoidMethod(t.classID, t.methodID);
t.env->DeleteLocalRef(t.classID);
}
}
以上で、Android における実装は完了しました。後は、cocos2d-x のプロジェクトの任意の場所で、AdViewManager.h に記述した showAdView() メソッドを呼び出すだけになります。
試しに、プロジェクト作成時に自動生成される【HelloWorldScene.cpp】を編集して広告を表示させます(既に iOS で記述した場合は必要ありません)。
// HelloWorldScene.cpp
#include "AdViewManager.h"
// ...
void HelloWorld::menuCloseCallback(CCObject* pSender)
{
AdViewManager::showAdView();
}
右下の電源ボタンを押すと広告が表示されます。GALAXY S III(v4.0.4)で確認しました。
広告実装されたアプリがリリースされたら
AppBank Network の広告を実装したアプリを App Store にリリースしたら AppBankプラスに申込みましょう。AppBankプラスは、AppBank Network を導入しているアプリを AppBank で紹介できるサービスです。
詳細は下記よりご覧ください。
→ AppBank Network