【Swift UIKit】AdMobのバナー広告の実装方法!GADBannerView

この記事からわかること

  • SwiftUIKitAdMobバナー広告導入する方法
  • 'kGADAdSizeSmartBannerPortrait' is deprecated: Use GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth.解決法
  • ViewModelとして切り出すには?

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

SwiftのUIKitフレームワーク使用時にAdMobを使ってバナー広告を実装する方法をまとめていきます。またこの記事ではAdMobの登録方法などは解説しませんのでSwift UIでのバナー広告の実装方法も解説している以下記事を参考にしてください。

UIKitでのバナー広告実装方法

公式リファレンス:AdMob Mobile Ads SDK(iOS)

公式サイトで公開されている方法に倣って実装していきます。所々公式サイトとは異なるところもありますが、より使いやすくするために改変しています。

実装の流れ

  1. AdMobへアプリの登録と各IDの生成
  2. プロジェクトへAdMob Mobile Ads SDKの導入
  3. info.plistにIDとNetworkIdentifier登録
  4. コントローラー内にGADBannerView!型のプロパティを定義
  5. bannerビューを追加/配置するメソッドの定義
  6. viewDidLoadメソッド内でインスタンス化&メソッド呼び出し
  7. インスタンスにIDを格納
  8. インスタンスのrootViewControllerに自身をセット
  9. 完成

AdMobへアプリの登録と各IDの生成

Google AdMob

まずはプロジェクトにAdMobの導入が必要です。アプリを登録後、公式サイトからアプリIDとバナーIDを作成しておきます。

Google AdSenseの広告ユニットを追加する

プロジェクトへAdMob Mobile Ads SDKの導入

それができたらファイル内に「Cocoa Pods」などを使用してライブラリを導入しimportで使用できるようにしておきます。

import GoogleMobileAds

info.plistにIDとNetworkIdentifierを登録

取得した各IDとNetworkIdentifierを「info.plist」に追加していきます。公式サイトでは取得したバナーIDは直接渡していましたが、info.plistに保存しておくと使い回しがしやすいのでおすすめです。

SwiftプロジェクトのInfo.plistにアプリIDキーを追加する

アプリID

※テスト用:自身のIDへ変更

NetworkIdentifier

バナーID

info.plistを開いて分かりやすいキー(AdMobBannerIdなど)で設定し、値にバナーIDを格納しておきます。

※テスト用:自身の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)
    }
}

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index