[SwiftUI][AdMob] SwiftUI アプリへの AdMob 追加の方法

SwiftUI アプリへの AdMob の追加方法を説明します。

参照する Google のドキュメント

ここ にあるドキュメントを参照するのが良いと思います。

ただし、抜けていたりするので、いろいろと追加設定が必要でした。

以下の手順は、Google のいろいろなページにある情報を組み合わせたものです。

おおまかな手順

  1. Web 上で Firebase の設定
  2. 開発環境で、Xcode プロジェクト設定
  3. 開発環境で、コード追加



Firebase コンソールでの設定

Firebase 上にアプリ(プロジェクト)を作ります。最終的に、GoogleService-Info.plist がダウンロードできれば完了です。

Firebase プロジェクトを作成

Firebase コンソール上で、"プロジェクトを追加” ボタンを押すと、作成できます。

  1. Step1: プロジェクトに名前を設定する
  2. Step2: アナリティクス登録は、お好みで
  3. Step2': アナリティクス設定した時は、Google アカウントと紐付けます

Firebase プロジェクトにアプリを追加

作成したプロジェクトに、アプリを追加していきます。

  1. プロジェクト名の下の"+ アプリを追加" ボタンを押下する
  2. プラットフォームを選択する(iOS を選択します)
  3. アプリの Bundle ID を設定する(Xcode のターゲットの全般タブで確認できます)
  4. 設定ファイル(GoogleService-Info.plist)をダウンロードする

これで、Xcode プロジェクトに設定するファイルは入手できました。

開発環境で、Xcode プロジェクト設定

必要な設定ファイル、ライブラリを追加していきます。

GoogleService-Info.plist を追加

先ほどダウンロードした、GoogleService-Info.plist を Xcode プロジェクトに追加します。(特に場所の指定はありません)

Cocoapod 経由で、ライブラリを追加します

以下の手順で、Xcode プロジェクトに ライブラリを追加します。

コード
% // Xcode プロジェクトを閉じる
% cd <プロジェクトフォルダ>
% pod init
% // Podfile にテキストを追加 (下記参照)
% pod install
% // しばらく待ちます
% open プロジェクト名.xcworkspace
% // 以降は、プロジェクト名.xcodeproj ではなく、プロジェクト名.xcworkspace を使う

Podfile には、以下のテキストを追加します。

Podfile に追加するテキスト
# add the Firebase pod for Google Analytics
pod 'Firebase/Analytics'

# add pods for any other desired Firebase products
# https://firebase.google.com/docs/ios/setup#available-pods
pod 'Firebase/AdMob'

複数のターゲットがあるときには、iOS をターゲットとしたセクションに追加します。

編集後 Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'MeetingTime (iOS)' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # ここから
  # Pods for MeetingTime (iOS)
  # add the Firebase pod for Google Analytics
  pod 'Firebase/Analytics'

  # add pods for any other desired Firebase products
  # https://firebase.google.com/docs/ios/setup#available-pods
  pod 'Firebase/AdMob'
  # ここまで
end

上記は、MeetingTime(iOS) というターゲットをもつプロジェクトでの Podfile です。

Info.plist に、設定追加

Info.plist に GADApplicationIdentifier というキーで、アプリのIDを設定する必要があります。

アプリ ID の確認

アプリ ID の確認は、Admob で確認する必要があります。

  • Admob にログイン
  • サイドバーで [アプリ] をクリック
  • でてくるポップアップメニューから[すべてのアプリを表示] をクリック
  • 新しく追加されているアプリを確認し、アプリ名の下に表示されている アプリ ID をメモしておく

アプリ ID は、ca-app-pub-数字列~数字列 というフォーマットです。

Info.plist への追加

確認した アプリ ID を、Xcode プロジェクトの Info.plist に追加設定する必要があります。

以下の Key, Value で追加する必要があります。

  • Key : GADApplicationIdentifier
  • Value: 先ほど確認した アプリ ID

Info.plist を [Open As] - [Source Code] で開いた時の一番下に追加すると簡単に追加できます。

コード

...(省略)...
	GADApplicationIdentifier                       
	ca-app-pub-1234567890123456~1234567890   


続いて必要なコードを追加していきます。

開発環境で、コード追加

おおきく2つのステップになります。

  • Firebase 等の初期化
  • 広告ビューの追加

Firebase 等の初期化

Google のドキュメントでは、AppDelegate に追加と書かれていますが、Xcode プロジェクトの設定で、Life Cycle に SwiftUI を選択していると、AppDelegate が生成されません。

以下のように、AppDelegate を設定してから、必要コードを記述する必要があります。

AppDelegate クラスの設定。@main 指定されている App に準拠する struct の中で以下のように定義します。

example code

@main
struct MeetingTimeApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
  ...
}

指定されたクラスが、AppDelegate として使われるようになります。

AppDelegate クラスには、application(didFinishLaunchingWithOptions:) に、初期化コードを記述します。

AppDelegate

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        // (1)
        FirebaseApp.configure()
        // (2)
        GADMobileAds.sharedInstance().start(completionHandler: nil)
        return true
    }
}
コード解説
  1. Firebase の初期化です
  2. AdMob の初期化です

ここで一度、コードをコンパイルして動作することを確認しておくと良いです。

Xcode のログも確認して、初期化でエラーが発生していないことを確認してください(様々なログが表示されるのは、期待通りです。)

広告ビューの追加

2つのステップに分かれます

  • 広告 ID の確認
  • 広告ビューの追加

広告 ID の確認

広告 ID も、Admob で確認します。

  • Admob にログイン
  • サイドバーで [アプリ] をクリック
  • でてくるポップアップメニューから[すべてのアプリを表示] をクリック
  • 新しく追加されているアプリに登録されている 広告ユニットをクリック
  • リストされている広告ユニットのうち、使用する広告ユニット ID を記録する

広告ユニット ID は、ca-app-pub-数字列/数字列 というフォーマットです。

広告ビューの追加

Google の広告Viewは、UIView を継承したクラスとして提供されています。

SwiftUI で使うには、UIViewRepresentable を使って wrap する必要があります。

以下のような AdBanner を作って使っています。

AdBanner.swift

//
//  AdBanner.swift
//
//  Created by Tomoaki Yagishita on 2020/03/11.
//  Copyright © 2020 SmallDeskSoftware. All rights reserved.
//

import Foundation
import SwiftUI
import GoogleMobileAds

struct AdBanner: UIViewControllerRepresentable {
  let adUnitId: String
  
  private var adSize: GADAdSize {
    // (1)
    UIDevice.current.userInterfaceIdiom == .pad ? kGADAdSizeFullBanner : kGADAdSizeLargeBanner
  }
  
  func expectedFrame() -> some View {
    let size = adSize.size
    return frame(width: size.width, height: size.height, alignment: .center)
  }
  
  func makeUIViewController(context: Context) -> UIViewController {
    let view = GADBannerView(adSize: adSize)
    
    let viewController = UIViewController()
    #if DEBUG
    view.adUnitID = "ca-app-pub-3940256099942544/2934735716" // test banner id
    #else
    view.adUnitID = adUnitId
    #endif
    view.rootViewController = viewController
    viewController.view.addSubview(view)
    viewController.view.frame.size = adSize.size
    view.load(GADRequest())
    
    return viewController
  }
  
  
  func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

(1) の箇所で、バナーの大きさを調整できます。

使う時には、引数に 広告 ID を指定します。

example code

struct AppFirstView: View {
    var body: some View {
      VStack {
        AdBanner(adUnitId: "ca-app-pub-<数字列>/<数字列>").expectedFrame()
        ...

アプリを起動して、テスト広告が表示されていれば完了です!

まとめ:AdMob をアプリに追加する方法

AdMob をアプリに追加する方法
  • Firebase コンソールで、プロジェクト・アプリを設定する
  • Firebase コンソールからダウンロードした GoogleService-Info.plist をプロジェクトに追加する
  • アプリ ID を Xcode プロジェクトの Info.plist に追加する
  • アプリ起動時に、Firebase と AdMob を初期化する
  • 広告 ID を指定して 広告View を追加する

説明は以上です。
不明な点やおかしな点ありましたら、ご連絡いただけるとありがたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です