【Swift/Xcode】Google AdMobでアプリにバナー広告

やりたいこと

こういうやつですね。この画像はシミュレータのテスト広告ですが、実際にアプリをリリースしてるのでご興味がある方は、ぜひダウンロードしてみて下さい!

言葉をストックするメモ帳「KotobaPlus」

開発環境

前提条件として、Google AdMob側の登録や広告IDの取得、もしくはAdSenceの取得はすでに完了しているとします。

  • Swift 5.0.1
  • Xcode11.3
  • Google-Mobile-Ads-SDK

Podfileを自分の好きなテキストエディタで開いて

pod 'Google-Mobile-Ads-SDK'

という記述を追加してライブラリをインストールします。この辺の下準備は参考にさせていただいた素晴らしい記事があるのでそちらを参考にしてください。

あと、公式のドキュメントも読んで準備しとかないとエラーが出ます。

特に「Info.plist を更新する」という項目は重要です!

参考した記事&ドキュメント

【iOS・Swift】iphoneアプリにAdmobを使って、バナー広告を表示する方法【チュートリアル】
iphoneアプリの広告の定番といえば、Googleが運営する広告プラットフォームAdmob。今回はそんなAdmobのバナー広告をiOSアプリにSwiftで組み込む方法を紹介します。
Get Started  |  iOS  |  Google Developers
A mobile ads SDK for AdMob publishers who are building iOS apps.

コードの解説

では、コードの解説のしていきます。

まずはXcodeのプロジェクトを作成した時に自動で作られる「AppDelegate.swift」ファイルを編集します。

編集するファイル:AppDelegate.swift

import UIKit
import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
                GADMobileAds.sharedInstance().start(completionHandler: nil)
        return true
    }

    // MARK: UISceneSession Lifecycle

    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }


}

実際に追加した分は上の方にある、

import GoogleMobileAds
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
                GADMobileAds.sharedInstance().start(completionHandler: nil)
        return true
    }

この2箇所です。公式ドキュメントをそのまま使った感じです。

これで Google AdMobを使える状態になりました。

あとは設置するだけです。

しかし、この設置の記述が現時点のXcode11.3の記事が見つからず、ちょっとハマったので参考にしていただけたら嬉しいです。

編集するファイル:ViewController.swift(広告を載せたいビューファイル)

ファイル名は自分で決めた名前だと思うので、必ずしもViewController.swiftではなありません。自分の場合はTOPページに広告を載せていて、そのファイルがViewController.swiftってことです。

import UIKit
import RealmSwift
import GoogleMobileAds

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, GADBannerViewDelegate {
    
    //一覧表示をするデータが入る変数を先に用意。オプショナル型にして初期値設定をする
    var fileList: Results<Files>!
    var deleteLabel: Results<Label>?
    var deleteWord: Results<Word>?
    var selectFileId:String = ""
    var selectFileTitle:String = ""
    
    let ud = UserDefaults.standard
    
    var bannerView: GADBannerView!
    
    
    @IBOutlet weak var tableFileView: UITableView!
    
    @IBOutlet weak var menuButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        tableFileView.dataSource = self
        tableFileView.delegate = self
        
        bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
        bannerView.adUnitID = "ca-app-pub-0000000000000000/1111111111"
        bannerView.rootViewController = self
        bannerView.load(GADRequest())
        bannerView.delegate = self
        addBannerViewToView(bannerView)
        
    }
    
    func addBannerViewToView(_ bannerView: GADBannerView) {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(bannerView)
        view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .top,
                                relatedBy: .equal,
                                toItem: view.safeAreaLayoutGuide,
                                attribute: .top,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
            ])
    }

※コードの一部を抜粋しています

実際に追加&編集したコードは

import GoogleMobileAds
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, GADBannerViewDelegate
bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
bannerView.adUnitID = "ca-app-pub-0000000000000000/1111111111"
bannerView.rootViewController = self
bannerView.load(GADRequest())
bannerView.delegate = self
addBannerViewToView(bannerView)

この辺の定義付けのコードは説明を省きます。主に広告を表示する記述や表示するタイミングに関わってきます。

bannerView.adUnitID = "ca-app-pub-0000000000000000/1111111111"

このIDは自分の取得したIDにしてください。

次からがちょっとハマった部分です。

広告を表示する位置を決めるコード
    func addBannerViewToView(_ bannerView: GADBannerView) {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(bannerView)
        view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .top,
                                relatedBy: .equal,
                                toItem: view.safeAreaLayoutGuide,
                                attribute: .top,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
            ])
    }

注意するのは

attribute: .top,
toItem: view.safeAreaLayoutGuide,

この2箇所です。

「attributes」を「.bottom」などにして一番下に表示を変えることができます。

上記のコードは一番上(Navigationバーの下)に配置するコードです。

細かい位置の取得はまだまだ勉強中なので、これから覚えたいと思います。

最後に

管理人は現時点でプログラミン歴5ヶ月程度の未熟者ですm(_ _)m

自分の備忘録やアウトプットを癖づけるためにブログをはじめましたが、ご指摘ありましたら勉強になりますので、ご遠慮なく言ってくれると嬉しいです。

ここまで読んでいただき、ありがとうございました!

コメント

タイトルとURLをコピーしました