[Cocos2d-x] appC cloud を使って広告を表示する

広告を導入して収益化しよう

本稿では広告を導入したことがない開発者を対象に、 appC cloud を使って Cocos2d-x アプリに広告を入れる手順について解説したいと思います！ appC cloud では Cocos2d-x 用の SDK が用意されているため、簡単に広告表示処理を実装することができます。

なお、appC cloud の全体的な概要についてはこちらを参照していただければと思います。

弊社のゲーム系アプリは、広告の一部に appC cloud を採用していますので、どのような広告が表示されるのかご覧頂きたい場合はぜひインストールしてみてください。

Sushi Man

App Store でダウンロードする

開発環境

本稿では iOS プロジェクトを対象にした広告表示の実装方法を解説します。開発環境は下記のとおりです。

• Mac OS X Mavericks 10.9.3
• Xcode 5.1.1
• iOS SDK 7.1.2
• Cocos2d-x 3.2.2
• appC cloud SDK (Cocos2d-X用) 1.1.6

アカウントを登録する

appC cloud のアカウント登録は下記 URL から行うことができます。

https://app-c.net/account/regist/

法人 / 個人 が選択できるので、ご自身の所属に従って入力してください。

アプリの新規登録

まずはアプリを登録しましょう。下記 URL にアクセスし「アプリを登録する」をクリックします。

https://media.app-c.net/dashboard/

次に、アプリ管理名を30文字以内で入力します。後で変更することもできます。

登録が完了したら、詳細設定を入力します。今回はひとまず iOS 版の設定を行ってみます。

アプリ管理名の下にアプリ名が連なっていますが、基本的に同じでOKだと思います。Apple ID は決まっていなければ 「999999999」のままにしておき、Bundle ID は登録する予定のもので構いません。

必要情報の入力が終わったあと、一番下にある「アプリ情報の更新」をクリックすると設定が保存されます。「メディアキー」「URLスキーム」が割り当てられるので、確認しておいてください。

以上でアプリ登録は終わりです！

プロジェクトに SDK を入れる

次に、Cocos2d-x プロジェクトに appC Cloud SDK を導入しましょう。SDKダウンロード のページに移動し Cocos2d-x 用の SDK をダウンロードしてください。

ダウンロードした Zip ファイルを解凍すると、「Xcode」というフォルダがあると思います。この中のファイルをプロジェクトに追加していきます。

まず Xcode プロジェクトを開き、 appc_cloud_ios フォルダを Frameworks グループの中にインポートします(分かりやすければどこでも構いません)。

次に、AppCCloudPlugin.cpp、AppCCloudPlugin.h、AppCCloudPlugin.mm を Classes グループの中にインポートします。appC cloud のクラスということが判別しやすいように、appC などのようなグループを作成しておくとよいでしょう。

以上で appC cloud SDK の導入は終わりです。

広告を表示する

共通処理

それでは、appC cloud で広告を表示してみましょう。まずはじめに、どの広告でも必ず必要な処理を AppDelegate に追加します。

#include "AppCCloudPlugin.h"

// 省略...

bool AppDelegate::applicationDidFinishLaunching() {
    
    // 省略...
    
    director->setDisplayStats(true);
    
    // appC cloud 開始
    AppCCloudPlugin::setMK_iOS("メディアキー").start();

    director->setAnimationInterval(1.0 / 60);
    auto scene = MainScene::createScene();
    director->runWithScene(scene);
    
    return true;
}

// 省略...

Director#setDisplayStats() の直後に呼ぶ必要がある点に注意してください。メディアキーは、先ほどアプリ登録時に割り振られたものを設定しましょう。

リストビュー型(ウォール広告)を表示する

リストビュー型は、アプリ全面にリスト形式で表示する広告です。アプリの画面には「おすすめ」などのようなボタンを配置し、ボタンタップ時に表示する、などといったように使います。デザインはいくつかのデザインテンプレートから自由に選ぶことができます。

#include "AppCCloudPlugin.h"

// 省略...

AppCCloudPlugin::Ad::openAdListView();

// 省略...

表示サンプル

カットイン型(インタースティシャル広告)を表示する

カットイン型は、アプリの前面に覆いかぶさる形で表示される広告です。ここには1アプリの大きめの広告とインストールボタンが表示され、ボタンをタップするとダイレクトに App Store (Android の場合は Google Play Store) に飛ばすことができます。ユーザーに対してかなり高いインパクトを与えることができます。こちらもリストビュー同様にデザインを管理画面から変更することができます。

#include "AppCCloudPlugin.h"

// 省略...

AppCCloudPlugin::Ad::showCutin();

// 省略...

表示サンプル

ネイティブ広告型を表示する

ネイティブ広告型とは、アプリの UI にマッチしたデザインで表示できる広告のことです。アプリに馴染んだ形で表示できるので、高いコンバージョンが見込めます。

AppCCloudPlugin::Ad::showMatchAppView(AppCCloudPlugin::LEFT, AppCCloudPlugin::TOP);

表示サンプル

管理画面から背景色や文字色などを細かく指定できる、カスタマイズ性がかなり高い広告になります。

シンプル型を表示する

シンプル型広告は、アイコンが横並びに表示される広告です。また、右側に広告リスト型(ウォール広告)を表示するボタンが付いています。表示領域はバナー広告の一般的なサイズに近いです。

#include "AppCCloudPlugin.h"

// 省略...

AppCCloudPlugin::Ad::showSimpleView(AppCCloudPlugin::TOP);

// 省略...

表示サンプル

Apple のアプリ審査基準の影響で、シンプル型広告はリジェクトされる確率が高くなっているため非推奨となっています(2014年8月22日現在)。

ムーヴアイコン型を表示する

ムーヴアイコン型はアプリアイコンのような正方形の広告のことです。横一列に並べて表示することができます。

#include "AppCCloudPlugin.h"

// 省略...

AppCCloudPlugin::Ad::showMoveIconView(AppCCloudPlugin::LEFT, AppCCloudPlugin::TOP);

// 省略...

表示サンプル

Apple のアプリ審査基準の影響で、シンプル型広告はリジェクトされる確率が高くなっているため非推奨となっています(2014年8月22日現在)。

まとめ

appC cloud の広告は手軽に導入できますので、ぜひアプリの収益化をしてみましょう！今回紹介したゲームもシンプルかつ面白いゲームになっておりますので、ぜひ遊んでいただければと思います。

参考

• Cocos2d-xでの実装例　概要｜アプリ広告,MBaaSサービスのappC cloud