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

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

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

目次

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

事前準備

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

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

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

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

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

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

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

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

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

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

STEP
Google-Mobile-ADs-SDKの導入

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

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

  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」にカーソルを合わせて+をクリックしましょう。

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

ちなみに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 追加後)

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

STEP
Google-Mobile-SDKの実装

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

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

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」を開いて以下のコードを追加しましょう。8行目の「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()
    }
}
(シミュレーション画面)

まとめ

ということで今回でAdmobを使って自作iOSアプリに広告をつけるまでの手順を解説するシリーズは終了となります。お疲れ様でした!

今回の記事を参考にして自作アプリでお小遣いを稼いでみましょう!!(ちなみに私は雀の涙ほどしか稼げていません😭)

最後になりますが、この記事で不明な点や気になるところがあれば下のコメント欄までお願いします。それではまた!

よかったらシェアしてね!

この記事を書いた人

えだはのアバター えだは ITエンジニア

2001年生まれの♂。愛知県出身。
国立大学の情報学科を卒業後、某ユーザ系IT企業に就職。
2022年に当ブログ「えだはの部屋」を開設。
ブログ収益は100円〜1000円の間で常に低空飛行をしており、基本赤字。
将来の夢は億万長者。

コメント

コメントする

目次