Swift

【Swift】iPhoneアプリにバナー広告を貼る方法（Xcode編）

  /

こんにちは、コン（@pippi_kon）です。

SwiftでiPhoneアプリにバナー広告を貼るためには以下の3つのことをしなくてはいけません。

  1. GoogleのFirebaseに登録する。
  2. アプリIDと広告ユニットIDを取得する。
  3. 広告を設置するプログラムを書く。

今回は、③の広告を設置するプログラムをご紹介します。

関連記事

設定する前に

本記事は以下の記事の設定を行った前提で記載しています。

これらをまだ実施していない場合は、先に以下の記事の設定をしてください。

【Swift】iPhoneアプリにバナー広告を貼る方法（Firebase編）iPhoneアプリへのバナー広告の貼り方（Firebase編）をご紹介します。...
【Swift】iPhoneアプリにバナー広告を貼る方法（広告ID取得編）iPhoneアプリへのバナー広告の貼り方（アプリID/広告ユニットID取得編）をご紹介します。...

 

プロジェクトの設定

まずはXcodeプロジェクトの設定をします。

Firebaseの設定を行った場合、扱うプロジェクトファイルが変わります。

通常 拡張子が「.xcodeproj」
（例：TestApp.xcodeproj）
Firebase設定後 拡張子が「.xcworkspace」
（例：TestApp.xcworkspace）

そのため、Firebaseの設定時にXcodeを開きっぱなしにしていたり、別途.xcodeprojファイルを開いている場合は一旦閉じてください。

 

閉じたら拡張子が「.xcworkspace」のファイルを開きます。

ファイルを開くとXcodeの画面が開きます。

開いたら左のメニューツリーを以下のように操作します。

  1. 青いアイコンのプロジェクト名を押す。
  2. ①によって出現したメニューからプロジェクト名を押す。
  3. 開いた先に「info.plist」があることを確認する。

 

確認できたらFirebaseの設定でダウンロードした「GoogleService-Info.plist」を「info.plist」がある場所にドラッグ&ドロップします。

ドラッグ&ドロップすると以下のようにダイアログが表示されますが、特に何もせず「Finish」ボタンを押してください。

これでプロジェクトの設定は完了です。

次からコーディングを行う際は、必ず今回設定した拡張子が「.xcworkspace」のプロジェクトファイルを使用してください。

 


プログラムコードの記述

Firebase用コードの追加

「AppDelegate.swift」にコードを追加します。

このファイルのプログラムコードの冒頭は初期状態だと以下のようになっています。

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }
    
    :

これを以下のように変更します。（5箇所追記）

import UIKit
import Firebase    //  ★←追記

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // Use Firebase library to configure APIs    ★←追記
        FIRApp.configure()    //  ★←追記
        
        // Initialize Google Mobile Ads SDK, application IDを設定    ★←追記
        GADMobileAds.configure(withApplicationID: "アプリIDを入力")    //  ★←追記
        
        return true
    }
    
    :

追記したのは以下の箇所です。

import UIKit
import Firebase    //  ★←追記

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // Use Firebase library to configure APIs    ★←追記
        FIRApp.configure()    //  ★←追記
        
        // Initialize Google Mobile Ads SDK, application IDを設定    ★←追記
        GADMobileAds.configure(withApplicationID: "アプリIDを入力")    //  ★←追記
        
        return true
    }
    
    :
import UIKit
import Firebase    //  ★←追記

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // Use Firebase library to configure APIs    ★←追記
        FIRApp.configure()    //  ★←追記
        
        // Initialize Google Mobile Ads SDK, application IDを設定    ★←追記
        GADMobileAds.configure(withApplicationID: "アプリIDを入力")    //  ★←追記
        
        return true
    }
    
    :

17行目の「”アプリIDを入力”」には、広告ID取得編で取得したアプリIDを入力します。

例：”ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX”（Xには数字が入る）

【追記】

Xcodeのバージョンをあげたら「FIRApp」が「FirebaseApp」になったっぽいです。

 

＜アプリIDの確認方法＞

AdMob広告のアプリIDと広告ユニットIDを確認する方法AdMob広告のアプリIDと広告ユニットIDの確認方法をご紹介します。...

 

広告表示用コードの追加

「ViewController.swift」にコードを追加します。

このファイルのプログラムコードは初期状態だと以下のようになっています。

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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


}

今回はバナーを画面下に表示してみます。

これを以下のように変更します。

import UIKit
import GoogleMobileAds    //  ★←追記

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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

    override func viewDidLayoutSubviews(){    // ★←この関数まるまる追記
        //  広告インスタンス作成
        var admobView = GADBannerView()
        admobView = GADBannerView(adSize:kGADAdSizeBanner)
        
        //  広告位置設定
        let safeArea = self.view.safeAreaInsets.bottom
        admobView.frame.origin = CGPoint(x:0, y:self.view.frame.size.height - safeArea - admobView.frame.height)
        admobView.frame.size = CGSize(width:self.view.frame.width, height:admobView.frame.height)
        
        //  広告ID設定
        admobView.adUnitID = "広告ユニットIDを入力"
        
        //  広告表示
        admobView.rootViewController = self
        admobView.load(GADRequest())
        self.view.addSubview(admobView)
    }
    

}

追記したのは以下の箇所です。

import UIKit
import GoogleMobileAds    //  ★←追記

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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

    override func viewDidLayoutSubviews(){    // ★←この関数まるまる追記
        //  広告インスタンス作成
        var admobView = GADBannerView()
        admobView = GADBannerView(adSize:kGADAdSizeBanner)
        
        //  広告位置設定
        let safeArea = self.view.safeAreaInsets.bottom
        admobView.frame.origin = CGPoint(x:0, y:self.view.frame.size.height - safeArea - admobView.frame.height)
        admobView.frame.size = CGSize(width:self.view.frame.width, height:admobView.frame.height)
        
        //  広告ID設定
        admobView.adUnitID = "広告ユニットIDを入力"
        
        //  広告表示
        admobView.rootViewController = self
        admobView.load(GADRequest())
        self.view.addSubview(admobView)
    }
    

}
import UIKit
import GoogleMobileAds    //  ★←追記

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

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

    override func viewDidLayoutSubviews(){    // ★←この関数まるまる追記
        //  広告インスタンス作成
        var admobView = GADBannerView()
        admobView = GADBannerView(adSize:kGADAdSizeBanner)
        
        //  広告位置設定
        let safeArea = self.view.safeAreaInsets.bottom
        admobView.frame.origin = CGPoint(x:0, y:self.view.frame.size.height - safeArea - admobView.frame.height)
        admobView.frame.size = CGSize(width:self.view.frame.width, height:admobView.frame.height)
        
        //  広告ID設定
        admobView.adUnitID = "広告ユニットIDを入力"
        
        //  広告表示
        admobView.rootViewController = self
        admobView.load(GADRequest())
        self.view.addSubview(admobView)
    }
    

}

27行目の「”広告ユニットIDを入力”」には、広告ID取得編で取得した広告ユニットIDを入力します。

例：”ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX”（Xには数字が入る）

 

広告は取得したばかりだと表示されるまでに時間がかかります。

また、テスト中などに誤ってクリックしてしまうとGoogleからの制裁（広告停止）を受けてしまいます。

そのため、テスト中は以下のテスト広告IDを指定しておくことを推奨します。

（アプリアップロード時には必ず本番用広告IDに戻すこと）

テスト広告ID：ca-app-pub-3940256099942544/2934735716

 

広告を表示する便利関数を作ってみました！

【Swift】初心者向け！iPhoneアプリに広告を貼る便利関数のご紹介『SwiftでiPhoneアプリにAdMob広告をお手軽に設置できる便利な自作関数』についてご紹介します。...

 

＜広告ユニットIDの確認方法＞

AdMob広告のアプリIDと広告ユニットIDを確認する方法AdMob広告のアプリIDと広告ユニットIDの確認方法をご紹介します。...

 

シミュレーター実行

上記のコード入力が完了したら広告設定完了です！

では、実際にシミュレーターを起動して広告が表示されることを確認してみましょう。

Xcode画面の左上にある端末一覧から確認したいハードを選択し、実行ボタンを押します。

[/jin-img-shadow]

[/jin-img-shadow]

するとシミュレーターが起動されます。

このように広告が表示されれば完成です！

（この例ではテスト用広告を表示しています）

 

最後に

今回は、iPhoneアプリへのバナー広告の貼り方（Xcode編）をご紹介しました。

広告を貼るためには以下の3つのことをしなくてはいけません。

  1. GoogleのFirebaseに登録する。
  2. アプリIDと広告ユニットIDを取得する。
  3. 広告を設置するプログラムを書く。

この記事は③について記載したものです。

 

広告の設定は色々とやることがあって面倒ですよね。

でもアプリの収益化には必須の設定なので避けて通れません。

本記事では手順を細かくご紹介していますので少しでもご参考になれば幸いです。

初心者向け！Swift入門にオススメの参考書_サムネ
【2020年版】初心者向け！Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり！初心者におすすめの人気プログラミングスクール3選_サムネ
無料体験あり！初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
iPhone Swift Xcode アプリ開発 プログラミング
ABOUT ME
コン
自分のやりたいことでお金を稼げる生活に憧れて脱サラ。 アプリ開発やブログ運営をしながらのんびり暮らしています。
BLOG：https://pippi-pro.com
RELATED POST