cocos2d-x で AppBank Network の無料アプリ用の広告を実装する方法（iOS, Android）

Tags: ニュースAppBank Network

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

cocos2dx-1

また、【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

AD
参考になったらシェアお願いします！
Twitterへ Facebookへ はてブへ Pocketへ
▼新着記事やオススメ記事を投稿中！
ニュースAppBank Network
AD

  1. Home
  2. ニュース
  3. cocos2d-x で AppBank Network の無料アプリ用の広告を実装する方法（iOS, Android）
人気キーワードから探す
カテゴリーから探す
ゲームのジャンルから探す