Cordova(PhoneGap)で作ったiOSアプリにAdMobを適用する

PhoneGapはHTMLやJavascriptなどで作られたWebアプリケーションを、 WebViewを利用してアプリ化することができるフレームワークです。

今回はPhoneGapで作ったアプリに広告を貼りたいなーという所から話が始まります。

そもそもAdsenceを貼っていいの？

まず広告で思いついたのがAdsenceですが、
不正な操作のために AdSense アカウントが無効となる一般的な理由
のアプリケーションに広告を埋め込むに書かれているように、
アプリケーションに広告を埋め込むことは禁止されているそうです。

こんなことでアカウントが無効になってしまったら、
ショックの反動でやけ食いや衝動買いをしてしまうかもしれませんね。

そこで登場するのがAdMob

モバイル用アプリに広告を掲載する場合は、
AdMob SDKを利用するそうです。
登録はこちらから→AdMob

Adsenceのアカウントを取得している方ならそのアカウントを使ってログインすることができ、
新規でアカウントを作るよりも早くアプリケーションの登録にとりかかることができます。
今回は登録までの話は割愛します。

早速SDKをダウンロードしてみましょう

AdMobにログインして、グローバルメニューより、
サイト及びアプリケーション → サイト/アプリケーションの追加
を選択します。

アプリケーションの種類を選択します。
今回はiPhoneアプリなのでiPhoneアプリケーションを選択

引き続きアプリケーションの詳細を入力いきます。

無事入力が完了するとAdMobSDKをダウンロードできます。

解凍してさあ広告を表示させてみよう!!

早速以下のリンク先を参考にしながらテスト表示させてみることにしました。
Google AdMob Ads iOS（初級）

まずXcodeで自分のプロジェクトを右クリックで選択、
Add Files to "BannerExample"を選択
解答したSDKの中にあるREADME以外を選択、Addで追加します。

次に開発フレームワークを4つ追加します。
左のサイドバーより自分のプロジェクトを選択、
【Build Phases】という項目のタブをクリック、
【Link Binary With Libraries】をクリック。

左下の【+】ボタンを押してフォームに以下のフレームワークを入力して、
一つ一つ追加していきます。

AudioToolbox
MessageUI
SystemConfiguration
CoreGraphics

次に表示させるためのコードを追記していくのですが、
そのままだと表示位置が変だったので、
Cordova (PhoneGap) and AdMob Together: iOS Version
こちらで紹介されている方法も参考にしながら進めました。

左のサイドバーより、
プロジェクト名 → Classes → MainViewController.h
をクリックして開きます。

以下のように書き換えます。



import <Cordova/CDVViewController.h>

import "GADBannerView.h"

@interface MainViewController : CDVViewController {
    GADBannerView *bannerView_;
}

@end

次にMainViewController.mを開いて、
ライセンスのコメントアウトされている部分の下辺りに
#define MY_BANNER_UNIT_ID @"xxxxxxxxx"

とアプリケーションのUnitIDを定義しておきます。

アプリケーションのUnitIDは、AdMobのページより
サイト及びアプリケーションから対象のアプリケーションにhoverするとでる設定を管理をクリックすると確認することができます。

引き続きMainViewController.mの中をいじっていきます。 viewDidLoad、viewDidUnload 内を以下のように追記します。

ソースコードはCordova (PhoneGap) and AdMob Together: iOS VersionとGoogle AdMob Ads iOSを参考、引用させて頂いています。


- (void) viewDidLoad
{
    [super viewDidLoad];
    // 画面下部に標準サイズのビューを作成する
    bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
    [bannerView setCenter:CGPointMake(kGADAdSizeBanner.size.width/2, 435)];

// 広告の「ユニット ID」を指定する。これは AdMob パブリッシャー ID です。
bannerView_.adUnitID = MY_BANNER_UNIT_ID;

// ユーザーに広告を表示した場所に後で復元する UIViewController をランタイムに知らせて
// ビュー階層に追加する。
bannerView_.rootViewController = self;
[self.view addSubview:bannerView_];

// テストモードを有効にする
GADRequest *request = [GADRequest request];
request.testing = YES;

// 一般的なリクエストを行って広告を読み込む。
[bannerView_ loadRequest:[GADRequest request]];


}


(void) viewDidUnload
{
  [super viewDidUnload];
  [bannerView_ release];
}

これらを保存し終わったら、 AdMobの広告を取得するのに外部との通信を行いますので、
許可リストを変更します。

左のサイドバーより、
作成したプロジェクト→Resources→Cordova.plist
この中にあるExternalHostsをクリックして右に出る『＋』マークをクリック。