スプラッシュカスタマイズ

config.json だけでスプラッシュのモード・背景・レイヤーアニメーションを完全に制御します。

3つのモード

config.json の splash.mode でスプラッシュの動作を選択します。

mode	動作
`"builtin"` (デフォルト)	SDK 内蔵スプラッシュ — 背景・レイヤーエンジンを config のみでカスタマイズ
`"custom"`	SDK UI を非表示。アプリが独自のランチ画面を提供し、`SdkInitState.onReady` で初期化完了を受信
`"none"`	スプラッシュなしで即メイン画面へ。SDK 初期化はバックグラウンドで実行

builtin モード — レイヤーエンジン

最小構成（後方互換）

{
  "splash": {
    "backgroundColor": "#FFFFFF",
    "darkBackgroundColor": "#000000",
    "minDurationMs": 1500
  }
}

既存の config はそのまま動作します — splash_logo が中央に表示されます。

背景画像

backgroundImage を設定すると、単色背景の代わりに画像がフルブリード(fill)で表示されます。

{
  "splash": {
    "backgroundImage": {
      "light": "splash_bg_light.png",
      "dark":  "splash_bg_dark.png"
    },
    "minDurationMs": 1500
  }
}

画像は Android は assets/、iOS は Asset Catalog またはバンドルファイルに配置します。
light / dark のどちらか一方だけでも指定できます。未指定側は反対側の画像で自動補完されます。
backgroundImage を設定すると backgroundColor は無視されます。

レイヤーエンジン (`layers[]`)

複数の画像を時間差でアニメーションさせるマルチレイヤー入場演出です。

{
  "splash": {
    "mode": "builtin",
    "backgroundImage": {
      "light": "splash_bg_light.png",
      "dark":  "splash_bg_dark.png"
    },
    "layers": [
      {
        "image": "splash_character.png",
        "scaleType": "fill",
        "appearAtMs": 0,
        "anim": "fade",
        "durationMs": 500
      },
      {
        "image": { "light": "splash_logo_light.png", "dark": "splash_logo_dark.png" },
        "scaleType": "fill",
        "appearAtMs": 700,
        "anim": "fadeUp",
        "durationMs": 500,
        "endsSplash": true
      }
    ],
    "minDurationMs": 2000
  }
}

レイヤーフィールド一覧

フィールド	型	デフォルト	説明
`image`	`string \| { light, dark }`	—	画像ファイル名。単一文字列またはライト/ダーク別オブジェクト
`scaleType`	`"fill" \| "fit" \| "center"`	`"fill"`	画像のスケール方式
`appearAtMs`	`number`	`0`	スプラッシュ開始からこのレイヤーが現れるまでの遅延(ms)
`anim`	`"fade" \| "fadeUp" \| "fadeDown" \| "scale" \| "none"`	`"fade"`	登場アニメーション
`durationMs`	`number`	`400`	アニメーション時間(ms)
`endsSplash`	`boolean`	`false`	`true` のとき、このレイヤーのアニメーション完了でスプラッシュ終了ゲートが開く

`scaleType` 詳細

値	Android	iOS	用途
`"fill"` (デフォルト)	`CENTER_CROP`	`.scaleAspectFill`	背景と同じキャンバスのフルブリードレイヤー
`"fit"`	`FIT_CENTER`	`.scaleAspectFit`	小アイコン/ロゴ — 全体が表示される、余白あり
`"center"`	`CENTER`	`.center`	原寸中央配置、スケールなし

背景とレイヤーを同一キャンバスサイズ（例: 1080×2400）でデザインすると、scaleType: "fill" によりすべての端末比率で正確に重なります。

終了タイミング

スプラッシュは以下の 3 条件のうち最後に満たされた時点で終了します。

endsSplash: true レイヤーのアニメーション完了 (appearAtMs + durationMs)
minDurationMs 経過
SDK 初期化（ライセンス確認 + リモート設定）完了

endsSplash レイヤーが存在しない場合は条件 1 はスキップされます。

モーション軽減 — 自動対応

Android の animatorDurationScale = 0 または iOS のモーションを減らす設定が有効な場合、レイヤーアニメーションは自動的にスキップされ最終状態が即座に適用されます。追加コードは不要。WCAG 2.1 §2.3.3 に自動準拠します。

白いフラッシュ防止 (`carryOverBackground`)

スプラッシュ終了後、最初のウェブページが描画されるまでの間に白い背景が一瞬表示される現象を防ぎます。

デフォルトで有効 — backgroundColor を設定するだけで自動的に適用されます。無効にする場合のみ設定してください。

{
  "splash": {
    "backgroundColor": "#1A1A2E",
    "carryOverBackground": false
  }
}

carryOverBackground は mode: "builtin" でのみ動作します。custom および none モードではアプリが独自にバックグラウンドを管理します。

custom モード

SDK がスプラッシュ UI を描画せず、アプリが独自のランチ画面を提供します。

{
  "splash": { "mode": "custom" }
}

SDK 初期化完了を受信するには SdkInitState を使用します。

Android (Kotlin):

class MyCustomSplashActivity : SplashActivity() {
    override fun onSplashStart() {
        showMySplash()
        SdkInitState.onReady { isLicensed ->
            hideMySplash()
            onCustomTaskDone()   // SplashActivity に完了を通知
        }
    }
}

iOS (Swift):

SdkInitState.shared.onReady { isLicensed in
    DispatchQueue.main.async {
        self.hideMySplash()
        self.proceedToMain()
    }
}

Android の場合は onCustomTaskDone() を必ず呼び出してください。呼び出さないとスプラッシュ画面から先に進みません。

none モード

スプラッシュなしで即座にメイン画面へ遷移します。SDK 初期化はバックグラウンドで進行します。

{
  "splash": { "mode": "none" }
}

none モードでは minDurationMs は無視されます。

デザインガイド

フルブリードキャンバスレイアウト

背景と同じキャンバスサイズでレイヤーをデザインすると、すべての端末で正確に整列されます。

キャンバス例: 1080 × 2400 (Android) / 1290 × 2796 (iPhone 15 Pro)
┌─────────────────────┐
│  ↑ 上端クロップ域  │  縦長端末でカットされる場合あり
│                     │
│  ★ 重要要素を配置  │  ← 縦方向中央 60–70% 以内に配置
│  (キャラ、ロゴ等)  │
│                     │
│  ↓ 下端クロップ域  │  縦長端末でカットされる場合あり
└─────────────────────┘

推奨ファイル形式

プラットフォーム	推奨形式
Android	`.png` / `.webp`（`assets/` フォルダ）
iOS	Asset Catalog（`.imageset`）またはバンドル `.png`

完全な config.json 例

{
  "splash": {
    "mode": "builtin",
    "backgroundColor": "#FFFFFF",
    "darkBackgroundColor": "#000000",
    "backgroundImage": {
      "light": "splash_bg_light.png",
      "dark":  "splash_bg_dark.png"
    },
    "layers": [
      {
        "image": "splash_character.png",
        "scaleType": "fill",
        "appearAtMs": 0,
        "anim": "fade",
        "durationMs": 500
      },
      {
        "image": {
          "light": "splash_logo_dark.png",
          "dark":  "splash_logo_light.png"
        },
        "scaleType": "fill",
        "appearAtMs": 700,
        "anim": "fadeUp",
        "durationMs": 500,
        "endsSplash": true
      }
    ],
    "minDurationMs": 2000,
    "carryOverBackground": true
  }
}