KMP で iOS に AdMob BannerAd を表示する

前置き

KMPでバナー広告を表示するのに、iOSが相当手間取ったのでメモ。Admobアカウント取得済、広告ID取得済の前提

設定

CocoaPodsでやる方法が多く紹介されていますが、SPMでできるので、こちらのほうが楽。
Xcodeで File > Add Packages... を開き、以下URLで検索し、AdMobのパッケージをダウンロード。

https://github.com/googleads/swift-package-manager-google-mobile-ads.git

Info.plistに以下を追加

展開

```plist:Info.plist GADApplicationIdentifier ca-app-pub-xxxxx~yyyy // your pub id. SKAdNetworkItems SKAdNetworkIdentifier cstr6suwn9.skadnetwork SKAdNetworkIdentifier 4fzdc2evr5.skadnetwork SKAdNetworkIdentifier 2fnua5tdw4.skadnetwork SKAdNetworkIdentifier ydx93a7ass.skadnetwork SKAdNetworkIdentifier 5a6flpkh64.skadnetwork SKAdNetworkIdentifier p78axxw29g.skadnetwork SKAdNetworkIdentifier v72qych5uu.skadnetwork SKAdNetworkIdentifier c6k4g5qg8m.skadnetwork SKAdNetworkIdentifier s39g8k73mm.skadnetwork SKAdNetworkIdentifier 3qy4746246.skadnetwork SKAdNetworkIdentifier 3sh42y64q3.skadnetwork SKAdNetworkIdentifier f38h382jlk.skadnetwork SKAdNetworkIdentifier hs6bdukanm.skadnetwork SKAdNetworkIdentifier prcb7njmu6.skadnetwork SKAdNetworkIdentifier v4nxqhlyqp.skadnetwork SKAdNetworkIdentifier wzmmz9fp6w.skadnetwork SKAdNetworkIdentifier yclnxrl5pm.skadnetwork SKAdNetworkIdentifier t38b2kh725.skadnetwork SKAdNetworkIdentifier 7ug5zh24hu.skadnetwork SKAdNetworkIdentifier 9rd848q2bz.skadnetwork SKAdNetworkIdentifier n6fk4nfna4.skadnetwork SKAdNetworkIdentifier kbd757ywx3.skadnetwork SKAdNetworkIdentifier 9t245vhmpl.skadnetwork SKAdNetworkIdentifier 4468km3ulz.skadnetwork SKAdNetworkIdentifier 2u9pt9hc89.skadnetwork SKAdNetworkIdentifier 8s468mfl3y.skadnetwork SKAdNetworkIdentifier av6w8kgt66.skadnetwork SKAdNetworkIdentifier klf5c3l5u5.skadnetwork SKAdNetworkIdentifier ppxm28t8ap.skadnetwork SKAdNetworkIdentifier 424m5254lk.skadnetwork SKAdNetworkIdentifier uw77j35x4d.skadnetwork SKAdNetworkIdentifier 578prtvx9j.skadnetwork SKAdNetworkIdentifier 4dzt52r2t5.skadnetwork SKAdNetworkIdentifier e5fvkxwrpn.skadnetwork SKAdNetworkIdentifier 8c4e2ghe7u.skadnetwork SKAdNetworkIdentifier zq492l623r.skadnetwork SKAdNetworkIdentifier 3qcr597p9d.skadnetwork ```

commonMain

新規作成

Ads.kt

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
expect fun AdBannerView(
    modifier: Modifier = Modifier,
)

iosMain

新規作成

Ads.kt

import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.UIKitInteropProperties
import androidx.compose.ui.viewinterop.UIKitView
import `your package`.generateIOSBanner

@Composable
actual fun AdBannerView(
    modifier: Modifier,
) {
    UIKitView(
        factory = {
            generateIOSBanner().view
        },
        modifier = modifier
            .fillMaxWidth()
            .defaultMinSize(minHeight = 50.dp)
            .height(50.dp),
        update = { },
        properties = UIKitInteropProperties(
            isInteractive = true,
            isNativeAccessibilityEnabled = true
        )
    )
}

修正

MinViewController.kt

import androidx.compose.runtime.remember
import androidx.compose.ui.window.ComposeUIViewController
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.SupervisorJob
+ import platform.UIKit.UIViewController

+ lateinit var IOSBanner: () -> UIViewController

+ fun generateIOSBanner(): UIViewController {
+    return IOSBanner()
+ }

fun MainViewController() = ComposeUIViewController(
+    configure = {
+        enforceStrictPlistSanityCheck = false
+    }
) {
    App()
}

iosApp

新規作成

BannerAdView.swift

import Foundation
import SwiftUI
import GoogleMobileAds
import UIKit
import SwiftUI

struct BannerAdView: UIViewRepresentable {
    func makeUIView(context: Context) -> BannerView {
        
        let bannerView = BannerView()
        bannerView.adUnitID = "ca-app-pub-xxxxxxxxx/yyyyyyy" // your ad ID
        
        if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
           let rootViewController = windowScene.windows.first?.rootViewController {
            bannerView.rootViewController = rootViewController
        }
        
        let request = Request()
        bannerView.load(request)
        return bannerView
    }
    
    func updateUIView(_ uiView: BannerView, context: Context) {}
}

修正

ContentView.swift

import UIKit
import SwiftUI
import ComposeApp

struct ComposeView: UIViewControllerRepresentable {
+    init() {
+        MainViewControllerKt.IOSBanner = {
+            let adBannerView = VStack {
+                BannerAdView()
+            }
+            return UIHostingController(rootView: adBannerView)
+        }
+    }
+    
    func makeUIViewController(context: Context) -> UIViewController {
        MainViewControllerKt.MainViewController()
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

struct ContentView: View {
    var body: some View {
        ComposeView()
            .ignoresSafeArea(.keyboard) // Compose has own keyboard handler
    }
}

修正

iOSApp.swift

import SwiftUI
+import GoogleMobileAds

@main
struct iOSApp: App {
+    init() {
+        MobileAds.shared.start(completionHandler: nil as GADInitializationCompletionHandler?)
+    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

終わりに

情報が古いのか公式記載の方法でやるとエラーになって苦慮しました。
Androidは数行追加で終わるのに対して、iOSは大変ですね。