メインコンテンツへスキップ

概要

スプラッシュ広告は、アプリ起動時にスプラッシュ画面に表示される広告です。アプリのロゴと一緒に広告が表示され、自然なユーザー体験を提供します。

特徴

  • アプリ起動時の自然な広告露出
  • アプリロゴでブランドイメージを維持
  • 固定広告サイズ: 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
    }
}
shouldSkiptrueを返すと、広告はロードされずメイン画面に直接移動します。

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アセットにアプリロゴを追加します:
  1. Xcodeを開き、Runner/Assets.xcassetsに移動
  2. splash_logoという名前の新しいImage Setを追加
  3. ロゴ画像を追加(@1x、@2x、@3x)
推奨サイズ: 200×200〜300×300ポイント

ステップ4: Info.plistの設定(オプション)

SceneDelegateを使用する場合、Info.plistにscene設定があることを確認します:
ios/Runner/Info.plist
<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.jsonandroid/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が正しく作成されているか確認
  • ファイル名が正確にactivity_adrop_splash_ad.xmlであるか確認
  • @+id/adrop_splash_ad_image IDを持つImageViewがあるか確認
  • クリーンビルド後に再実行(Build > Clean Project > Rebuild)

次のステップ