AdMobのアダプティブバナーをJetpack ComposeとSwiftUIで使用する

kyamada,•JetpackComposeSwiftUIAdMobアダプティブバナー
Back

概要

Admob のアダプティブバナー (opens in a new tab)は次世代のレスポンシブ広告です。

バナー広告の高さが固定されておらず、広告の幅に応じて最適な高さが決定されます。

最適なサイズで広告が表示されることにより掲載結果が向上し、広告収入も増加します。

ただし、ライブラリには Jetpack Compose や SwiftUI 用のアダプティブバナーは用意されていないので、使用するには一工夫必要になります。

以下に Jetpack Compose と SwiftUI での実装方法を紹介します。

Jetpack Compose (Android)

Jetpack Compose でアダプティブバナーを利用するためには、AndroidView コンポーザブル (opens in a new tab)を使用します。

アダプティブバナーの実装

AdmobBannerView.kt
import android.content.Context
import android.content.res.Resources
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.platform.LocalContext
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.viewinterop.AndroidView
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdSize
import com.google.android.gms.ads.AdView
import com.kyamada.listentonovels.androidApp.BuildConfig
import com.kyamada.listentonovels.androidApp.model.Const
import com.kyamada.listentonovels.androidApp.ui.compose.EmptyView
 
@Composable
fun AdmobBannerView() {
    if (LocalInspectionMode.current) {
        // プレビュー時は表示しない
        return EmptyView()
    }
    val displayMetrics = Resources.getSystem().displayMetrics
    val width = (displayMetrics.widthPixels / displayMetrics.density).toInt()
    val adSize = getAdSize(LocalContext.current, width)
    val heightDp = with(LocalDensity.current) {
        adSize.getHeightInPixels(LocalContext.current).toDp()
    }
    AndroidView(
        modifier = Modifier
            .fillMaxWidth()
            .height(heightDp),
        factory = { context ->
            val adView = AdView(context)
            adView.setAdSize(adSize)
            adView.adUnitId = getAdUnitId()
            adView.loadAd(AdRequest.Builder().build())
            adView
        },
    )
}
 
private fun getAdSize(context: Context, width: Int): AdSize {
    return if (Const.IS_BANNER_HIDDEN) {
        AdSize(width, 0)
    } else {
        AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)
    }
}
 
private fun getAdUnitId(): String {
    return if (BuildConfig.DEBUG) {
        "ca-app-pub-3940256099942544/6300978111" // テスト用
    } else {
        "YOUR_AD_UNIT_ID" // 本番用
    }
}
Const.kt
object Const {
    /** バナー広告を非表示にする場合はtrue */
    const val IS_BANNER_HIDDEN = false
}

使用例

Column(modifier = Modifier.fillMaxSize()) {
    ...
    AdmobBannerView()
}

SwiftUI (iOS)

SwiftUI でアダプティブバナーを利用するためには、UIViewRepresentable (opens in a new tab)を使用します。

アダプティブバナーの実装

AdmobBannerView.swift
import SwiftUI
import GoogleMobileAds
 
struct AdmobBannerView: UIViewRepresentable {
    let adSize: GADAdSize
 
    func makeUIView(context: Context) -> GADBannerView {
        let bannerView = GADBannerView(adSize: GADAdSizeBanner)
        bannerView.adUnitID = getAdUnitId()
        bannerView.rootViewController = UIWindow.getWindow()?.rootViewController
        bannerView.adSize = adSize
        bannerView.load(GADRequest())
        return bannerView
    }
 
    func updateUIView(_ uiView: GADBannerView, context: Context) {
    }
 
    static func getAdSize(width: CGFloat) -> GADAdSize {
        if Const.IsBannerHidden {
            return GADAdSize()
        } else {
            return GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width)
        }
    }
 
    private func getAdUnitId() -> String {
        if Const.Env == Const.EnvDevelopment {
            return "ca-app-pub-3940256099942544/2934735716" // テスト用
        } else {
            return "YOUR_AD_UNIT_ID" // 本番用
        }
    }
}
Const.swift
import Foundation
import UIKit
 
class Const : NSObject {
    static let EnvDevelopment = "development"
    static let EnvProduction  = "production"
 
    #if DEBUG
    static let Env = EnvDevelopment
    /// バナー広告を非表示にする場合はtrue
    static let IsBannerHidden = false
    #else
    static let Env = EnvProduction
    static let IsBannerHidden = false
    #endif
}

使用例

HomeView.swift
let adSize = AdmobBannerView.getAdSize(width: UIScreen.screenWidth)
AdmobBannerView(adSize: adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)

関連記事

© 品川アプリ.RSS