> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# スプラッシュ広告

> React Nativeアプリでスプラッシュ広告を実装する方法をご案内します。

## 概要

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

### 特徴

* アプリ起動時の自然な広告露出
* アプリロゴでブランドイメージを維持
* 固定広告サイズ: 360dp × 270dp (Android), 360px × 270px (iOS)
* 画像広告対応

<Note>
  開発中はテストユニットIDを使用してください: `PUBLIC_TEST_UNIT_ID_SPLASH`
</Note>

***

## キャッシュ動作

スプラッシュ広告はアプリ起動と同時にすぐ表示できるよう、SDKがデバイスに広告を事前キャッシュする仕組みで動作します。次回起動時にはキャッシュ済みのクリエイティブが先に表示され、同時に新しい広告をバックグラウンドでリクエストして次回起動用のキャッシュを更新します。

<Warning>
  このキャッシュ構造のため、Ad Controlコンソールでクリエイティブを**一時停止**しても、各ユーザーデバイスのキャッシュが更新されるまでは、すでにキャッシュされているクリエイティブが表示される場合があります。クリエイティブの一時停止や差し替えがユーザーに反映されるまで時間がかかる可能性があることを運用計画に織り込んでください。
</Warning>

***

## 実装方法

React Nativeアプリのスプラッシュ広告は、ネイティブプラットフォームの設定を通じて実装されます。スプラッシュ広告はReact Nativeブリッジが完全に初期化される前に表示されるため、AndroidとiOSのネイティブレベルで設定する必要があります。

<Info>
  React Nativeアプリは、JavaScriptバンドルがロードされる前に表示されるネイティブスプラッシュ画面を使用します。Adropスプラッシュ広告は、このネイティブスプラッシュフローと統合されます。
</Info>

***

## Android設定

### ステップ1: strings.xmlの設定

`android/app/src/main/res/values/strings.xml`に以下の設定を追加します。

```xml title="android/app/src/main/res/values/strings.xml" theme={null}
<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>
```

<Note>
  テスト時は`YOUR_SPLASH_UNIT_ID`の代わりに`PUBLIC_TEST_UNIT_ID_SPLASH`を使用してください。
</Note>

### ステップ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`をランチャーアクティビティとして設定します。

```xml title="android/app/src/main/AndroidManifest.xml" theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher"
        android:allowBackup="false"
        android:theme="@style/AppTheme">

        <!-- スプラッシュ広告Activity -->
        <activity
            android:name="io.adrop.ads.splash.AdropSplashAdActivity"
            android:theme="@style/SplashTheme"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- メインActivity (React Native) -->
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize"
            android:exported="false">
        </activity>

    </application>
</manifest>
```

<Warning>
  `AdropSplashAdActivity`には`android:exported="true"`が必須です。`MainActivity`からランチャーintent-filterを削除してください。
</Warning>

### ステップ4: スプラッシュテーマの設定

`android/app/src/main/res/values/styles.xml`にスプラッシュテーマを追加または更新します。

```xml title="android/app/src/main/res/values/styles.xml" theme={null}
<resources>
    <!-- アプリテーマ -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

    <!-- スプラッシュテーマ（Android 12+） -->
    <style name="SplashTheme" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@android:color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
        <item name="postSplashScreenTheme">@style/AppTheme</item>
    </style>
</resources>
```

<Note>
  `androidx.core:core-splashscreen`依存関係はAdrop SDKに含まれています。別途追加する必要はありません。
</Note>

### ステップ5: レイアウトのカスタマイズ（オプション）

カスタムレイアウトを使用するには、`android/app/src/main/res/layout/`に`activity_adrop_splash_ad.xml`を作成します。

```xml title="android/app/src/main/res/layout/activity_adrop_splash_ad.xml" theme={null}
<?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>
```

<Warning>
  `android:id="@+id/adrop_splash_ad_image"`を持つ`ImageView`は必須です。このビューに広告が表示されます。
</Warning>

### ステップ6: 表示時間の設定（オプション）

デフォルトの表示時間を変更するには、`android/app/src/main/res/values/integers.xml`を作成します。

```xml title="android/app/src/main/res/values/integers.xml" theme={null}
<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`クラスでリスナーを設定します。

<CodeGroup>
  ```kotlin Kotlin theme={null}
  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
      }
  }
  ```

  ```java Java theme={null}
  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;

  public class MainApplication extends Application {
      private AdropSplashAd splashAd;

      @Override
      public void onCreate() {
          super.onCreate();

          // SDK初期化
          Adrop.INSTANCE.initialize(this, false, new String[]{});

          // スプラッシュ広告の設定
          splashAd = new AdropSplashAd(this, ad -> checkShouldSkipSplash());

          splashAd.setSplashAdListener(new AdropSplashAdListener() {
              @Override
              public void onAdReceived(AdropSplashAd ad) {
                  System.out.println("スプラッシュ広告受信成功");
              }

              @Override
              public void onAdFailedToReceive(AdropSplashAd ad, AdropErrorCode errorCode) {
                  System.out.println("スプラッシュ広告受信失敗: " + errorCode);
              }

              @Override
              public void onAdImpression(AdropSplashAd ad) {
                  System.out.println("スプラッシュ広告インプレッション");
              }

              @Override
              public void onAdClose(AdropSplashAd ad, boolean impressed) {
                  System.out.println("スプラッシュ広告クローズ - impressed: " + impressed);
              }
          });
      }

      private boolean checkShouldSkipSplash() {
          // スプラッシュ広告をスキップするかどうかを決定
          return false;
      }
  }
  ```
</CodeGroup>

<Note>
  `shouldSkip`が`true`を返すと、広告はロードされずメイン画面に直接移動します。
</Note>

### ステップ8: アプリの実行

React Native CLIでAndroidアプリを実行する際は、main activityを指定する必要があります：

```bash theme={null}
npx react-native run-android --main-activity io.adrop.ads.splash.AdropSplashAdActivity
```

<Note>
  `MainActivity`の代わりに`AdropSplashAdActivity`がランチャーアクティビティとして設定されているため、このオプションが必要です。
</Note>

***

## iOS設定

### ステップ1: AppDelegateの設定

`ios/YourApp/AppDelegate.mm`（または`AppDelegate.swift`）を更新してスプラッシュ広告を表示します。

<CodeGroup>
  ```swift Swift theme={null}
  import UIKit
  import React
  import AdropAds

  @main
  class AppDelegate: UIResponder, UIApplicationDelegate {
      var window: UIWindow?

      func application(
          _ application: UIApplication,
          didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
      ) -> Bool {
          // Adrop SDKの初期化
          Adrop.initialize(production: false)

          return true
      }
  }
  ```

  ```objc Objective-C theme={null}
  #import "AppDelegate.h"
  #import <React/RCTBundleURLProvider.h>
  @import AdropAds;

  @implementation AppDelegate

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
      // Adrop SDKの初期化
      [Adrop initializeWithProduction:NO useInAppBrowser:NO targetCountries:@[]];

      self.moduleName = @"YourApp";
      self.initialProps = @{};

      return [super application:application didFinishLaunchingWithOptions:launchOptions];
  }

  @end
  ```
</CodeGroup>

### ステップ2: SceneDelegateの設定（iOS 13+）

SceneDelegateを使用するアプリの場合、`ios/YourApp/SceneDelegate.swift`を作成または更新します。

```swift title="ios/YourApp/SceneDelegate.swift" theme={null}
import UIKit
import React
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)

        // React Nativeルートビューの作成
        let bridge = RCTBridge(delegate: self, launchOptions: nil)!
        let rootView = RCTRootView(bridge: bridge, moduleName: "YourApp", initialProperties: nil)
        let rootViewController = UIViewController()
        rootViewController.view = rootView

        #if DEBUG
        let splashUnitId = "PUBLIC_TEST_UNIT_ID_SPLASH"
        #else
        let splashUnitId = "YOUR_PRODUCTION_SPLASH_UNIT_ID"
        #endif

        // スプラッシュ広告ビューコントローラーの作成
        let splashViewController = AdropSplashAdViewController(
            unitId: splashUnitId
        )
        splashViewController.delegate = self
        splashViewController.logoImage = UIImage(named: "splash_logo")
        splashViewController.backgroundColor = .white
        splashViewController.mainViewController = rootViewController

        window?.rootViewController = splashViewController
        window?.makeKeyAndVisible()
    }
}

// MARK: - AdropSplashAdDelegate
extension SceneDelegate: AdropSplashAdDelegate {
    func onAdClose(_ ad: AdropSplashAd, impressed: Bool) {
        print("スプラッシュ広告クローズ - impressed: \(impressed)")
    }

    func onAdReceived(_ ad: AdropSplashAd) {
        print("スプラッシュ広告受信完了")
    }

    func onAdFailedToReceive(_ ad: AdropSplashAd, _ errorCode: AdropErrorCode) {
        print("スプラッシュ広告受信失敗: \(errorCode)")
    }

    func onAdImpression(_ ad: AdropSplashAd) {
        print("スプラッシュ広告インプレッション")
    }
}
```

<Warning>
  `mainViewController`を必ず設定してください。スプラッシュ広告が閉じた後、SDKはこのビューコントローラーに遷移してReact Nativeアプリを表示します。
</Warning>

### ステップ3: ロゴ画像の追加

iOSアセットにアプリロゴを追加します：

1. Xcodeを開き、`YourApp/Images.xcassets`に移動
2. `splash_logo`という名前の新しいImage Setを追加
3. ロゴ画像を追加（@1x、@2x、@3x）

推奨サイズ: 200×200〜300×300ポイント

### ステップ4: Info.plistの設定

SceneDelegateを使用する場合、`Info.plist`にscene設定があることを確認します：

```xml title="ios/YourApp/Info.plist" theme={null}
<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. 適切なタイマー設定

より良いユーザー体験のために、合理的なタイムアウト値を設定します。

```xml theme={null}
<!-- Android: integers.xml -->
<integer name="adrop_splash_ad_request_timeout">1000</integer>
<integer name="adrop_splash_ad_max_timeout">2000</integer>
```

<Note>
  iOSでは、スプラッシュ広告の表示時間はAdropコンソールの広告ユニット設定で構成されます。
</Note>

### 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. 失敗処理

広告ロードが失敗してもアプリが正常に起動するようにします。

```swift theme={null}
func onAdFailedToReceive(_ ad: AdropSplashAd, _ errorCode: AdropErrorCode) {
    print("広告ロード失敗: \(errorCode)")
    // AdropSplashAdViewControllerが自動的にonAdCloseを呼び出し
}
```

### 4. テスト/本番環境の区別

```swift theme={null}
#if DEBUG
let isProduction = false
let splashUnitId = "PUBLIC_TEST_UNIT_ID_SPLASH"
#else
let isProduction = true
let splashUnitId = "YOUR_PRODUCTION_SPLASH_UNIT_ID"
#endif

Adrop.initialize(production: isProduction)
let splashViewController = AdropSplashAdViewController(unitId: splashUnitId)
```

***

## テスト

### テストユニットID

開発中はテストユニットIDを使用します。

```
PUBLIC_TEST_UNIT_ID_SPLASH
```

<Warning>
  本番リリースには必ずAdropコンソールで作成した実際のユニットIDを使用してください。テストユニットIDでは広告収益は発生しません。
</Warning>

***

## トラブルシューティング

<AccordionGroup>
  <Accordion title="スプラッシュ画面が表示されない（Android）">
    * AndroidManifest.xmlで`AdropSplashAdActivity`がLAUNCHERとして設定されているか確認
    * `android:exported="true"`設定を確認
    * SDK初期化が完了しているか確認
    * `adrop_service.json`が`android/app/src/main/assets`フォルダにあるか確認
  </Accordion>

  <Accordion title="スプラッシュ画面が表示されない（iOS）">
    * `window.rootViewController`が正しく設定されているか確認
    * Info.plistにSceneDelegateが設定されているか確認
    * SDK初期化が完了しているか確認
    * `adrop_service.json`がXcodeプロジェクトに追加されているか確認
  </Accordion>

  <Accordion title="広告がロードされない">
    * ネットワーク接続状態を確認
    * ユニットIDが正しいか確認
    * テスト環境で`production: false`設定を確認
    * `onAdFailedToReceive`のエラーコードを確認
  </Accordion>

  <Accordion title="React Nativeアプリに遷移しない">
    * `adrop_splash_ad_next_activity`が正しく設定されているか確認（Android）
    * `onAdClose`デリゲート実装を確認（iOS）
    * RCTBridgeとRCTRootViewが正しく作成されているか確認
  </Accordion>

  <Accordion title="カスタムレイアウトが適用されない（Android）">
    * ファイル名が正確に`activity_adrop_splash_ad.xml`であるか確認
    * `@+id/adrop_splash_ad_image` IDを持つImageViewがあるか確認
    * クリーンビルド後に再実行
  </Accordion>
</AccordionGroup>

***

## 次のステップ

<CardGroup cols={2}>
  <Card title="インタースティシャル広告" href="/ja/sdk/react-native/interstitial">
    画面遷移時に全画面広告を表示
  </Card>

  <Card title="バナー広告" href="/ja/sdk/react-native/banner">
    バナー広告を実装
  </Card>

  <Card title="ネイティブ広告" href="/ja/sdk/react-native/native">
    カスタムデザインのネイティブ広告
  </Card>

  <Card title="リワード広告" href="/ja/sdk/react-native/rewarded">
    ユーザー報酬を提供
  </Card>
</CardGroup>