【SwiftUI】delegateをより深く理解してGoogle Mobile SDKと広告をSwiftUIアプリに統合する

Google AdMob 広告をSwiftUIに実装する

はじめに

・最下部に記載してある

Google for Developers. “SwiftUI”. Google AdMob MobileAds SDK(iOS)

の前提条件をチェックした方が対処となります。
まずは、そちらから読み進めてください。

・実装方法を確認したい方も対処となります。
【SwiftUI】delegateを理解してUIKitの機能をSwiftUIで利用する
【SwiftUI】delegateをより深く理解してUIKitの機能をSwiftUIで利用する

上記2記事も参考にしながら、読んでください。

イメージでとらえる

UIKitのカメラ機能をSwiftUIで利用可能にする

GoogleMobileAdsをSwiftUIで利用可能にする

比較

いかがでしょうか。登場する役者は同じではないでしょか?

補足ですが、一つ目のBigカンパニーはUIImagePickerControllerクラスになります。
どのに定義されているかですが、UIKitの機能として定義されています。Xcodeで選択して、コマンドキーで”Jump to Definition”してみてください。そこへとぶことができます。
プロトコルも同様です。

実装

それでは、実際に実装していきます。

下記に参考と照らし合わせながら、進めていきます。

Step 1 ファイル作成

ファイルの作成。任意の名前.swiftで ファイルを作成します。
(”コマンド + N” で ”Swift File” を作成できます。)

Step 2 広告の幅を決める。

作成したファイルに下記のコードを入力します。

// Delegate methods for receiving width update messages.

protocol BannerViewControllerWidthDelegate: AnyObject {
  func bannerViewController(_ bannerViewController: BannerViewController, didUpdate width: CGFloat)
}

続いて、下記の追加してください。プロトコルとは分けてください。

class BannerViewController: UIViewController {
  weak var delegate: BannerViewControllerWidthDelegate?

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    // Tell the delegate the initial ad width.
    delegate?.bannerViewController(
      self, didUpdate: view.frame.inset(by: view.safeAreaInsets).size.width)
  }

  override func viewWillTransition(
    to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
  ) {
    coordinator.animate { _ in
      // do nothing
    } completion: { _ in
      // Notify the delegate of ad width changes.
      self.delegate?.bannerViewController(
        self, didUpdate: self.view.frame.inset(by: self.view.safeAreaInsets).size.width)
    }
  }
}

以上でプロトコルとBigカンパニーの定義が終わりました。

Step 3 構造体の作成

必要なコードを追加します。同じファイル内ですが、プロトコルとBigカンパニーとは分けて作成してください(上記のイメージのように)

struct BannerView: UIViewControllerRepresentable {
    @State private var viewWidth: CGFloat = .zero
    private let bannerView = GADBannerView()
//    private let adUnitID = "実際のナンバーを記載してください"
//下記はテスト
    //バナー広告
//    private let adUnitID = "ca-app-pub-3940256099942544/2934735716"
    //アダプティブバナー広告
    private let adUnitID = "ca-app-pub-3940256099942544/2435281174"
    
    
    func makeUIViewController(context: Context) -> some UIViewController {
        let bannerViewController = BannerViewController()
        bannerView.adUnitID = adUnitID
        bannerView.rootViewController = bannerViewController
        bannerView.delegate = context.coordinator
        bannerViewController.view.addSubview(bannerView)
        // Tell the bannerViewController to update our Coordinator when the ad
//        2023/-7-12
        NSLayoutConstraint.activate([
            bannerView.topAnchor.constraint(
            equalTo: bannerViewController.view.safeAreaLayoutGuide.topAnchor),
          bannerView.centerXAnchor.constraint(equalTo: bannerViewController.view.centerXAnchor),
        ])
        // width changes.
        bannerViewController.delegate = context.coordinator
        
        return bannerViewController
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        guard viewWidth != .zero else { return }
        
        // Request a banner ad with the updated viewWidth.
        bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
        bannerView.load(GADRequest())
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
      }
    
    internal class Coordinator: NSObject, BannerViewControllerWidthDelegate, GADBannerViewDelegate {
        let parent: BannerView

        init(_ parent: BannerView) {
          self.parent = parent
        }

        // MARK: - BannerViewControllerWidthDelegate methods

        func bannerViewController(_ bannerViewController: BannerViewController, didUpdate width: CGFloat) {
          // Pass the viewWidth from Coordinator to BannerView.
          parent.viewWidth = width
        }
        
        // MARK: - GADBannerViewDelegate methods

            func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
              print("\(#function) called")
            }

            func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
              print("\(#function) called")
            }

            func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
              print("\(#function) called")
            }

            func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
              print("\(#function) called")
            }

            func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
              print("\(#function) called")
            }

            func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
              print("\(#function) called")
            }
      }
    
}

あとは、これを呼び出すだけです。

Step 4 呼び出し

下記のように、表示した場所でBannerView()を生成してください。

struct ContentView: View {

  var body: some View {
    BannerView()
  }
}

まとめ

その他の広告表示方法も下記の参考資料より確認できます。

まだまだ勉強中です。誤りがありましたらご連絡していただけたら幸いです。

参考

Google for Developers. “SwiftUI”. Google AdMob MobileAds SDK(iOS)

https://developers.google.com/admob/ios/swiftui?hl=ja (参照 2023-08-17)

藤 治仁・小林 加奈子・小林 由憲. SwiftUI 対応 たった2日でマスターできるiPhone アプリ開発集中講座 Xcode 13/iOS 15/Swift 5.5対応. ソシム株式会社、2021、p304-p335.


コメント

タイトルとURLをコピーしました