スプラッシュ広告は、アプリ起動時にスプラッシュ画面に表示される広告です。アプリのロゴと一緒に広告が表示され、自然なユーザー体験を提供します。
- アプリ起動時の自然な広告露出
- アプリロゴでブランドイメージを維持
- 固定広告サイズ: 360dp × 270dp (Android), 360px × 270px (iOS)
- 画像広告対応
開発中はテストユニットIDを使用してください: PUBLIC_TEST_UNIT_ID_SPLASH
実装方法
Flutterアプリのスプラッシュ広告は、ネイティブプラットフォームの設定を通じて実装されます。スプラッシュ広告はFlutterエンジンが完全に初期化される前に表示されるため、AndroidとiOSのネイティブレベルで設定する必要があります。
Flutterアプリは、Flutterがロードされる前に表示されるネイティブスプラッシュ画面を使用します。Adropスプラッシュ広告は、このネイティブスプラッシュフローと統合されます。
Android設定
ステップ1: strings.xmlの設定
android/app/src/main/res/values/strings.xmlに以下の設定を追加します。
android/app/src/main/res/values/strings.xml
<resources>
<!-- アプリ名 -->
<string name="app_name">My App</string>
<!-- スプラッシュ広告ユニットID -->
<string name="adrop_splash_ad_unit_id" translatable="false">YOUR_SPLASH_UNIT_ID</string>
<!-- スプラッシュ終了後に遷移するActivity -->
<string name="adrop_splash_ad_next_activity" translatable="false">com.yourcompany.yourapp.MainActivity</string>
</resources>
テスト時はYOUR_SPLASH_UNIT_IDの代わりにPUBLIC_TEST_UNIT_ID_SPLASHを使用してください。
ステップ2: スプラッシュロゴ画像の追加
アプリロゴをandroid/app/src/main/res/drawable/フォルダに追加します。
android/app/src/main/res/drawable/splash_logo.png
推奨サイズ: 288dp × 288dp (@2x: 576px, @3x: 864px)
ステップ3: AndroidManifest.xmlの設定
AdropSplashAdActivityをランチャーアクティビティとして設定します。
android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:name="${applicationName}"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher">
<!-- スプラッシュ広告Activity -->
<activity
android:name="io.adrop.ads.splash.AdropSplashAdActivity"
android:theme="@style/LaunchTheme"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- メインActivity (Flutter) -->
<activity
android:name=".MainActivity"
android:exported="false"
android:launchMode="singleTop"
android:taskAffinity=""
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme" />
</activity>
</application>
</manifest>
AdropSplashAdActivityにはandroid:exported="true"が必須です。MainActivityからランチャーintent-filterを削除してください。
ステップ4: スプラッシュテーマの設定
android/app/src/main/res/values/styles.xmlにスプラッシュテーマを追加または更新します。
android/app/src/main/res/values/styles.xml
<resources>
<!-- スプラッシュ画面付きのランチテーマ -->
<style name="LaunchTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@android:color/white</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
<item name="postSplashScreenTheme">@style/NormalTheme</item>
</style>
<!-- 通常テーマ -->
<style name="NormalTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="android:windowBackground">?android:colorBackground</item>
</style>
</resources>
ステップ5: レイアウトのカスタマイズ(オプション)
カスタムレイアウトを使用するには、android/app/src/main/res/layout/にactivity_adrop_splash_ad.xmlを作成します。
android/app/src/main/res/layout/activity_adrop_splash_ad.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:paddingHorizontal="24dp"
android:fitsSystemWindows="true">
<!-- アプリロゴ(中央) -->
<ImageView
android:src="@drawable/splash_logo"
android:layout_width="288dp"
android:layout_height="288dp"
android:scaleType="fitXY"
android:layout_centerInParent="true"/>
<!-- 広告エリア(下部) - 必須 -->
<ImageView
android:id="@+id/adrop_splash_ad_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
android:id="@+id/adrop_splash_ad_image"を持つImageViewは必須です。このビューに広告が表示されます。
ステップ6: 表示時間の設定(オプション)
デフォルトの表示時間を変更するには、android/app/src/main/res/values/integers.xmlを作成します。
android/app/src/main/res/values/integers.xml
<resources>
<!-- 広告リクエストタイムアウト(ミリ秒、500〜3000) -->
<integer name="adrop_splash_ad_request_timeout">1000</integer>
<!-- 広告表示時間(ミリ秒、500〜3000) -->
<integer name="adrop_splash_ad_max_timeout">2000</integer>
</resources>
ステップ7: AdropSplashAdリスナーの実装(オプション)
スプラッシュ広告イベントを受信するには、Applicationクラスでリスナーを設定します。
import android.app.Application
import io.adrop.ads.Adrop
import io.adrop.ads.splash.AdropSplashAd
import io.adrop.ads.splash.AdropSplashAdListener
import io.adrop.ads.model.AdropErrorCode
class MainApplication : Application() {
private lateinit var splashAd: AdropSplashAd
override fun onCreate() {
super.onCreate()
// SDK初期化
Adrop.initialize(this, production = false)
// スプラッシュ広告の設定
splashAd = AdropSplashAd(this) { splashAd ->
// shouldSkip: スプラッシュ広告をスキップするかどうかを決定
// trueを返すと広告をスキップしてメイン画面に直接移動
checkShouldSkipSplash()
}
splashAd.splashAdListener = object : AdropSplashAdListener {
override fun onAdReceived(ad: AdropSplashAd) {
println("スプラッシュ広告受信成功")
}
override fun onAdFailedToReceive(ad: AdropSplashAd, errorCode: AdropErrorCode) {
println("スプラッシュ広告受信失敗: $errorCode")
}
override fun onAdImpression(ad: AdropSplashAd) {
println("スプラッシュ広告インプレッション")
}
override fun onAdClose(ad: AdropSplashAd, impressed: Boolean) {
println("スプラッシュ広告クローズ - impressed: $impressed")
}
}
}
private fun checkShouldSkipSplash(): Boolean {
// 例:ディープリンクで進入した場合や特定の条件でスプラッシュをスキップ
return false
}
}
shouldSkipがtrueを返すと、広告はロードされずメイン画面に直接移動します。
iOS設定
ステップ1: AppDelegateの設定
ios/Runner/AppDelegate.swiftを更新してスプラッシュ広告を表示します。
ios/Runner/AppDelegate.swift
import UIKit
import Flutter
import AdropAds
@main
@objc class AppDelegate: FlutterAppDelegate {
var splashAdViewController: AdropSplashAdViewController?
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
// Adrop SDKの初期化
Adrop.initialize(production: false)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
ステップ2: SceneDelegateの設定(iOS 13+)
SceneDelegateを使用するアプリの場合、ios/Runner/SceneDelegate.swiftを更新します。
ios/Runner/SceneDelegate.swift
import UIKit
import Flutter
import AdropAds
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(
_ scene: UIScene,
willConnectTo session: UISceneSession,
options connectionOptions: UIScene.ConnectionOptions
) {
guard let windowScene = (scene as? UIWindowScene) else { return }
window = UIWindow(windowScene: windowScene)
#if DEBUG
let splashUnitId = "PUBLIC_TEST_UNIT_ID_SPLASH"
#else
let splashUnitId = "YOUR_PRODUCTION_SPLASH_UNIT_ID"
#endif
// スプラッシュ広告ビューコントローラーの作成
let splashViewController = AdropSplashAdViewController(
unitId: splashUnitId,
logoImage: UIImage(named: "splash_logo")
)
splashViewController.delegate = self
splashViewController.displayDuration = 3.0
window?.rootViewController = splashViewController
window?.makeKeyAndVisible()
}
}
// MARK: - AdropSplashAdDelegate
extension SceneDelegate: AdropSplashAdDelegate {
func onAdClose(impressed: Bool) {
print("スプラッシュ広告クローズ - impressed: \(impressed)")
}
func onAdReceived(_ ad: AdropSplashAd) {
print("スプラッシュ広告受信完了")
}
func onAdFailedToReceive(_ ad: AdropSplashAd, _ errorCode: AdropErrorCode) {
print("スプラッシュ広告受信失敗: \(errorCode)")
}
func onAdImpression(_ ad: AdropSplashAd) {
print("スプラッシュ広告インプレッション")
}
}
ステップ3: ロゴ画像の追加
iOSアセットにアプリロゴを追加します:
- Xcodeを開き、
Runner/Assets.xcassetsに移動
splash_logoという名前の新しいImage Setを追加
- ロゴ画像を追加(@1x、@2x、@3x)
推奨サイズ: 200×200〜300×300ポイント
ステップ4: Info.plistの設定(オプション)
SceneDelegateを使用する場合、Info.plistにscene設定があることを確認します:
<key>UIApplicationSceneManifest</key>
<dict>
<key>UIApplicationSupportsMultipleScenes</key>
<false/>
<key>UISceneConfigurations</key>
<dict>
<key>UIWindowSceneSessionRoleApplication</key>
<array>
<dict>
<key>UISceneConfigurationName</key>
<string>Default Configuration</string>
<key>UISceneDelegateClassName</key>
<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
</dict>
</array>
</dict>
</dict>
AdropSplashAdDelegate
| メソッド | 必須 | 説明 |
|---|
onAdClose(impressed:) | オプション | スプラッシュ広告が閉じられた時に呼び出し。impressedは広告が表示されたかどうか |
onAdReceived(_:) | オプション | 広告受信成功時に呼び出し |
onAdFailedToReceive(_:_:) | オプション | 広告受信失敗時に呼び出し |
onAdImpression(_:) | オプション | 広告インプレッション記録時に呼び出し |
ベストプラクティス
1. 適切なタイマー設定
より良いユーザー体験のために、合理的なタイムアウト値を設定します。
<!-- Android: integers.xml -->
<integer name="adrop_splash_ad_request_timeout">1000</integer>
<integer name="adrop_splash_ad_max_timeout">2000</integer>
// iOS
splashViewController.displayDuration = 3.0
2. ロゴ画像の最適化
ロード時間を最小限に抑えるため、適切なサイズでアプリロゴを準備します。
Android:
drawable-mdpi/splash_logo.png (192px × 192px)
drawable-hdpi/splash_logo.png (288px × 288px)
drawable-xhdpi/splash_logo.png (384px × 384px)
drawable-xxhdpi/splash_logo.png (576px × 576px)
drawable-xxxhdpi/splash_logo.png (768px × 768px)
iOS:
splash_logo@1x.png (200px × 200px)
splash_logo@2x.png (400px × 400px)
splash_logo@3x.png (600px × 600px)
3. 失敗処理
広告ロードが失敗してもアプリが正常に起動するようにします。
func onAdFailedToReceive(_ ad: AdropSplashAd, _ errorCode: AdropErrorCode) {
print("広告ロード失敗: \(errorCode)")
// AdropSplashAdViewControllerが自動的にonAdCloseを呼び出し
}
4. テスト/本番環境の区別
#if DEBUG
let splashUnitId = "PUBLIC_TEST_UNIT_ID_SPLASH"
let isProduction = false
#else
let splashUnitId = "YOUR_PRODUCTION_SPLASH_UNIT_ID"
let isProduction = true
#endif
Adrop.initialize(production: isProduction)
テスト
テストユニットID
開発中はテストユニットIDを使用します。
PUBLIC_TEST_UNIT_ID_SPLASH
本番リリースには必ずAdropコンソールで作成した実際のユニットIDを使用してください。テストユニットIDでは広告収益は発生しません。
トラブルシューティング
- AndroidManifest.xmlで
AdropSplashAdActivityがLAUNCHERとして設定されているか確認
android:exported="true"設定を確認
- SDK初期化が完了しているか確認
adrop_service.jsonがandroid/app/src/main/assetsフォルダにあるか確認
window.rootViewControllerが正しく設定されているか確認
- Info.plistにSceneDelegateが設定されているか確認
- SDK初期化が完了しているか確認
adrop_service.jsonがXcodeプロジェクトに追加されているか確認
- ネットワーク接続状態を確認
- ユニットIDが正しいか確認
- テスト環境で
production: false設定を確認
onAdFailedToReceiveのエラーコードを確認
adrop_splash_ad_next_activityが正しく設定されているか確認(Android)
onAdCloseデリゲート実装を確認(iOS)
- FlutterViewControllerが正しく作成されているか確認
カスタムレイアウトが適用されない(Android)
- ファイル名が正確に
activity_adrop_splash_ad.xmlであるか確認
@+id/adrop_splash_ad_image IDを持つImageViewがあるか確認
- クリーンビルド後に再実行(Build > Clean Project > Rebuild)
次のステップ