バージョン: v8

@capacitor/splash-screen

スプラッシュスクリーンAPIは、スプラッシュ画像の表示・非表示のメソッドを提供します。

インストール

npm install @capacitor/splash-screen
npx cap sync

Android 12 スプラッシュスクリーン API

これは起動時のスプラッシュスクリーンのみに影響し、プログラムによるshow()メソッドを使用する場合は使用されません。

Capacitor 4 は、Android 12 スプラッシュスクリーン API と androidx.core:core-splashscreen 互換ライブラリを使用して、Android 11 以下で動作するようにしています。

互換ライブラリは、android/app/src/main/res/values/styles.xml の AppTheme.NoActionBarLaunch の親を Theme.SplashScreen から AppTheme.NoActionBar に変更することで無効にできます。Android 12 スプラッシュスクリーン API は、Android 12 以降では Android OS の一部であるため無効にできません。

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/splash</item>
</style>

注意: Android 12 および Android 12L デバイスでは、Nova Launcher、MIUI、Realme Launcher、OPPO Launcher などのサードパーティ製ランチャー、設定アプリのアプリ情報、または Android Studio などの IDE から起動した場合、スプラッシュスクリーンの画像が表示されません。Google Issue Tracker Google Issue Tracker Google は Android 13 でこれらの問題を修正しましたが、修正を Android 12 および Android 12L にバックポートすることはありません。ランチャー関連の問題は、ランチャーのアップデートで修正される可能性があります。Android 13 でスプラッシュスクリーンに関する問題がまだ見つかる場合は、Google に報告してください。

例

import { SplashScreen } from '@capacitor/splash-screen';

// Hide the splash (you should do this on app launch)
await SplashScreen.hide();

// Show the splash for an indefinite amount of time:
await SplashScreen.show({
  autoHide: false,
});

// Show the splash for two seconds and then automatically hide it:
await SplashScreen.show({
  showDuration: 2000,
  autoHide: true,
});

スプラッシュスクリーンの非表示

デフォルトでは、スプラッシュスクリーンは 500 ミリ秒後に自動的に非表示になるように設定されています。

アプリの準備ができるまでスプラッシュスクリーンが消えないようにするには、launchAutoHide を false に設定します。スプラッシュスクリーンは、手動で非表示にするまで表示されたままになります。最高のユーザーエクスペリエンスのために、アプリはできるだけ早くhide()を呼び出す必要があります。

代わりに、スプラッシュスクリーンを一定時間表示したい場合は、Capacitor 設定ファイルで launchShowDuration を設定します。

背景色

特定の条件、特にスプラッシュスクリーンがデバイス画面を完全に覆わない場合、アプリ画面が（透明度のために）角の周囲に見える場合があります。透明な色を表示する代わりに、backgroundColor を設定してそれらの領域を覆うことができます。

backgroundColor の可能な値は、#RRGGBB または #RRGGBBAA のいずれかです。

スピナー

スプラッシュスクリーンの上にスピナーを表示したい場合は、Capacitor 設定ファイルで showSpinner を true に設定します。

次の設定を使用して、スピナーの外観をカスタマイズできます。

Android の場合、androidSpinnerStyle には次のオプションがあります。

horizontal
small
large (デフォルト)
inverse
smallInverse
largeInverse

iOS の場合、iosSpinnerStyle には次のオプションがあります。

large (デフォルト)
small

スピナーの色を設定するには、spinnerColor を使用します。値は #RRGGBB または #RRGGBBAA のいずれかです。

設定

これらの設定値が利用可能です

プロパティ	タイプ	説明	デフォルト	開始
`launchShowDuration`	`number`	autoHide が有効になっている場合に、起動時のスプラッシュスクリーンを表示する時間（ミリ秒単位）	`500`	1.0.0
`launchAutoHide`	`boolean`	launchShowDuration の後にスプラッシュを自動的に非表示にするかどうか。	`true`	1.0.0
`launchFadeOutDuration`	`number`	起動時のスプラッシュスクリーンのフェードアウトアニメーションの期間（ミリ秒単位）。Android 12 スプラッシュスクリーン API を使用する場合のみ Android で利用可能です。	`200`	4.2.0
`backgroundColor`	`string`	スプラッシュスクリーンの背景の色（16進数形式、#RRGGBB または #RRGGBBAA）。`useDialog` が true の場合、または Android 12 API を使用した起動時には機能しません。		1.0.0
`androidSplashResourceName`	`string`	スプラッシュスクリーンとして使用するリソースの名前。Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。	`splash`	1.0.0
`androidScaleType`	`'CENTER' \| 'CENTER_CROP' \| 'CENTER_INSIDE' \| 'FIT_CENTER' \| 'FIT_END' \| 'FIT_START' \| 'FIT_XY' \| 'MATRIX'`	スプラッシュスクリーン画像の拡大縮小に使用されるImageView.ScaleType。`useDialog` が true の場合、または Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。	`FIT_XY`	1.0.0
`showSpinner`	`boolean`	スプラッシュスクリーンにローディングスピナーを表示します。`useDialog` が true の場合、または Android 12 API を使用した起動時には機能しません。		1.0.0
`androidSpinnerStyle`	`'horizontal' \| 'small' \| 'large' \| 'inverse' \| 'smallInverse' \| 'largeInverse'`	Android スピナーのスタイル。`useDialog` が true の場合、または Android 12 API を使用した起動時には機能しません。	`large`	1.0.0
`iosSpinnerStyle`	`'small' \| 'large'`	iOS スピナーのスタイル。`useDialog` が true の場合は機能しません。iOS でのみ利用可能です。	`large`	1.0.0
`spinnerColor`	`string`	スピナーの色（16進数形式、#RRGGBB または #RRGGBBAA）。`useDialog` が true の場合、または Android 12 API を使用した起動時には機能しません。		1.0.0
`splashFullScreen`	`boolean`	スプラッシュスクリーンでステータスバーを非表示にします。Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。		1.0.0
`splashImmersive`	`boolean`	スプラッシュスクリーンでステータスバーとソフトウェアナビゲーションボタンを非表示にします。Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。		1.0.0
`layoutName`	`string`	`useDialog` が true に設定されている場合は、ダイアログレイアウトを設定します。`useDialog` が設定されていないか false の場合は、ImageView の代わりにレイアウトを使用します。Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。		1.1.0
`useDialog`	`boolean`	ImageView の代わりにダイアログを使用します。`layoutName` が設定されていない場合は、スプラッシュ画像を背景として使用するレイアウトを使用します。Android 12 API を使用した起動時には機能しません。Android でのみ利用可能です。		1.1.0

例

capacitor.config.json の場合

{
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000,
      "launchAutoHide": true,
      "launchFadeOutDuration": 3000,
      "backgroundColor": "#ffffffff",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "showSpinner": true,
      "androidSpinnerStyle": "large",
      "iosSpinnerStyle": "small",
      "spinnerColor": "#999999",
      "splashFullScreen": true,
      "splashImmersive": true,
      "layoutName": "launch_screen",
      "useDialog": true
    }
  }
}

capacitor.config.ts の場合

/// <reference types="@capacitor/splash-screen" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: true,
      launchFadeOutDuration: 3000,
      backgroundColor: "#ffffffff",
      androidSplashResourceName: "splash",
      androidScaleType: "CENTER_CROP",
      showSpinner: true,
      androidSpinnerStyle: "large",
      iosSpinnerStyle: "small",
      spinnerColor: "#999999",
      splashFullScreen: true,
      splashImmersive: true,
      layoutName: "launch_screen",
      useDialog: true,
    },
  },
};

export default config;

Android

splash.png 以外の名前のスプラッシュスクリーン画像を使用するには、androidSplashResourceName を新しいリソース名に設定します。さらに、android/app/src/main/res/values/styles.xml で、次のブロックのリソース名を変更します。

<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/NAME</item>
</style>

変数

このプラグインは、次のプロジェクト変数（アプリの variables.gradle ファイルで定義）を使用します。

coreSplashScreenVersion androidx.core:core-splashscreen のバージョン（デフォルト：1.0.1）

例ガイド

独自のアイコンとスプラッシュスクリーン画像を追加する ›

Capacitor 用の動的/適応可能なスプラッシュスクリーンを作成する（Android）›

show(...)

show(options?: ShowOptions | undefined) => Promise<void>

スプラッシュスクリーンを表示します

パラメータ	タイプ
`options`	`ShowOptions`

開始 1.0.0

hide(...)

hide(options?: HideOptions | undefined) => Promise<void>

スプラッシュスクリーンを非表示にします

パラメータ	タイプ
`options`	`HideOptions`

開始 1.0.0

インターフェース

ShowOptions

プロパティ	タイプ	説明	デフォルト	開始
`autoHide`	`boolean`	showDuration の後にスプラッシュを自動的に非表示にするかどうか		1.0.0
`fadeInDuration`	`number`	フェードインする時間（ミリ秒単位）。	`200`	1.0.0
`fadeOutDuration`	`number`	フェードアウトする時間（ミリ秒単位）。	`200`	1.0.0
`showDuration`	`number`	autoHide が有効になっている場合にスプラッシュスクリーンを表示する時間（ミリ秒単位）	`3000`	1.0.0

HideOptions

プロパティ	タイプ	説明	デフォルト	開始
`fadeOutDuration`	`number`	フェードアウトにかかる時間（ミリ秒単位）。Androidの場合、Android 12のスプラッシュスクリーンAPIを使用している場合は、これは使用されません。代わりに`launchFadeOutDuration`構成オプションを使用してください。	`200`	1.0.0

@capacitor/splash-screen

インストール​

Android 12 スプラッシュスクリーン API​

例​

スプラッシュスクリーンの非表示​

背景色​

スピナー​

設定​

例​

Android​

変数​

例ガイド​

API​

show(...)​

hide(...)​

インターフェース​

ShowOptions​

HideOptions​

目次