スプラッシュ画面を拡張する方法 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

追加スプラッシュ画面を作成すれば、より長い時間、スプラッシュ画面を表示することができます。 多くの場合、この画面はアプリの起動時に表示されるスプラッシュ画面に似た設計になっていますが、すべてカスタマイズできます。 読み込み状況をリアルタイムにユーザーに表示する場合や、アプリの最初の UI の準備に時間がかかる場合、追加スプラッシュ画面を使って起動時のエクスペリエンスを定義できます。以下の手順を実行すると、システムによって提供されるスプラッシュ画面と同じ追加スプラッシュ画面を作成できます。

完成したアプリの追加スプラッシュ画面を参照するには、スプラッシュ画面のサンプルをご覧ください。

既定のスプラッシュ画面が長時間表示されているとユーザーが感じるようにする場合は、次の方法を使って、追加スプラッシュ画面を既定のスプラッシュ画面と似せる必要があります。

  • 追加スプラッシュ画面ページでは、アプリ マニフェスト内でスプラッシュ画面に指定したのと同じ画像を使います。
  • このビューでは、アプリ マニフェスト内でスプラッシュ画面に指定した背景色と一致する背景色を使います。
  • コードでは、SplashScreen クラスを使って、アプリのスプラッシュ画面画像の座標が、既定のスプラッシュ画面と同じになるようにします。
  • Windows (Windows Phone ではない) の場合: コードが (アプリがサイズ変更されたり、画面が回転したりするような) ウィンドウ サイズ変更イベントに応答する必要があります。

重要  プロジェクトの default.html ファイルでグローバル アプリのコントロール (AppBar など) を宣言した場合、追加スプラッシュ画面を表示する関数を呼び出すときにコントロールの disabled プロパティを true に設定し、追加スプラッシュ画面から移動するときに disabled を false に戻します。コントロールを追加する方法やコントロールのスタイルを設定する方法についてさらに詳しい情報が必要な場合は、「コントロールとコンテンツの追加」をご覧ください。

 

必要条件

ステップ 1: 追加スプラッシュ画面ページの作成

  1. 追加スプラッシュ画面を定義する JavaScript コードをランディング ページに関連付けます。

    スプラッシュ画面のサンプルでは、このコードを追加して、extendedSplash.js を default.html に関連付けます。

    <script src="/js/extendedSplash.js"></script>

  2. 追加スプラッシュ画面 <div> をランディング ページに追加します。

    スプラッシュ画面のサンプルではこの HTML を使って追加スプラッシュ画面 <div> をランディング ページ (default.html) の <body> に追加します。

    <div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

    id 属性と class 属性は、スタイル指定や操作に使うことができるように設定されます。追加スプラッシュ画面 <div> は "hidden" クラスも設定しているため、追加スプラッシュ画面の JavaScript コードによって表示されるまでは見えません。

  3. CSS を追加してランディング ページの追加スプラッシュ画面マークアップをスタイル設定します。

    追加スプラッシュ画面 HTML を position:absolute スタイルを使うようにスタイル設定します。絶対配置では、追加スプラッシュ画面を表示するときにアプリが画面全体を使うようにします。絶対配置はほかにも、スプラッシュ画面の画像の座標を既定のスプラッシュ画面と同じにするときにも役立ちます。

    スプラッシュ画面のサンプルでは、この CSS を (default.css に) 追加してランディング ページの追加スプラッシュ画面タグをスタイル設定します。

    .extendedSplashScreen {
    background-color:#00b2f0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.extendedSplashScreen.hidden {
    display: none;
}

#extendedSplashImage {
    position: absolute;
}

#extendedSplashDescription
{
    position: absolute;
    width: 100%;
    top: calc(100% - 140px);
    text-align: center;
}

#extendedSplashText
{
    font-family: 'Segoe UI Semilight';
    font-size: 11pt;
    text-align: center;
    width: 75%;
    color: #ffffff;
}

    これらのスタイルを定義するクラスと ID は、ランディング ページの HTML 内の追加スプラッシュ画面タグも識別します。

ステップ 2: 追加スプラッシュ画面を表示する activated イベント ハンドラーにコードを追加する

スプラッシュ画面のサンプルに関するページでは、default.js ファイルの activated イベント ハンドラー (activated 関数) を使って、追加スプラッシュ画面を表示する方法を説明しています。


function activated(eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

        // Listen for window resize events to reposition the extended splash screen image accordingly.
        // This ensures that the extended splash screen is formatted properly when the window is resized.
        window.addEventListener("resize", onResize, false);

        // Use setPromise to indicate to the system that the splash screen must not be torn down
        // until after processAll and navigate complete asynchronously.
        eventObject.setPromise(WinJS.UI.processAll().then(function () {
            // Navigate to either the first scenario or to the last running scenario
            // before suspension or termination.
            var url = WinJS.Application.sessionState.lastUrl || scenarios[0].url;
            return WinJS.Navigation.navigate(url);
        }));
    }
}

スプラッシュ画面のサンプルでは、次の手順を使って追加スプラッシュ画面を表示し、アプリがアクティブ化されたときにスプラッシュ画面の画像を配置します (default.js ファイルの activated イベント ハンドラーの中)。

  1. **既定のスプラッシュ画面の画像が表示される座標を取得します。**これらの座標は、SplashScreen オブジェクトのプロパティに格納されています。このオブジェクトには、activated イベント ハンドラーに渡されるイベント オブジェクトからアクセスできます。

    スプラッシュ画面のサンプルでは、次のコードを使って座標を取得しています。

    
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        // Retrieve splash screen object
        splash = eventObject.detail.splashScreen;

        // Retrieve the window coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;

  2. **スプラッシュ画面の dismissed イベントがあるかどうかリッスンし、アプリのリソースの読み込みを開始します。**システムが提供するスプラッシュ画面が消去されると、dismissed イベントが発生し、この場合は、アプリの追加スプラッシュ画面へと切り替わります。dismissed イベント ハンドラー内のセットアップ操作を開始し、アプリのセットアップが完了したら、追加スプラッシュ画面から移動します。

    スプラッシュ画面のサンプルでは、default.js の activated 関数の dismissed イベント ハンドラー (onSplashScreenDismissed) が登録されます。

            // Register an event handler to be executed when the splash screen has been dismissed.
        splash.addEventListener("dismissed", onSplashScreenDismissed, false);

    default.js の activated イベントの外の dismissed イベント ハンドラーを定義します。スプラッシュ画面のサンプルでは、リソースの読み込みを待つ必要がないため、ユーザーが "[詳細情報]" ボタンをクリックすると、追加スプラッシュ画面を削除します。

        function onSplashScreenDismissed() {
        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        SdkSample.dismissed = true;

        // Tear down the app's extended splash screen after completing setup operations here...
        // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
        document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
        }
    }

    extendedSplash.js ファイルに追加スプラッシュ画面を削除する関数を作ります。

        // Removes the extended splash screen if it is currently visible.
    function remove() {
        if(isVisible()) {
            var extendedSplashScreen = document.getElementById("extendedSplashScreen");
            WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
        }
    }

  3. 追加スプラッシュ画面を配置して表示します。

    スプラッシュ画面のサンプルでは、次のコードを activated イベント ハンドラー (default.js の) の中で使ってスプラッシュ画面を配置して表示します。

    
        // Create and display the extended splash screen using the splash screen object.
        ExtendedSplash.show(splash);

    extendedSplash.js に、追加スプラッシュ画面画像を配置する関数を追加します。

    
// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");

    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";

    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
    /*
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
    */

    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

  4. **Windows (Windows Phone ではない) 場合: ウィンドウ サイズ変更イベントがあるかどうかをリッスンし、スプラッシュ画面画像を再配置して応答します。**こうすると、アプリのサイズが変わった場合でも、追加スプラッシュ画面が正しく表示されます。可変レイアウトを作るか、ViewBox などの可変コントロールにコンテンツを配置する場合、向きの変更は自動的に処理されます。

    activated イベント ハンドラー (default.js 内) にサイズ変更イベント ハンドラーを登録します。

                // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to resizing, rotation, etc...
            window.addEventListener("resize", onResize, false);

    次に、イベント ハンドラーを定義するコードを追加します。この関数は、更新された画像の位置の座標を取得してから、追加スプラッシュ画面ページの画像の位置を更新する別の関数を呼び出します。

    function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

    このサンプルでは、extendedSplash.js で updateImageLocation を定義します。これによって、追加スプラッシュ画面が表示されている場合に、システムで表示されるスプラッシュ画面と同じ場所に追加スプラッシュ画面の画像が配置されます。

    function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}

注釈

ヒント  追加スプラッシュ画面への切り替え中にちらつきが生じる場合は、<img> タグに onload="" を追加して、<img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" /> のようにします。こうすることで、追加スプラッシュ画面への切り替え前に画像がレンダリングされるまでシステムを待機させて、ちらつきを防ぐことができます。

 

関連トピック

アプリをアクティブ化する方法

スプラッシュ画面のサンプル

Guidelines for splash screens

How to extend the splash screen (Windows Runtime apps using C#/VB/C++ and XAML)

辞書/リファレンス

WinJS.Application.onactivated event

Windows.ApplicationModel.Activation namespace

Windows.ApplicationModel.Activation.splashScreen class

Windows.ApplicationModel.Activation.splashScreen.imageLocation property