# Splashscreen プラグイン

テスト環境 ( バージョン番号 ) : [6.0.0](https://github.com/apache/cordova-plugin-splashscreen/releases/tag/6.0.0)

{% hint style="info" %}
このプラグインの詳細は、 [こちらの原文 ( GitHub )](https://github.com/apache/cordova-plugin-splashscreen) をご確認ください。
{% endhint %}

{% hint style="info" %}
iOS の場合、SplashScreen プラグインは、iOS プラットフォームに統合され、Launch Image は、Storyboard に置き換えられました。

Storyboard のイメージを設定する方法の詳細は、[SplashScreenドキュメント](https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html#launch-storyboard-images)をご確認ください。
{% endhint %}

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

### プラグイン ID

```javascript
cordova-plugin-splashscreen
```

### プラグインの追加方法

このプラグインを使用する場合には、Monaca クラウド IDE の \[ Cordova プラグインの管理 ] 上で、`Splashscreen` プラグインを[有効](/products_guide/monaca_ide/dependencies/cordova_plugin.md#cordova-puraguin-noinpto)にします。

### 対象プラットフォーム

* Android

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

#### config.xml

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

```markup
<preference name="AutoHideSplashScreen" value="true" />
```

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

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

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

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

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

#### Android 特有の動作

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

```markup
<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

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

```javascript
navigator.splashscreen.hide();
```

#### splashscreen.show

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

```javascript
navigator.splashscreen.show();
```

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

### 設定例

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

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

ディレクトリ構造：

```bash
    projectRoot
        res
            android
                screen
        www
            css
            img
            js
```

```markup
<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>

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

関連項目:

* [サードパーティー製プラグイン](/reference/third_party_phonegap.md)
* [基本プラグイン](/reference/core-cordova-plugins.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/reference/core-cordova-plugins/cordova_10.0/splashscreen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.