2022/8/3

【SwiftUI】AdMobを使って広告を実装する方法!バナーViewの作成

この記事からわかること

Swift UIで開発したアプリに広告を実装する方法
Google-Mobile-Ads-SDKの導入方法と使い方
AdMobの導入方法と使い方
AdMobで広告を設置する流れ
バナー広告のView構造体の作成方法
開発中のアプリにテストで広告を導入する

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIを使ってiOSアプリを作成後にアプリ内に広告を実装したいものです。今回はGoogle AdMobを使ってアプリ内に広告を設置する流れをまとめていきたいと思います。

Google AdMobとは？

Google AdMob

AdMob(アドモブ)はGoogleが提供しているiOSやAndroidなどのモバイルアプリに広告を設置できるサービスです。

アプリの画面上に広告を設置する枠をAdMob側に提供することで利用しているユーザーの情報に基づいた広告を自動で配信してくれます。

Webページ上に広告を付与できるGoogle AdSenseと基本的なサービス内容、使い方は同じです。

おすすめ記事：はてなブログでAdSense合格のためにやるべきこと【14選】

広告ユニット

AdMobでは4つの種類から広告ユニットを選択することができます。

バナー

アプリ画面の上部や下部に設置するバナー型の広告。常に表示され一定時間ごとに内容は更新されていく。

インタースティシャル

画面遷移や流れの間などに全画面に表示される広告。閉じるボタンを押さないと消えません。

ネイティブ

アプリのデザインに溶け込ませることができるようにカスタマイズ性を有した広告。

リワード

数十秒の動画を視聴してもらう広告。ポイントやスタミナなど報酬を与える代わりに広告を見てもらう処理を実装できる。

Swiftで開発したアプリへの広告実装方法

Swift UIフレームワークを使ってアプリ開発している場合にGoogle AdMobを使用して広告を付与する方法をまとめていきます。

また今回は本番環境での広告の実装方法を最初に解説していきます。開発中のテストで表示したい場合は少し注意点があるので後述している「開発中のアプリにテストで広告を導入する」をご覧ください。

流れ

AdMobのアカウント登録
AdMobにアプリを登録
CocoaPodsツールの導入
Mobile Ads SDKライブラリの導入
Info.plistにキーを追加する
Google-Mobile-Ads-SDKの初期化
Swift UIでの広告の実装
公開されたApp Store情報をAdMobに入力

実際の流れは公式サイトでも解説されていますがSwift UIを使用した場合ではないので少しやり方が異なりました。

Google AdMob：Mobile Ads SDK（iOS）：スタートガイド

AdMobのアカウント登録方法

まずはAdMobのアカウントがないと始まらないので登録していきます。

スタートガイド：AdMob に申し込む

上記のリンクから簡単に登録が可能です。Google AdSenseのアカウントの有無で登録手順も変わるので自分の状況に合わせて進みます。

Google AdSenseのアカウントを既に登録している場合は登録情報を確認して、問題がなければ「AdMobアカウントを作成」をクリックします。

手順に沿って作成したらホーム画面に移動します。

Google AdSenseのアカウントを持っていない場合はホーム画面のサイドメニュー＞「お支払い」から支払い情報を登録しておいてください。

AdMobにアプリを登録

ホーム画面のサイドバーから「アプリ」＞「アプリの追加」をクリックします。アプリ自体はApp Storeに公開していなくても登録できるので「アプリはサポートされているアプリストアに登録されていますか？」は「いいえ」を選択して「次へ」で進んでいきます。

次の画面でアプリ名を登録し「アプリを追加」をクリックして登録していきます。

これで登録が完了しました。あとは後述しているプロジェクトに広告を実装するコードを追加してApp Storeに公開後ストア情報を入力すると審査が開始されます。

続いて作成したい広告ユニットを選び作成します。

好きな広告ユニットを選択して広告名を入力して作成します。

すると以下のように「アプリID」と「広告ID」が表示されます。この2つのIDは後ほど必要になりますが、いつでも再確認できるので閉じてしまっても大丈夫です。

CocoaPodsツールの導入

AdMobをプロジェクトに実装するには「 Google-Mobile-Ads-SDK」ライブラリの導入が必要です。ライブラリを導入するためにライブラリ管理ツールであるCocoaPodsの導入を最初にしておきます。

ここからはターミナルを使用します。ターミナルを起動したら以下のコマンドを順番に実行していきます。

// CocoaPodsのインストール
$ sudo gem install cocoapods
// Swiftプロジェクトへ移動
$ cd プロジェクトまでのパス
// プロジェクトへCocoaPodsを導入(PodFileの生成)
$ pod init

CocoaPodsのインストール方法と使い方はこちらに詳しくまとめていますので興味があればご覧ください。

Google-Mobile-Ads-SDKの導入

プロジェクトにCocoaPodsを使う準備が完成したら実際に「Google-Mobile-Ads-SDK 」を導入していきます。

プロジェクト内に生成された「PodFile」を開き、target '(プロジェクト名)' do〜endの間に以下のコードを追加します。

pod 'Google-Mobile-Ads-SDK'

「PodFile」の全体

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

target '(プロジェクト名)' do

  use_frameworks!

  pod 'Google-Mobile-Ads-SDK' 

end

追加したらターミナルに戻りpod installコマンドを実行してライブラリを導入していきます。

$ pod install

Analyzing dependencies
Downloading dependencies
Installing Google-Mobile-Ads-SDK (9.8.0)
Installing GoogleAppMeasurement (9.3.0)
Installing GoogleUserMessagingPlatform (2.0.0)
Installing GoogleUtilities (7.7.0)
Installing PromisesObjC (2.1.1)
Installing nanopb (2.30909.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use `bill.xcworkspace` for this project from now on.
Pod installation complete! There is 1 dependency from the Podfile and 6 total pods installed.

上記のように出力されれば導入は成功です。もしここで以下のようなエラーが発生した場合は解決方法をこちらの記事からご覧ください。

 [BUG] Bus Error at 0x0000000102f38000 ruby 2.6.8p205 (2021-07-07 revision 67951) [universal.arm64e-darwin21]

Info.plistにキーを追加する

続いてプロジェクトにキーを追加します。従来の「プロジェクト名.xcodeproj」ではなくCocoaPodsによって新しく生成された「プロジェクト名.xcworkspace」を使用してXcodeを起動します。

左側のナビゲータエリアから「プロジェクト」をクリックします。Swift UIでは「Info.plist」(Information Property List)の編集はここから可能になっています。

この中にKey、Type、Valueに適切な値を2つ追加していきます。

追加する値1

Key：GADApplicationIdentifier
Type：String
Value：ca-app-pub-xxxxxxxxxxxxxxxxx~xxxxxxx

GADApplicationIdentifierのValueに追加するのはAdMobでアプリを登録をすると生成されるアプリIDです。ホーム画面のサイドバーから「アプリ」＞「すべてのアプリを表示」にある対象アプリの「アプリID列」から確認できます。

追加する値2

Key：SKAdNetworkIdentifier
Type：String
Value：cstr6suwn9.skadnetwork

SKAdNetworkIdentifierのValueに追加するのはサードパーティ購入者の SKAdNetwork 識別子です。これを入れないと以下の記事のようなエラーが出てしまうので忘れないようにしてください。このキーで設定することの意味や値の種類は以下の記事で紹介しているので参考にしてください

Google-Mobile-Ads-SDKの初期化

アプリが広告を読み込む前に Google-Mobile-Ads-SDKの初期化処理を実行しなければいけません。

初期化処理はGADMobileAds.sharedInstanceメソッドを呼びだして実装します。この処理はなるべく早く実行されることが推奨されているのでプロジェクト内の「プロジェクト名App.swift」にクラスとして実装しておきます。

billApp.swift
import SwiftUI
import GoogleMobileAds

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

@main
struct billApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

このクラスは公式サイトに記載されていたものをSwiftUIでも動作するように多少修正したものです。

Swift UIでの広告の実装

Swift UIでは広告をView構造体として定義して実装していきます。AdMobはUIKitでの実装を想定して作成されているのでSwiftUiでも使用できるようにUIViewRepresentableプロトコルに準拠させて構造体を定義します。

UIViewRepresentableとは？

UIKitのUIViewをラップしてSwift UIでも使えるようにするためのプロトコル
メソッドにmakeUIViewとupdateUIViewを実装が条件
makeUIViewメソッドではラップしたUIViewのインスタンスを返す
updateUIViewメソッドは更新されるたびに呼ばれるメソッド

バナーView構造体の実装

バナー広告を実装する流れを見ていきます。まずはimport GoogleMobileAdsの読み込みを忘れずに行ってください。UIViewRepresentableプロトコルに準拠した構造体を生成し、中に必要なメソッドを定義していきます。makeUIViewメソッドではラップしたUIViewのインスタンスを返すのでした。updateUIViewメソッドに関しては特に必要ないので空にしておきます。

ContentView
import SwiftUI
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に置き換える
        banner.rootViewController = UIApplication.shared.windows.first?.rootViewController
        banner.load(GADRequest())
        return banner // 最終的にインスタンスを返す
    }

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

これで定義が完了したのであとは実際に表示させたい位置にViewを設置するだけです。