【Swift UIKit】AdMobのバナー広告の実装方法!GADBannerView
この記事からわかること
- SwiftのUIKitでAdMobのバナー広告を導入する方法
- 'kGADAdSizeSmartBannerPortrait' is deprecated: Use GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth.の解決法
- ViewModelとして切り出すには?
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
SwiftのUIKitフレームワーク使用時にAdMobを使ってバナー広告を実装する方法をまとめていきます。またこの記事ではAdMobの登録方法などは解説しませんのでSwift UIでのバナー広告の実装方法も解説している以下記事を参考にしてください。
UIKitでのバナー広告実装方法
公式リファレンス:AdMob Mobile Ads SDK(iOS)
公式サイトで公開されている方法に倣って実装していきます。所々公式サイトとは異なるところもありますが、より使いやすくするために改変しています。
実装の流れ
- AdMobへアプリの登録と各IDの生成
- プロジェクトへAdMob Mobile Ads SDKの導入
- info.plistにIDとNetworkIdentifier登録
- コントローラー内にGADBannerView!型のプロパティを定義
- bannerビューを追加/配置するメソッドの定義
- viewDidLoadメソッド内でインスタンス化&メソッド呼び出し
- インスタンスにIDを格納
- インスタンスのrootViewControllerに自身をセット
- 完成
AdMobへアプリの登録と各IDの生成
まずはプロジェクトにAdMobの導入が必要です。アプリを登録後、公式サイトからアプリIDとバナーIDを作成しておきます。
プロジェクトへAdMob Mobile Ads SDKの導入
それができたらファイル内に「Cocoa Pods」などを使用してライブラリを導入しimport
で使用できるようにしておきます。
import GoogleMobileAds
info.plistにIDとNetworkIdentifierを登録
取得した各IDとNetworkIdentifierを「info.plist」に追加していきます。公式サイトでは取得したバナーIDは直接渡していましたが、info.plistに保存しておくと使い回しがしやすいのでおすすめです。
アプリID
- Key:GADApplicationIdentifier
- Type:String
- Value:ca-app-pub-3940256099942544~1458002511(※)
※テスト用:自身のIDへ変更
NetworkIdentifier
- Key:SKAdNetworkIdentifier
- Type:String
- Value:cstr6suwn9.skadnetwork
バナーID
info.plistを開いて分かりやすいキー(AdMobBannerIdなど)で設定し、値にバナーIDを格納しておきます。
- Key:AdMobBannerId(任意)
- Type:String
- Value:ca-app-pub-3940256099942544/2934735716(※)
※テスト用:自身のIDへ変更
これで前準備が終わりましたのでここからコードを記述していきます。
コントローラー内にGADBannerView!型のプロパティを定義
続いて組み込みたいコントローラークラス内にGADBannerView
型の空のプロパティを定義しておきます。これが実際に表示されるビューになります。
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
}
}
bannerビューを追加/配置するメソッドの定義
さらにコントローラークラス内にビューを追加&AutoLayoutを使用した配置位置を決めるメソッドを定義していきます。AutoLayoutでは画面の下側に配置される制約になっています。
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
上記は修正後ですが、公式サイトのものをそのまま引用すると以下のようなエラーが発生したので対処する必要がありました。以下記事を参考にしてください。
'bottomLayoutGuide' was deprecated in iOS 11.0: Use view.safeAreaLayoutGuide.bottomAnchor instead of bottomLayoutGuide.topAnchor
viewDidLoadメソッド内でインスタンス化&メソッド呼び出し
定義したプロパティのインスタンス化とメソッドはviewDidLoad
メソッド内で呼び出します。 インスタンス化時にバナービューのサイズ(横幅)を画面と同じ大きさになるように定義しています。
override func viewDidLoad() {
super.viewDidLoad()
// インスタンス化
bannerView = GADBannerView(adSize: GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(self.view.frame.size.width))
// メソッド呼び出し
addBannerViewToView(bannerView)
}
公式サイトをそのまま引用するとkGADAdSizeSmartBannerPortrait
となっており、以下のような警告が発生しました。
'kGADAdSizeSmartBannerPortrait' is deprecated: Use GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth.
'kGADAdSizeSmartBannerPortrait' is deprecated: Use GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth.
この警告通りに非推奨となったkGADAdSizeSmartBannerPortrait
からGADPortraitAnchoredAdaptiveBannerAdSizeWithWidth
に置き換えることで正常に動作しました。
GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(self.view.frame.size.width)
インスタンスにIDを格納
続いてバナーIDをインスタンスに渡します。info.plistに格納しているので計算プロパティとして参照できるように定義しておきます。
var AdMobBannerId: String {
return Bundle.main.object(forInfoDictionaryKey: "AdMobBannerId") as! String
}
あとはIDを指定とrootViewControllerに自身をセットし、広告を読み込みをviewDidLoad
メソッド内に記述すれば完成です。
override func viewDidLoad() {
super.viewDidLoad()
// インスタンス化
bannerView = GADBannerView(adSize: GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(self.view.frame.size.width))
// メソッド呼び出し
addBannerViewToView(bannerView)
bannerView.adUnitID = AdMobBannerId
bannerView.rootViewController = self
// 広告読み込み
bannerView.load(GADRequest())
}
全体のコード
class ViewController: UIViewController {
// MARK: - Admob
var bannerView: GADBannerView!
var AdMobBannerId: String {
return Bundle.main.object(forInfoDictionaryKey: "AdMobBannerId") as! String
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
// MARK: - Admob
// MARK: - View
override func viewDidLoad() {
super.viewDidLoad()
// MARK: - Admob
bannerView = GADBannerView(adSize: GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(self.view.frame.size.width))
addBannerViewToView(bannerView)
bannerView.adUnitID = AdMobBannerId
bannerView.rootViewController = self
bannerView.load(GADRequest())
// MARK: - Admob
}
}
AdMob用のViewModelを作成する
ここまで解説してきたコードではViewControllerの中に直接記述していたため複数のViewControllerで使い回すことができず再利用しにくい構造になっています。なので使い回しがしやすいように(かつUIKitで使いがちなMVVM構造に倣って)ViewModelとして切り出してみたいと思います。
コードの中身自体は先ほど解説してきたものとほとんど変わりません。
import UIKit
import GoogleMobileAds
class AdMobViewModel: NSObject {
var bannerView: GADBannerView!
var AdMobBannerId: String {
return Bundle.main.object(forInfoDictionaryKey: "AdMobBannerId") as! String
}
func addBannerViewToView(_ bannerView: GADBannerView,view:UIView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
func admobInit(vc: UIViewController) {
bannerView = GADBannerView(adSize: GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(vc.view.frame.size.width))
addBannerViewToView(bannerView, view: vc.view)
bannerView.adUnitID = AdMobBannerId
bannerView.rootViewController = vc
bannerView.load(GADRequest())
}
}
ViewModelとして切り出したおかげでViewControllerクラス内では以下のようにスッキリさせることができました。
import UIKit
class ViewController: UIViewController {
var admobViewModel = AdMobViewModel()
override func viewDidLoad() {
super.viewDidLoad()
// MARK: - AdMob
admobViewModel.admobInit(vc: self)
}
}
ご覧いただきありがとうございました。