Splashscreen

アプリケーションのスプラッシュスクリーンを開発者が表示/非表示できるようにします。

メソッド

• show
• hide

パーミッション

Android

app/res/xml/config.xml

<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>

iOS

Cordova.plist

    Plugins ディレクトリー以下にエントリーを追加します - "SplashScreen" がキー、 "CDVSplashScreen" が値です。
    新しいプロジェクトはこのキーを既に持っています。

Setup

Android

1. スプラッシュスクリーンの画像を Android プロジェクトの res/drawable ディレクトリーにコピーします。画像の各サイズは以下のとおりです:

   • xlarge (xhdpi): 少なくとも 960 x 720
   • large (hdpi): 少なくとも 640 x 480
   • medium (mdpi): 少なくとも 470 x 320
   • small (ldpi): 少なくとも 426 x 320

   スプラッシュスクリーンには 9-patch 画像 を使用することを強くおすすめします。

2. DroidGap を継承したクラスの onCreate メソッドに、次の2行を追加します:

   super.setIntegerProperty("splashscreen", R.drawable.splash);
   super.loadUrl("file:///android_asset/www/index.html", 10000);
   

   最初の行 'super.setIntegerProperty' はスプラッシュスクリーンに表示するための画像を設定します。もし名前を splash.png 以外にしている場合は、この行を編集する必要があります。 次の行 'super.loadUrl' の第2引数はスプラッシュスクリーンのタイムアウトの値です。この例では、スプラッシュスクリーンは 10 秒間表示されます。もしスプラッシュスクリーンを "deviceready" イベントを取得した時に非表示にしたい場合は、 navigator.splashscreen.hide() メソッドを呼び出します。

iOS

1. スプラッシュスクリーンの画像を iOS プロジェクトの Resources/splash ディレクトリーにコピーします。サポートしたいデバイス向けの画像のみ追加するようにしてください (iPad または iPhone のスクリーンサイズ)。画像の各サイズは以下のとおりです:

   • Default-568h@2x~iphone.png (640x1136 pixels)
   • Default-Landscape@2x~ipad.png (2048x1496 pixels)
   • Default-Landscape~ipad.png (1024x748 pixels)
   • Default-Portrait@2x~ipad.png (1536x2008 pixels)
   • Default-Portrait~ipad.png (768x1004 pixels)
   • Default@2x~iphone.png (640x960 pixels)
   • Default~iphone.png (320x480 pixels)

---

show

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

navigator.splashscreen.show();

概要

navigator.splashscreen.show() はアプリケーションのスプラッシュスクリーンを表示します。

サポートされているプラットフォーム

• Android
• iOS

使用例

navigator.splashscreen.show();

詳細な使用例

<!DOCTYPE html>
<html>
  <head>
    <title>スプラッシュスクリーン使用例</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Cordova の読み込み完了まで待機
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova 準備完了
    //
    function onDeviceReady() {
        navigator.splashscreen.show();
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

---

hide

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

navigator.splashscreen.hide();

概要

navigator.splashscreen.hide() はアプリケーションのスプラッシュスクリーンを非表示にします。

サポートされているプラットフォーム

• Android
• iOS

使用例

navigator.splashscreen.hide();

詳細な使用例

<!DOCTYPE html>
<html>
  <head>
    <title>スプラッシュスクリーン使用例</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Cordova の読み込み完了まで待機
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova 準備完了
    //
    function onDeviceReady() {
        navigator.splashscreen.hide();
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
  </body>
</html>

iOS に関する注意点

1. Cordova.plist の中で、 "AutoHideSplashScreen” を false に設定するために 値を編集 する必要があります

2. もしスプラッシュスクリーンを非表示にするのを 2 秒間遅らせたい場合は、 deviceready イベントハンドラー内で設定できます:

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