# スプラッシュスクリーンの制御プラグインテスト環境 ( バージョン番号 ) : [5.0.2](https://github.com/apache/cordova-plugin-splashscreen/releases/tag/5.0.2) {% hint style="info" %} このプラグインの詳細は、 [こちらの原文 ( GitHub )](https://github.com/apache/cordova-plugin-splashscreen) をご確認ください。 {% endhint %} このプラグインを使用して、アプリの起動中に表示 ( または非表示 ) されるスプラッシュスクリーンを制御します。 ## プラグイン ID ```javascript cordova-plugin-splashscreen ``` ## プラグインの追加方法 ( Monaca 上での処理 ) このプラグインを使用する場合には、Monaca クラウド IDE の \[ Cordova プラグインの管理 ] 上で、`Splashscreen` プラグインを[有効](https://ja.docs.monaca.io/products_guide/monaca_ide/dependencies/cordova_plugin#cordova-puraguin-noinpto)にします。 ## サポート対象のプラットフォーム * Android * iOS ## peference を使用したカスタマイズ設定 ### config.xml * `AutoHideSplashScreen` ( 真偽値、デフォルトでは true ) : スプラッシュスクリーンを自動的に非表示にするかを設定します。preference 「 `SplashScreenDelay` 」に指定された時間の経過後、スプラッシュスクリーンが非表示になります。 ```markup xml ``` `SplashScreenDelay` ( 数値、デフォルトでは 3000 ) : スプラッシュスクリーンを自動的に非表示にするまでの時間 ( ミリ秒単位 ) を指定します。 ```markup ``` {% hint style="info" %} 以前は、ミリ秒ではなく秒単位で値を設定していたため、現在でも、30 未満の値を指定した場合は、「秒」として処理されるようになっています ( 応急的な措置ですので、将来的には廃止します )。 {% endhint %} スプラッシュスクリーンを無効にする場合には、次の preference を `config.xml` に追加します。 ```markup ``` ### iOS 特有の動作 * iOS では、スプラッシュスクリーンの画像は、「 Launch Image 」と呼ばれています。iOS では、画像は必須となります。 `ios` プラットフォーム上で、スプラッシュスクリーンを無効にする場合には、上記の他に、`` を `config.xml` に追加します。 * `FadeSplashScreen` ( 真偽値、デフォルトでは `true` ): 画面の状態が切り替わるときに、スプラッシュスクリーンがフェードイン・フェードアウト ( fade in/out ) することを防ぐ場合には、false に設定します。 ```markup xml ``` `FadeSplashScreenDuration` （float、デフォルトは `500`）: スプラッシュスクリーンのフェード効果を実行するためのミリ秒数を指定します。 ```markup xml ``` `SplashScreenDelay` の処理と `FadeSplashScreenDuration` の処理は併用できます ( `FadeSplashScreenDuration` の処理を `SplashScreenDelay` の処理に吸収させることができます )。たとえば、 ```markup ``` `config.xml` に設定した場合には、次のように処理されます。 * 00:00 - スプラッシュスクリーンの表示 * 00:02 - フェード処理を開始 * 00:03 - スプラッシュスクリーンの非表示 `` の設定とフェードの処理時間を `0` に設定したとき ( または、0 になったとき ) の挙動は同じです。よって、上記の例では、スプラッシュスクリーンの非表示設定が優先されます ( スプラッシュスクリーンの非表示は、設定どおり、3 秒後になります )。 {% hint style="info" %} 上記のような設定は、アプリの起動のみに適用できます。よって、コード内にて、スプラッシュスクリーンの表示・非表示を手動で行う場合、たとえば、次のように、フェード処理にタイマーを設定する必要があります。 {% endhint %} ```javascript navigator.splashscreen.show(); window.setTimeout(function () { navigator.splashscreen.hide(); }, splashDuration - fadeDuration); ``` * `ShowSplashScreenSpinner` ( 真偽値、デフォルトでは `true` ) : スプラッシュスクリーン上にスピナーを表示させない場合には、`false` を設定します。 ```markup xml ``` ### Android 特有の動作 `config.xml` には、以下の設定を追加することができます。 ```markup ``` 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 スプラッシュスクリーンを非表示にします。 ```javascript navigator.splashscreen.hide(); ``` #### iOS 特有の動作 `config.xml` ファイルの `AutoHideSplashScreen` 設定は false にする必要があります。スプラッシュ画面を 2 秒間表示しないようにするには、deviceready イベントハンドラに、次のようなタイマーを追加します。 ```javascript setTimeout(function() { navigator.splashscreen.hide(); }, 2000); ``` ### splashscreen.show スプラッシュスクリーンを表示します。 ```javascript 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`: ```markup ``` `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 (横向き) | {% hint style="info" %} 画像イメージが `width` と `height` 属性で指定されたサイズと実際に一致することは非常に重要です。一致しない場合、デバイスは正しくレンダリングできないことがあります。 {% endhint %} ## 設定例トップレベルの `config.xml` ファイル（ `platforms` 配下のファイルではありません）には、ここで指定されているような設定要素を追加します。 `src` 属性の値は、プロジェクトのルートディレクトリに対して相対的であり、wwwディレクトリではないことに注意してください（下記の「ディレクトリ構造」を参照してください）。ソースイメージに任意の名前を付けることができます。アプリの内部名はCordovaによって決定されます。ディレクトリ構造： ```bash projectRoot res android screen ios screen www css img js ``` ```markup ``` 関連項目: * [サードパーティー製プラグイン](https://ja.docs.monaca.io/reference/third_party_phonegap) * [基本プラグイン](https://ja.docs.monaca.io/reference/core-cordova-plugins)