スプラッシュスクリーンの制御プラグイン

テスト環境 ( バージョン番号 ) : 5.0.2

このプラグインの詳細は、こちらの原文 ( GitHub ) をご確認ください。

このプラグインを使用して、アプリの起動中に表示 ( または非表示 ) されるスプラッシュスクリーンを制御します。

プラグイン ID

cordova-plugin-splashscreen

プラグインの追加方法 ( Monaca 上での処理 )

このプラグインを使用する場合には、Monaca クラウド IDE の [ Cordova プラグインの管理 ] 上で、Splashscreen プラグインを有効にします。

サポート対象のプラットフォーム

Android
iOS

peference を使用したカスタマイズ設定

config.xml

AutoHideSplashScreen ( 真偽値、デフォルトでは true ) : スプラッシュスクリーンを自動的に非表示にするかを設定します。preference 「 SplashScreenDelay 」に指定された時間の経過後、スプラッシュスクリーンが非表示になります。

xml<preference name="AutoHideSplashScreen" value="true" />

SplashScreenDelay ( 数値、デフォルトでは 3000 ) : スプラッシュスクリーンを自動的に非表示にするまでの時間 ( ミリ秒単位 ) を指定します。

<preference name="SplashScreenDelay" value="3000" />

以前は、ミリ秒ではなく秒単位で値を設定していたため、現在でも、30 未満の値を指定した場合は、「秒」として処理されるようになっています ( 応急的な措置ですので、将来的には廃止します )。

スプラッシュスクリーンを無効にする場合には、次の preference を config.xml に追加します。

<preference name="SplashScreenDelay" value="0"/>

iOS 特有の動作

iOS では、スプラッシュスクリーンの画像は、「 Launch Image 」と呼ばれています。iOS では、画像は必須となります。

ios プラットフォーム上で、スプラッシュスクリーンを無効にする場合には、上記の他に、<preference name="FadeSplashScreenDuration" value="0"/> を config.xml に追加します。

FadeSplashScreen ( 真偽値、デフォルトでは true ): 画面の状態が切り替わるときに、スプラッシュスクリーンがフェードイン・フェードアウト ( fade in/out ) することを防ぐ場合には、false に設定します。

xml<preference name="FadeSplashScreen" value="false"/>

FadeSplashScreenDuration （float、デフォルトは 500）: スプラッシュスクリーンのフェード効果を実行するためのミリ秒数を指定します。

xml<preference name="FadeSplashScreenDuration" value="750"/>

SplashScreenDelay の処理と FadeSplashScreenDuration の処理は併用できます ( FadeSplashScreenDuration の処理を SplashScreenDelay の処理に吸収させることができます )。たとえば、

<preference name="SplashScreenDelay" value="3000" />
<preference name="FadeSplashScreenDuration" value="1000"/>

config.xml に設定した場合には、次のように処理されます。

00:00 - スプラッシュスクリーンの表示
00:02 - フェード処理を開始
00:03 - スプラッシュスクリーンの非表示

<preference name="FadeSplashScreen" value="false"/> の設定とフェードの処理時間を 0 に設定したとき ( または、0 になったとき ) の挙動は同じです。よって、上記の例では、スプラッシュスクリーンの非表示設定が優先されます ( スプラッシュスクリーンの非表示は、設定どおり、3 秒後になります )。

上記のような設定は、アプリの起動のみに適用できます。よって、コード内にて、スプラッシュスクリーンの表示・非表示を手動で行う場合、たとえば、次のように、フェード処理にタイマーを設定する必要があります。

navigator.splashscreen.show();
window.setTimeout(function () {
    navigator.splashscreen.hide();
}, splashDuration - fadeDuration);

ShowSplashScreenSpinner ( 真偽値、デフォルトでは true ) : スプラッシュスクリーン上にスピナーを表示させない場合には、false を設定します。

xml<preference name="ShowSplashScreenSpinner" value="false"/>

Android 特有の動作

config.xml には、以下の設定を追加することができます。

<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="SplashScreenSpinnerColor" value="white" />

preference 「 SplashMaintainAspectRatio 」は、任意の設定です。true に設定した場合、スプラッシュスクリーンの画像は、画面サイズに応じて引き伸ばされるのではなく、縦横比は固定されたまま、拡大 ( または縮小 ) され表示されます ( CSS の background-size:cover に相当 )。この設定を使用すれば、画像が自然に表示されます。たとえば、画像が風景・文字の場合に有用です。特に、縦横比が異なる画面にも対応できるように、余白部分 ( セーフエリア ) をあらかじめ大きく取っている画像の場合に有用です。

このプラグインでは、端末の向きが変わるたび、スプラッシュ画像を再読み込みします。よって、横方向 ( landscape ) ・縦方向 ( portrait ) 用の画像をそれぞれ使用できます。

SplashShowOnlyFirstTime の設定もオプションです。デフォルトは true です。true に設定した場合、スプラッシュ画面はアプリケーションの起動時にのみ表示されます。しかし、 navigator.app.exitApp() を使用してアプリケーションを終了し、次の起動時にスプラッシュスクリーンを表示させる場合は、このプロパティを false に設定する必要があります（これは、「戻る」ボタンを使ってアプリケーションを終了する場合にも適用されます）。

"SplashScreenSpinnerColor" プリファレンスはオプションで、設定されていない場合は無視されます。有効な色名または 16 進数の色コードに設定すると、Android 5.0 以降の端末でスピナーの色が変更されます。

メソッド

splashscreen.show
splashscreen.hide

splashscreen.hide

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

navigator.splashscreen.hide();

iOS 特有の動作

config.xml ファイルの AutoHideSplashScreen 設定は false にする必要があります。スプラッシュ画面を 2 秒間表示しないようにするには、deviceready イベントハンドラに、次のようなタイマーを追加します。

setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000);

splashscreen.show

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

navigator.splashscreen.show();

アプリ側では、アプリが起動して、deviceready イベントが発火するまで、navigator.splashscreen.show() を呼び出すことはできません。矛盾しますが、スプラッシュスクリーンは、アプリが起動する前に表示される画面です。よって、このような処理の方法では、スプラッシュスクリーンの表示が遅れてしまうことになります。そこで、前述のように、config.xml に、いくつかの設定をあらかじめしておき、アプリの起動後、直ちに ( アプリが完全に立ち上がる前、および、 deviceready イベントが発火する前 )、スプラッシュスクリーンが自動的に 表示される ようにします。よって、アプリの起動時にスプラッシュスクリーンを表示するために、navigator.splashscreen.show() を使用することは、ほぼありません。

従来のLaunch イメージ

If you choose to use legacy launch images, you will use the following syntax in config.xm:

<splash src="/res/ios/screen/Default~iphone.png" width="320" height="480"/>
<splash src="/res/ios/screen/Default@2x~iphone.png" width="640" height="960"/>
<splash src="/res/ios/screen/Default-Portrait~ipad.png" width="768" height="1024"/>
<splash src="/res/ios/screen/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
<splash src="/res/ios/screen/Default-Landscape~ipad.png" width="1024" height="768"/>
<splash src="/res/ios/screen/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
<splash src="/res/ios/screen/Default-568h@2x~iphone.png" width="640" height="1136"/>
<splash src="/res/ios/screen/Default-667h.png" width="750" height="1334"/>
<splash src="/res/ios/screen/Default-736h.png" width="1242" height="2208"/>

src 属性のファイル名は任意のものとなります。ファイル名は、プロジェクトのコンパイル時に使用されるものと一致するため使用されます。 width属性とheight属性は、どの起動イメージがどのデバイスに表示されるかを次のように決定します。

width

height

端末

320

480

すべての非Retina iPhoneとiPod

640

960

iPhone 4/4s/5/5s (縦向き)

750

1334

iPhone 6/6s/7 (縦向き)

1242

2208

iPhone 6+/6s+/7+ (縦向き)

2208

1242

iPhone 6+/6s+/7+ (横向き)

768

1024

すべての非Retina iPads (縦向き)

1024

768

すべての非Retina iPads (横向き)

1536

2048

すべてのRetina iPads (縦向き)

2048

1536

すべてのRetina iPads (横向き)

画像イメージが width と height 属性で指定されたサイズと実際に一致することは非常に重要です。一致しない場合、デバイスは正しくレンダリングできないことがあります。

設定例

トップレベルの config.xml ファイル（ platforms 配下のファイルではありません）には、ここで指定されているような設定要素を追加します。

src 属性の値は、プロジェクトのルートディレクトリに対して相対的であり、wwwディレクトリではないことに注意してください（下記の「ディレクトリ構造」を参照してください）。ソースイメージに任意の名前を付けることができます。アプリの内部名はCordovaによって決定されます。

ディレクトリ構造：

    projectRoot
        res
            android
                screen
            ios
                screen
        www
            css
            img
            js

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="/res/android/screen/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="/res/android/screen/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="/res/android/screen/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="/res/android/screen/splash-land-xhdpi.png" density="land-xhdpi"/>

    <splash src="/res/android/screen/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="/res/android/screen/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="/res/android/screen/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="/res/android/screen/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>

<platform name="ios">
    <!-- There are two mechanisms for showing launch images.
      -- Legacy method (supports all devices except iPad Pro 12.9):
      -- Note: Images are determined by width and height. The following are supported -->
    <splash src="/res/ios/screen/Default~iphone.png" width="320" height="480"/>
    <splash src="/res/ios/screen/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="/res/ios/screen/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="/res/ios/screen/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="/res/ios/screen/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="/res/ios/screen/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="/res/ios/screen/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="/res/ios/screen/Default-667h.png" width="750" height="1334"/>
    <splash src="/res/ios/screen/Default-736h.png" width="1242" height="2208"/>
    <splash src="/res/ios/screen/Default-Landscape-736h.png" width="2208" height="1242"/>
    <!-- Storyboard method (supports all devices):
      -- Important: If you use the storyboard method, legacy images are
      -- copied but ignored.
      -- Note: images are determined by scale, idiom, and size traits. The following
      -- are suggested based on current device form factors -->
    <splash src="/res/ios/screen/Default@2x~universal~anyany.png" />
    <splash src="/res/ios/screen/Default@2x~universal~comany.png" />
    <splash src="/res/ios/screen/Default@2x~universal~comcom.png" />
    <splash src="/res/ios/screen/Default@3x~universal~anyany.png" />
    <splash src="/res/ios/screen/Default@3x~universal~anycom.png" />
    <splash src="/res/ios/screen/Default@3x~universal~comany.png" />
</platform>

<preference name="SplashScreenDelay" value="10000" />