SwiftUIでAdMobを導入する方法(Test編)

## 更新
バナーサイズの表記に変更がありましたので更新しました。
詳細知りたい方は[コチラ](https://developers.google.com/admob/ios/banner?hl=ja)もご覧ください。

## 今回作成するアプリ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/3372506c-1489-a667-fe9d-53d44843c3b5.png" width="400">

## はじめに
今回はSwiftUIで作成したアプリにAdMobを導入する方法についてです。
公式からも出ていますが、公式だけでは分からない人用に(自分の事ですw)この記事一本で作成できるように掲載しておこうと思いますので良ければ参考にしてみてください。

## 環境
・ /macOS Big Sur 11.3
・ SwiftUI : 2.0
・ Xcode : 12.0

## 手順
今回はSwiftUIでAdMob導入のTestを行うだけなので、FireBaseやAdMobの登録方法はありません。
次回実践編を書く予定なので実践方法を知りたい方はそちらをご覧下さい！
では下記手順になります。
1.アプリ作る
2.ターミナルで
・cocoapodsインストール
・pod file作成
・Pod file内の use_frameworks! 直下にpod ‘Google-Mobile-Ads-SDK’の追加してターミナルでpod install
・.xcworkspaceでプロジェクトを開いて
 ・Info.plistに
 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>
 を追加(このIDはテスト用)
・プロジェクトのビルド設定で、-ObjCを追加(ここ分かりづらい)
・SwiftUIだとXcode 12からAppDelegate.swiftがないのでApp.swiftを修正する
・ファイル内にAdMobを表示するViewを作成

これでTest表示程度ならできます。それぞれの手順の詳細は以下です。

## アプリを作る
今回はAdMobを表示させたいだけなのでSwiftUIのプロジェクトを新規作成するだけで問題ないです。(既存のアプリで試したい場合は既に作成されたアプリをご使用ください)

## ターミナル操作
まずターミナルを起動してcocoapodsをインストールします。
```sudo gem install cocoapods```

次にxcodeプロジェクト（.xcodeprojのファイルがある場所）のディレクトリまで移動します。
(以下イメージです)
```cd /Users/okayuuji/AdMobTest ```

次にPodfileを追加します。
```pod init```

するとファイル内にPodfileが追加されます。
![スクリーンショット 2021-03-30 21.43.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/a9c33d3e-21b7-981b-5e23-26a0e46c6852.jpeg)
このPodfileを開き
```use_frameworks!```
の下に
```pod 'Google-Mobile-Ads-SDK'```
を追加し、閉じます。

その後
```pod install```
を実行しエラーがなければ成功です！(エラーは赤字で出ます)

成功するとファイル内に.xcworkspaceの拡張子がついたファイルが追加されているのでそちらを開きます。
![スクリーンショット 2021-03-30 21.48.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/2349a9cf-bdcf-d14b-3afd-5a1c3a75ab17.jpeg)

ここまでがターミナルでの操作になります。

## Info.plist
ここからはプロジェクト内での編集になります。
まず、Info.plistにて
 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-3940256099942544~1458002511</string>
 を追加します。(このca-app-pub-3940256099942544~1458002511というIDはテスト用のID)
![スクリーンショット 2021-03-30 21.51.59.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/8a77859e-03fd-d7be-bbf9-af29d980c378.jpeg)

![スクリーンショット 2021-03-30 21.52.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/9ddfbb52-ecc5-6fa8-6f7e-6c471fe48068.jpeg)

## プロジェクトのビルド設定で、-ObjCを追加
筆者はここでつまづきました。
ここは詳細にどこにも掲載がなかったので、正直ここを詳細に掲載する為に今回記事を書いたようなものなので細かくスクショを掲載していきます。
まずは一番上にあるファイルをクリックし、Build settingsを選択し、以下の画面に行きます。
![スクリーンショット 2021-03-30 20.24.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/c856a4f9-4bd9-9fd5-8a34-c14b47e46227.jpeg)
続いて以下の部分をダブルクリックで選択リストを表示させ、リストの下にある＋を選択し、-ObjCと入力し-ObjCを追加します。
![スクリーンショット 2021-03-30 20.25.06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/00b1255a-4641-b167-8a88-e3a19b4e2dcd.jpeg)
ここまできたら後は楽勝です。
## App.swift
・SwiftUIだとXcode 12からAppDelegate.swiftがないのでApp.swiftを修正します。

```swift
import SwiftUI
import UIKit
import GoogleMobileAds

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        // Mobile Ads SDKを初期化する
        GADMobileAds.sharedInstance().start(completionHandler: nil)
        return true
    }
}

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

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
```
## ContentView.swift
```swift
import SwiftUI
import GoogleMobileAds

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
        AdMobView()
            .frame(width: 150, height: 60)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct AdMobView: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<AdMobView>) -> GADBannerView{
        let banner = GADBannerView(adSize: GADAdSizeBanner)
        
        banner.adUnitID = "ca-app-pub-3940256099942544/2934735716"
        banner.rootViewController = UIApplication.shared.windows.first?.rootViewController
        banner.load(GADRequest())
        return banner
    }
    
    func updateUIView(_ uiView: GADBannerView, context:  UIViewRepresentableContext<AdMobView>) {
    }
}
```
シュミレータ起動でいかが表示されます。(できなければ気軽にTwitterとかで連絡ください)
![Simulator Screen Shot - iPhone 11 Pro - 2021-03-30 at 20.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/6b14f0e2-0f0a-5ac1-5294-f82c3e2e7c29.png)

## まとめ
今回はtest表示だけなのでFireBaseやAdMobの登録については記載してませんが、基本上記の事ができれば実践は簡単にできると思います。(後日実践編をUPします)
またGitも掲載しておきますので必要な方はどうぞ。

https://github.com/yuujioka/AdMobTest

また参考にした記事や動画もいくつか貼っておきますので良ければそちらもご覧下さい。

https://i-app-tec.com/ios/admob.html

https://reasonable-code.com/swiftui-admob/

https://developers.google.com/admob/ios/quick-start#update_your_infoplist

https://note.com/nagiseniki/n/n01726737b0e0#ppu2h

https://www.yururiwork.net/swiftui%E3%81%A7admob%E3%83%90%E3%83%8A%E3%83%BC%E5%BA%83%E5%91%8A%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/

動画

https://www.youtube.com/watch?v=vYJjOj0pm4E