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

SwiftUI2021

     

TAGS:

⌛️ 3 min.
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 を追加する

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

コメントを残す

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