【iOSアプリ開発】Admobを使って公開したアプリに広告を掲載しよう！〜完結編〜

2023年8月25日

前回はAdmobでアプリに掲載する広告ユニットの作成手順について解説しました。

今回はこのシリーズの完結編として、前回作成した広告ユニットを使ってiOSアプリに実際に広告を掲載します！

iOSアプリにAdmob広告を掲載する

事前準備

自作したiOSアプリに広告を掲載するにはMacにCocoaPodsというライブラリ管理ツールを導入する必要があります。

まだ導入していない人はCocoaPodsを導入しておきましょう。

iOSアプリのAdmob広告を掲載する手順

ここからはiOSアプリにAdmob広告を掲載する手順について解説していきます。

STEP

CocoaPodsをプロジェクトに導入する

まずはプロジェクトにCocoaPodsを導入しましょう。

広告を貼り付けたいアプリのプロジェクトをFinderで開き、そこまでのファイルパスをコピーします。

次にターミナルを開き、以下の２つのコマンドを順に入力しましょう。

$ cd 先ほどコピーしたファイルパス
$ pod init

これでCocoa Podsの導入は完了です。（↓CocoaPods導入後のターミナル画面）

STEP

Google-Mobile-ADs-SDKの導入

Cocoa Podsの導入が完了するとプロジェクト内のディレクトリに「ProFile」というファイルが追加されます。

このProFileを開いて、以下２つのコードを追加して保存しましょう。

  pod "Google-Mobile-Ads-SDK"

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
    end
  end
end

編集後のProFileのコードは次のようになります。

再びターミナルに戻って次のコマンドを入力しましょう。

$ pod install

↓のような画面が表示されればGoogle-Mobile-ADs-SDKの導入は完了です。

STEP

info.plistを編集する

Step2が完了するとプロジェクトのフォルダー内に「プロジェクト名.xcworkspace」というもの追加されるので、同ファイルをクリックしてプロジェクトを開きましょう。（今後は常にこのファイルからプロジェクトを開くようにしてください）

プロジェクトを開いたらファイルツリーの一番上にあるプロジェクトをクリックして、info.plistの編集画面まで移動しましょう。

次にKey一覧の中にある「Bundle name」にカーソルを合わせて＋をクリックしましょう。

すると編集画面が表示されるので↓のような２つの項目を追加しましょう。

ちなみにGADApplicationIdentifierのキー値は前回広告ユニットを作成した際にメモしたアプリIDを入力しましょう。

Key：GADApplicationIdentifier
Type：String
Value：ca-app-pub-xxxxxxxxxxxxxxxxx~xxxxxxx
（テスト用はca-app-pub-3940256099942544~1458002511）

Key：SKAdNetworkIdentifier
Type：String
Value：cstr6suwn9.skadnetwork

これでinfo.plistの編集は完了です。

STEP

Google-Mobile-SDKの実装

最後にGoogle-Mobile-SDKの実装をしていきます。

はじめに「プロジェクト名.app」を開いて以下２つのコードを追加しましょう。

import GoogleMobileAds

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

    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

編集後の「プロジェクト名.app」の画面は↓のようになります。

次に「ContentViw.swift」を開いて以下のコードを追加しましょう。８行目の「ca-app-pub-…」箇所は前回広告ユニットを作成した際にメモした広告IDに置き換えましょう。

import UIKit
import GoogleMobileAds

struct AdMobBannerView: UIViewRepresentable {
    func makeUIView(context: Context) -> GADBannerView {
        let banner = GADBannerView(adSize: GADAdSizeBanner) // インスタンスを生成
        // 諸々の設定をしていく
        banner.adUnitID = "ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxx" // 自身の広告IDに置き換える
        let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        banner.rootViewController = windowScene?.windows.first!.rootViewController
        
        let request = GADRequest()
        request.scene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        
        banner.load(request)
        return banner // 最終的にインスタンスを返す
    }

    func updateUIView(_ uiView: GADBannerView, context: Context) {
      // 特にないのでメソッドだけ用意
    }
}

編集後の「ContentView.swift」の画面は↓のようになります。（今回はテスト用に広告IDは次の文字列で置き換えました。）

ca-app-pub-3940256099942544/2934735716

これでGoogle-Mobile-SDKの実装は完了です！

STEP

アプリに広告を表示する

Step5までで広告を掲載するために必要な準備は全て終わっているので、あとは表示させたい位置で以下のコードを追加すれば広告がアプリ内に表示されます。

AdMobBannerView()

実際にテスト用広告を使ってContentViewを以下のように書き換えると↓のような形で広告が表示されます！

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
        AdMobBannerView()
    }
}