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

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

この記事からわかること

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

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

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

Google AdMobとは?

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

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

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

広告ユニット

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

Google AdSenseのホーム画面

バナー

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

インタースティシャル

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

ネイティブ

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

リワード

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

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

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

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

流れ

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

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

AdMobのアカウント登録方法

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

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

【SwiftUI】AdMobを使って広告を実装する方法

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

【SwiftUI】AdMobを使って広告を実装する方法

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

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

Google AdMobのホーム画面

AdMobにアプリを登録

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

Google AdMobにアプリを登録

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

Google AdMobにアプリを登録

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

Google AdMobにアプリを登録

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

Google AdSenseの広告ユニットを追加する

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

Google AdSenseの広告ユニットを追加する

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

Google AdSenseの広告ユニットを追加する

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)の編集はここから可能になっています。

SwiftプロジェクトのInfo.plistにアプリIDキーを追加する

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

追加する値1

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

追加する値2

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

Google-Mobile-Ads-SDKの初期化

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

初期化処理はGADMobileAds.sharedInstanceメソッドを呼びだして実装します。この処理はなるべく早く実行されることが推奨されているのでプロジェクト内の「プロジェクト名App.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とは?

バナーView構造体の実装

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


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を設置するだけです。

AdMobBannerView()

設置ができたらApp Storeに公開しましょう。公開する手順は以下を参考にしてください。

Swift UIでの実装方法は載っていませんがUIKitでの実装方法は公式から解説されています。このコードを流用すればSwift UIでも実装可能です。バナー以外の「インタースティシャル」、「ネイティブ」、「リワード」なども解説されているので見てみてください。

公開されたAppStore情報をAdMobに入力

アプリが公開されたらAppStore情報をAdMobに登録していきます。これをしないと審査が開始されないので注意してください。

  1. AdMobにログイン
  2. サイドバーの「アプリ」をクリック
  3. 対象のアプリをクリック
  4. アプリの設定」をクリック

すると以下の画面になります。

公開されたAppStore情報をAdMobに入力
  1. App Store」の右端にある「追加」をクリック
  2. 対象アプリをApp Store内で検索
  3. 対象アプリのURL(形式:[http://apps.apple.com/<国>/app/<アプリ名>/id<ストア ID>])をコピー
  4. URLをペーストして「検索」をクリック
公開されたAppStore情報をAdMobに入力

すると対象のアプリが出てくるので「追加」を押して「保存」を押せば完了です。

公開されたAppStore情報をAdMobに入力

これでアプリのステータスが「要審査」から「準備中」に変わっていれば成功です。

開発中のアプリにテストで広告を導入する

まだ開発途中でApp Storeへ公開せずにテストで広告を設置したい場合は注意が必要です。

開発中のアプリにテストで広告を導入する際の注意点

アプリIDと広告IDはテスト用のものを使用する

開発中のアプリに本番用のID(登録したアプリIDと広告ID)を使用し続けていると、AdMobからの広告配信を停止させられてしまう可能性があるようです。

公式サイトではテスト用のIDが公開されているので開発中はそちらを使って、本番環境(App Store)へ公開する時がだけ個人のIDを使用することを推奨しています。

本番環境との変更点1

Info.plistにキーを追加する」で入力するアプリIDはテスト用である「ca-app-pub-3940256099942544~1458002511」に変更します。

本番環境との変更点2

バナーView構造体の実装」で入力する広告ID(バナー)はテスト用である「ca-app-pub-3940256099942544/2934735716」に変更します。

広告IDは広告ユニットごとにIDが異なりますので都度確認して指定してください。

ちなみにテスト用でビルドすると以下のように表示されました。

Google AdSenseの広告ユニットを追加する

Privacy Manifest対応

アプリにAdMobを組み込む場合はプライバシーの設定を適切に行う必要があります。設定するのは以下の2箇所です。

  1. プロジェクト内に設置する「PrivacyInfo.xcprivacy」
  2. App Store Connectで申請する際に設定する「アプリのプライバシー」

それぞれに設定する値は同じですので公式のデータ開示要件を参考に設定する必要があります。

公式リファレンス:Apple App Store のデータ開示要件

プロジェクト内に設置する「PrivacyInfo.xcprivacy」

2024年春よりPrivacy Manifest対応としてプロジェクト内に「PrivacyInfo.xcprivacy」の設置が必須になりました。ここに必要なプライバシー情報を追加しておきます。

【Xcode/iOS】Privacy Manifestsに対応する方法!PrivacyInfo.xcprivacyとは

App Store Connectで申請する際に設定する「アプリのプライバシー」

App Store Connectで申請する際に「アプリのプライバシー」からも同様の値を設定しておきます。

【Xcode/iOS】Privacy Manifestsに対応する方法!PrivacyInfo.xcprivacyとは

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

私がSwift UI学習に使用した参考書

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index