FANCOMI Ad-Tech Blog

株式会社ファンコミュニケーションズ nend・新規事業のエンジニア・技術ブログ

SwiftでAdMobメディエーションを使ってnendのバナーとインタースティシャルを表示する

はじめまして。 もともと辛い食べ物が全般的に苦手なのですが、 今のチームのみなさんのおかげで、辛い辛さは変わりませんが、その辛さが若干心地よく感じるようになったかも? というレベルになった気がする今日この頃です。まだ気のせいかもしれません。

主にiOS関連の開発担当をしておりますfukuokaです。

ここでは、新規でSwiftのプロジェクトを作成して導入手順を紹介していきます。

説明の流れ
1. 新規プロジェクトを作成する
2. Google Mobile Ads SDKをプロジェクトに追加する
3. SwiftGoogle Mobile Ads SDKを使えるようにする
4. AdMobのヘッダーファイルを定義する
5. AdMobのバナー広告を表示する
6. AdMobのインタースティシャル広告を表示する
7. AdMobのGADBannerViewDelegateを実装する
8. AdMobのGADInterstitialDelegateを実装する
9. nend SDKとAdMobメディエーション用アダプターをプロジェクトに追加する

開発環境 Xcode 6.1 iOS 8.1 Google Mobile Ads SDK iOS ver6.12.0 NendSDK_iOS-2.5.5

1. 新規プロジェクトを作成する XcodeのメニューからFile>New>Project>「Single View Application」を選択。 Language: の選択ではSwiftを選択します。

2. Google Mobile Ads SDKをプロジェクトに追加する 以下リンクの公式ガイドに従ってSDKのダウンロードと導入まで行います。 https://developers.google.com/mobile-ads-sdk/download https://developers.google.com/mobile-ads-sdk/docs/#ios 必要なフレームワークやOther Linker Flagsに-ObjCの追加を忘れないように注意してください。

3. SwiftGoogle Mobile Ads SDKを使えるようにする SwiftからObjective-Cで作成されたソースコードSDKなどを利用するには、Bridging-Headerという仕組みを利用します。

Bridging-HeaderについてはApple公式の情報がこちらにあります。 https://developer.apple.com/library/ios/documentation/swift/conceptual/buildingcocoaapps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-XID_77

XcodeのProject Navigatorで右クリック>New File>「Header File」を選択し、(任意のプロジェクト名)-Bridging-Headerというファイル名にして作成します。 以下の例では、SwiftAdMobMediationSample-Bridging-Header.hというファイル名にしています。

sc2sc1sc3sc4

プロジェクトファイルを選択>TARGETS>Build Settings>Swift Compiler - Code Generation>Objective-C Bridging Headerにパスを追加します。 ここでは、$(SRCROOT)/$(PROJECT)/SwiftAdMobMediationSample-Bridging-Header.h としています。 パスは環境に合わせて適宜変更してください。

sc5

4. AdMobのヘッダーファイルを定義する 追加したSwiftAdMobMediationSample-Bridging-Header.hに、AdMobのバナーとインタースティシャルのヘッダーファイルのインポートを定義します。 これにより、プロジェクト内でGADBannerView.hとGADInterstitial.hを読み込むことができます。

例)SwiftAdMobMediationSample-Bridging-Header.h に実装を行っています。

[java]

ifndef SwiftAdMobMediationSample_SwiftAdMobMediationSample_Bridging_Header_h

define SwiftAdMobMediationSample_SwiftAdMobMediationSample_Bridging_Header_h

import "GADBannerView.h" // バナー広告

import "GADInterstitial.h" // インタースティシャル広告

endif

[/java]

5. AdMobのバナー広告を表示する AdMobメディエーションの実装方法は通常のAdMobを実装する手順と基本的に同じです。 以下、SwiftでAdMobのバナー広告を表示する実装例になります。 例)ViewController.swift内のviewDidLoad()に実装を行っています。

[java] import UIKit class ViewController: UIViewController{    override func viewDidLoad() {      super.viewDidLoad()

     var bannerView: GADBannerView = GADBannerView()      bannerView = GADBannerView(adSize:kGADAdSizeBanner)      bannerView.adUnitID = "広告ユニットID"      bannerView.rootViewController = self      self.view.addSubview(bannerView)      bannerView.loadRequest(GADRequest())

   }    override func didReceiveMemoryWarning() {      super.didReceiveMemoryWarning()      // Dispose of any resources that can be recreated.    } } [/java]

6. AdMobのインタースティシャル広告を表示する 以下、SwiftでAdMobのインタースティシャル広告を表示する実装例になります。 例)ViewController.swift内でshowInterstitialというUIButtonをタップした時に表示する実装を行っています。

[java] import UIKit class ViewController: UIViewController{    var interstitial:GADInterstitial = GADInterstitial()    @IBOutlet weak var showInterstitial: UIButton!    override func viewDidLoad() {      super.viewDidLoad()

     showInterstitial.addTarget(self, action: "showInterstitial:", forControlEvents: .TouchUpInside)

     interstitial.adUnitID = "広告ユニットID"      interstitial.loadRequest(GADRequest())

   }

   func showInterstitial(sender: UIButton){      // インタースティシャルを表示      interstitial.presentFromRootViewController(self)    } } [/java]

7. AdMobのGADBannerViewDelegateを実装する GADBannerViewDelegateを追加、GADBannerViewの変数にdelegateプロパティを設定、 GADBannerViewDelegateの各デリゲートメソッドの実装を行います。 これにより、広告取得の完了やエラーのイベントを受け取ることができます。

例)ViewController.swift内に実装を行っています。

[java] import UIKit class ViewController: UIViewController, GADBannerViewDelegate{    override func viewDidLoad() {      super.viewDidLoad()

     var bannerView: GADBannerView = GADBannerView()      bannerView = GADBannerView(adSize:kGADAdSizeBanner)      bannerView.adUnitID = "広告ユニットID"      bannerView.rootViewController = self      bannerView.delegate = self      self.view.addSubview(bannerView)      bannerView.loadRequest(GADRequest())

   }    override func didReceiveMemoryWarning() {      super.didReceiveMemoryWarning()      // Dispose of any resources that can be recreated.    }

   func adViewDidReceiveAd(adView: GADBannerView){      println("adViewDidReceiveAd:(adView)")    }    func adView(adView: GADBannerView, didFailToReceiveAdWithError error: GADRequestError){      println("error:(error)")    }    func adViewWillPresentScreen(adView: GADBannerView){      println("adViewWillPresentScreen")    }    func adViewWillDismissScreen(adView: GADBannerView){      println("adViewWillDismissScreen")    }    func adViewDidDismissScreen(adView: GADBannerView){      println("adViewDidDismissScreen")    }    func adViewWillLeaveApplication(adView: GADBannerView){      println("adViewWillLeaveApplication")    } } [/java]

8. AdMobのGADInterstitialDelegateを実装する GADInterstitialDelegateを追加、GADInterstitialの変数にdelegateプロパティを設定、 GADInterstitialDelegateの各デリゲートメソッドの実装を行います。 これにより、広告取得の完了やエラーのイベントを受け取ることができます。

例)ViewController.swift内に実装を行っています。

[java] import UIKit class ViewController: UIViewController, GADInterstitialDelegate{    var interstitial:GADInterstitial = GADInterstitial()    @IBOutlet weak var showInterstitial: UIButton!    override func viewDidLoad() {      super.viewDidLoad()

     showInterstitial.addTarget(self, action: "showInterstitial:", forControlEvents: .TouchUpInside)

     interstitial.adUnitID = "広告ユニットID"      interstitial.delegate = self      interstitial.loadRequest(GADRequest())    }

   func showInterstitial(sender: UIButton){      // インタースティシャルを表示      interstitial.presentFromRootViewController(self)    }

   func interstitialDidReceiveAd(interstitial: GADInterstitial){      println("interstitialDidReceiveAd:(interstitial)")    }    func interstitial(interstitial: GADInterstitial, didFailToReceiveAdWithError error:GADRequestError{      println("didFailToReceiveAdWithError:(interstitial)")    } } [/java]

ここまでの実装でAdMob広告の表示とデリゲートが動作しているかを確認します。 正常に動作していれば、次はnend用のAdMobメディエーションアダプターを使ってnendのバナー広告が表示できるようにします。

9. nend SDKとAdMobメディエーション用アダプターをプロジェクトに追加する 以下のように、プロジェクトにNendAdとlibAdapternend.aを追加します。 また、nendSDKの利用には以下のフレームワークが必要になります。

・AdSupport.framework ・Security.framework ・ImageIO.framework

詳しくは、nendSDK AdMobメディエーション設定ガイド、nendSDK for iOS 設定ガイド(SDK付属)を参照してください。

nendSDK AdMobメディエーション設定ガイド http://nend.net/mediation/index

sc6sc7

以上で、nend SDKとAdMobメディエーション用アダプターが利用できる準備ができました。 あとは、AdMobの管理画面でメディエーションの設定を行うことでAdMobとnendの表示ができるようになります。

AdMob sc11sc10 Nend sc9

sc8