AdMobの広告をUITableViewに表示する方法

iPhone

AdMobの広告をiPhoneアプリのUITableViewに表示する方法を以下にメモしておく。なお、AdMobのアカウント開設等は以下のサイトが非常に丁寧に説明されていて分かりやすいと思われる。


[事前準備]
1. 必要なソースコードとライブラリの追加
ダウンロードしてきたSDKのAdMobフォルダ配下にある、AdMobDelegateProtocol.hとAdMobView.hという2つのヘッダファイルをXCodeのプロジェクトに追加する。
iPhone OS 2.x以降を対象にしたアプリを開発する場合には、更にAdMobフォルダ配下にあるlibAdMobDevice.aとlibAdMobSimulator.aという2つのスタティックリンク・ライブラリをプロジェクトに追加する。
一方、iPhone OS 3.x以降を対象にしたアプリを開発する場合には、上記ライブラリの変わりにextrasフォルダ配下のlibAdMobDevice3_0.aとlibAdMobSimulator3_0.aをプロジェクトに追加する。


2. 必要なフレームワークの追加
AdMobの広告を表示するためには以下の6つのフレームワークをプロジェクトに追加する必要がある。

  • AddressBook.framework
  • AudioToolbox.framework
  • CoreLocation.framework
  • MediaPlayer.framework
  • MessageUI.framework
  • QuartzCore.framework

以上で準備は終わりである。


[広告の表示方法]
以下のようにUITableViewの1行目にAdMobの広告を挿入する場合の実装方法を記載する（下の画像はAdMobのテスト用広告を表示しており、右側はその広告をクリックした時に表示される画面）。
　

具体的な実装であるが、基本的にはダウンロードしたSDKに含まれてているサンプルプロジェクトのTableViewAdViewController.mから必要な部分のソースコードをコピーしてくるという方法が一番簡単と思われる。


ステップ1:
UITableViewControllerのサブクラスにAdMobDelegateプロトコルを追加します。

#import "AdMobDelegateProtocol.h"
@interface RootViewController : UITableViewController <AdMobDelegate> {
}


ステップ2:
UITableViewControllerのサブクラスでAdMobDelegateのメソッドを実装する。TableViewAdViewController.mの"#pragma mark AdMobDelegate methods"以下をまるごとコピーしてくる。

#import "RootViewController.h"
#import "AdMobView.h"
@implementation RootViewController
    (snip)
- (NSString *)publisherId {
    return @"XXXXXXXXXX";
}
- (UIColor *)adBackgroundColor {
    return [UIColor colorWithRed:0 green:0 blue:0 alpha:1];
}
- (UIColor *)primaryTextColor {
    return [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
}
- (UIColor *)secondaryTextColor {
    return [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
}
- (BOOL)mayAskForLocation {
    return YES; // AdMobが広告の表示に位置情報を使用しないようにする場合はNOを返すようにする
}
// テスト用の広告を表示するためコメントアウトされていた部分を有効にしている
// useTestAdとtestAdActionはリリース版ではコメントアウトする
- (BOOL)useTestAd {
    return YES;
}
- (NSString *)testAdAction {
    return @"url";
}
// 必要に応じて以下のログ処理は消す
- (void)didReceiveAd:(AdMobView *)adView {
    NSLog(@"AdMob: Did receive ad");
}
- (void)didFailToReceiveAd:(AdMobView *)adView {
    NSLog(@"AdMob: Did fail to receive ad");
}
    (snip)
@end


ステップ3:
UITableViewの1行目にAdMobの広告を挿入する処理を記載する。
ポイントは通常のセルとAdMobの広告表示用のセルで、セルを再利用するためのIdentifier、及びセルの高さを変えているという事。
あと行の数はAdMobの広告挿入用に「必要な行数+1」にする。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10 + 1;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    static NSString *AdMobCellIdentifier = @"AdMobCell";
    UITableViewCell *cell;
    if (indexPath.row != 0) {
        cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    } else {
        cell = [tableView dequeueReusableCellWithIdentifier:AdMobCellIdentifier];
    }
    if (cell == nil) {
        if (indexPath.row != 0) {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        } else {
            cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:AdMobCellIdentifier] autorelease];
            // AdMobの広告を挿入するための処理
            [cell.contentView addSubview:[AdMobView requestAdWithDelegate:self]];
        }
    }
    if (indexPath.row != 0) {
        cell.textLabel.text = [NSString stringWithFormat:@"Cell #%d", indexPath.row];
    }
    return cell;
}

// AdMobの広告を表示するセルの高さを変更する
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    if((indexPath.section == 0) && (indexPath.row == 0)) {
        return 48.0;
    }
    return 44.0;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if((indexPath.section == 0) && (indexPath.row == 0)) {
        [tableView deselectRowAtIndexPath:indexPath animated:YES];
    } else {
        // 通常のセルがクリックされた時の処理を実装する
    }
}

以上で上画面のようにUITableViewの1行目にAdMobの広告が表示されるようになる。


[参考サイト]