スプラッシュスクリーンの表示時間の延長

[アーティクル]
06/02/2023

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

注意

このトピックで "追加スプラッシュ画面" という用語は、表示される時間が延長されたスプラッシュ画面を指します。 SplashScreen クラスを拡張するサブクラスやこのクラスから派生したサブクラスという意味ではありません。

重要な API

このトピックでは、次の API を使用します。

既定のスプラッシュスクリーンの推奨事項

追加スプラッシュ画面の外観は、次の推奨事項に従って、既定のスプラッシュ画面に厳密に似せるようにしてください。

この追加スプラッシュ画面ページでは、アプリマニフェスト内でスプラッシュ画面に指定したイメージ (アプリのスプラッシュ画面のイメージ) と一致する 620 x 300 ピクセルのイメージを使います。 Microsoft Visual Studio では、スプラッシュスクリーンの設定は、アプリマニフェスト (Package.appxmanifest ファイル) の [Visual Assets] タブの [スプラッシュスクリーン] セクションに格納されます。
追加スプラッシュ画面では、アプリマニフェスト内でスプラッシュ画面に指定した背景色 (アプリのスプラッシュ画面の背景) と一致する背景色を使います。
コードでは、SplashScreen クラスを使って、アプリのスプラッシュ画面画像の座標が、既定のスプラッシュ画面と同じになるようにします。
コードでは、SplashScreen クラスを使って追加スプラッシュ画面上の項目を配置し直すことで、ウィンドウサイズ変更イベント (画面が回転されたり、画面上で次の別のアプリに移動したりするなど) に応答するようにする必要があります。

次の手順を使うと、既定のスプラッシュ画面とよく似た追加スプラッシュ画面を作成できます。

[空白のページ] 項目を既にあるアプリに追加する

また、このトピックでは、C#、Visual Basic、C++ を使って、既にあるユニバーサル Windows プラットフォーム (UWP) アプリプロジェクト用の追加スプラッシュ画面を作成することを想定しています。

Visual Studio でアプリを開きます。
メニューバーから [プロジェクト] を開き、[新しい項目の追加] をクリックします。 [新しい項目の追加] ダイアログボックスが表示されます。
このダイアログボックスから新しい空白のページをアプリに追加します。このトピックでは、追加スプラッシュ画面ページの名前を "ExtendedSplash" とします。

[空白のページ] 項目を追加すると、2 つのファイルが生成されます。1 つはマークアップ用 (ExtendedSplash.xaml)、もう 1 つはコード用 (ExtendedSplash.xaml.cs) です。

追加スプラッシュ画面の基本的な XAML

次の手順に従って、追加スプラッシュ画面にイメージやプログレスコントロールを追加します。

ExtendedSplash.xaml ファイルで次の操作を行います。

既定の Grid 要素の Background プロパティを変更して、アプリマニフェスト (Package.appxmanifest ファイルの [ビジュアル資産] セクション) でアプリのスプラッシュ画面に設定した背景色に合わせます。既定のスプラッシュ画面の色は薄い灰色 (16 進数 #464646) です。新しい空白のページを作成すると、この Grid 要素が既定で使われることに注意してください。必ずしも Grid を使う必要はありません。追加スプラッシュ画面を作り始めるときに便利なだけです。
Grid に Canvas 要素を追加します。この Canvas を使って追加スプラッシュ画面にイメージを配置します。
Image 要素を Canvas に追加します。既定のスプラッシュスクリーンに選択したのと同じ 620 x 300 ピクセルのイメージを拡張スプラッシュスクリーンに使用します。
(省略可能) アプリが読み込み中であることをユーザーに示すにはプログレスコントロールを追加します。このトピックでは、確定または不定の ProgressBar ではなく、ProgressRing を追加します。

次の例は、これらの追加と変更が行われた Grid を示しています。

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"></ProgressRing>
        </Canvas>
    </Grid>

注意

この例では、ProgressRing の幅を 20 ピクセルに設定しています。この幅はアプリに合わせて手動で設定できますが、20 ピクセル未満の幅ではコントロールがレンダリングされません。

追加スプラッシュ画面クラスの基本的なコード

追加スプラッシュ画面はウィンドウのサイズ (Windows のみ) や向きの変更に応答する必要があります。ウィンドウのサイズがどのように変更されても追加スプラッシュ画面が適切に表示されるように、使う画像の位置は更新される必要があります。

これらの手順を使って、追加スプラッシュ画面を正しく表示するためのメソッドを定義します。

必要な名前空間を追加する

SplashScreen クラス、Rect 構造体、および Window.SizeChanged イベントにアクセスするには、ExtendedSplash.xaml.cs に次の名前空間を追加する必要があります。
```
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.UI.Core;
```
部分クラスを作成し、クラス変数を宣言する

次のコードを ExtendedSplash.xaml.cs に挿入して、追加スプラッシュ画面を表す部分クラスを作成します。
```
partial class ExtendedSplash : Page
{
    internal Rect splashImageRect; // Rect to store splash screen image coordinates.
    private SplashScreen splash; // Variable to hold the splash screen object.
    internal bool dismissed = false; // Variable to track splash screen dismissal status.
    internal Frame rootFrame;

   // Define methods and constructor
}
```
これらのクラス変数は、複数のメソッドで使われます。 splashImageRect は、アプリのスプラッシュ画面のイメージが表示された座標を格納する変数です。変数は splashSplashScreen オブジェクトを格納し dismissed 、システムによって表示されるスプラッシュスクリーンが無視されたかどうかを追跡します。

画像を正しく配置するクラスのコンストラクターを定義する

次のコードでは、ウィンドウサイズ変更イベントをリッスンする追加スプラッシュ画面クラスのコンストラクターを定義し、追加スプラッシュ画面にイメージ (必要に応じてプログレスコントロール) を配置し、ナビゲーション用のフレームを作成し、保存済みのセッションを復元する非同期メソッドを呼び出しています。

public ExtendedSplash(SplashScreen splashscreen, bool loadState)
{
    InitializeComponent();

    // Listen for window resize events to reposition the extended splash screen image accordingly.
    // This ensures that the extended splash screen formats properly in response to window resizing.
    Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

    splash = splashscreen;
    if (splash != null)
    {
        // Register an event handler to be executed when the splash screen has been dismissed.
        splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

        // Retrieve the window coordinates of the splash screen image.
        splashImageRect = splash.ImageLocation;
        PositionImage();

        // If applicable, include a method for positioning a progress control.
        PositionRing();
    }

    // Create a Frame to act as the navigation context
    rootFrame = new Frame();            
}

アプリが追加スプラッシュ画面でイメージを正しく配置できるように、クラスコンストラクターに Window.SizeChanged ハンドラー (この例の ExtendedSplash_OnResize) を登録します。

追加スプラッシュ画面にイメージを配置するクラスのメソッドを定義する

次のコードでは、splashImageRect クラス変数を使って追加スプラッシュ画面ページにイメージを配置する方法を示しています。

void PositionImage()
{
    extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
    extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
    extendedSplashImage.Height = splashImageRect.Height;
    extendedSplashImage.Width = splashImageRect.Width;
}

(省略可能) 追加スプラッシュ画面にプログレスコントロールを配置するクラスのメソッドを定義する

ProgressRing を追加スプラッシュ画面に追加する場合、スプラッシュ画面のイメージに相対的に配置します。 ExtendedSplash.xaml.cs で、ProgressRing をイメージの 32 ピクセル下の中央に配置する次のコードを追加します。
```
void PositionRing()
{
    splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
    splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
}
```
クラス内で Dismissed イベントのハンドラーを定義する

ExtendedSplash.xaml.cs で、クラス変数を true に設定することで、dismissedSplashScreen.Dismissed イベントが発生したときに応答するようにします。アプリにセットアップ操作がある場合は、それらの操作をこのイベントハンドラーに追加します。
```
// Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
void DismissedEventHandler(SplashScreen sender, object e)
{
    dismissed = true;

    // Complete app setup operations here...
}
```
アプリのセットアップが完了したら、追加スプラッシュ画面から移動するようにします。次のコードでは、アプリの MainPage.xaml ファイルで定義されている MainPage に移動する DismissExtendedSplash というメソッドを定義しています。
```
async void DismissExtendedSplash()
  {
     await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() =>            {
          rootFrame = new Frame();
          rootFrame.Content = new MainPage(); Window.Current.Content = rootFrame;
        });
  }
```
クラス内で Window.SizeChanged イベントのハンドラーを定義する

ユーザーによってウィンドウのサイズが変更された場合にその要素を配置し直すように、追加スプラッシュ画面を準備します。このコードでは、新しい座標を取得してイメージを配置し直すことで、Window.SizeChanged イベントが発生したときに応答するようにしています。追加スプラッシュ画面にプログレスコントロールを追加した場合は、同様に、このイベントハンドラー内でそのコントロールを配置し直すようにします。
```
void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
{
    // Safely update the extended splash screen image coordinates. This function will be executed when a user resizes the window.
    if (splash != null)
    {
        // Update the coordinates of the splash screen image.
        splashImageRect = splash.ImageLocation;
        PositionImage();

        // If applicable, include a method for positioning a progress control.
        // PositionRing();
    }
}
```
注意

画像の場所を取得する前に、クラス変数 (splash) に有効な SplashScreen オブジェクトが含まれていることを確認してください (例を参照)。
(省略可能) クラスメソッドを追加して保存済みのセッション状態を復元する

手順 4「起動アクティブ化ハンドラーの変更」で OnLaunched メソッドに追加したコードにより、アプリでは起動時に追加スプラッシュ画面が表示されます。追加スプラッシュ画面クラスにアプリの起動に関連するすべてのメソッドを統合するには、ExtendedSplash.xaml.cs ファイルに、アプリの状態を復元するメソッドを追加することを検討します。
```
void RestoreState(bool loadState)
{
    if (loadState)
    {
         // code to load your app's state here
    }
}
```
App.xaml.cs で起動アクティブ化ハンドラーを変更すると、アプリの前の ApplicationExecutionState が終了した場合も true に設定loadstateされます。その場合、RestoreState メソッドは、アプリを前の状態に復元します。アプリの起動、中断、終了の概要については、「アプリのライフサイクル」をご覧ください。

起動アクティブ化ハンドラーの変更

アプリが起動されるとき、スプラッシュ画面の情報がアプリの起動アクティブ化イベントハンドラーに渡されます。この情報を使って、追加スプラッシュ画面ページにイメージを適切に配置できます。このスプラッシュ画面の情報は、アプリの OnLaunched ハンドラーに渡されるアクティブ化イベント引数から取得できます (次のコードの args 変数を参照)。

アプリの OnLaunched ハンドラーをまだオーバーライドしていない場合、アクティブ化イベントを処理する方法については、「アプリのライフサイクル」をご覧ください。

App.xaml.cs ファイルで、追加スプラッシュ画面を作成して表示する次のコードを挿入します。

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState != ApplicationExecutionState.Running)
    {
        bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
        ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
        Window.Current.Content = extendedSplash;
    }

    Window.Current.Activate();
}

コードを完成させる

次のコードは、前の手順で示したスニペットとは少し異なります。

ExtendedSplash.xaml には DismissSplash ボタンが含まれています。このボタンがクリックされると、イベントハンドラーである DismissSplashButton_Click が DismissExtendedSplash メソッドを呼び出します。アプリで、リソースの読み込みまたは UI の初期化の完了時に DismissExtendedSplash を呼び出します。
このアプリは、Frame ナビゲーションを使う、UWP アプリのプロジェクトテンプレートも使います。その結果、App.xaml.cs ファイルで、起動アクティブ化ハンドラー (OnLaunched) は rootFrame を定義し、それを使ってアプリのウィンドウのコンテンツを設定します。

ExtendedSplash.xaml

この例には DismissSplash ボタンが含まれています。読み込むアプリのリソースがないためです。アプリでは、リソースの読み込みまたはその最初の UI の準備の完了時に追加スプラッシュ画面が自動的に閉じられます。

<Page
    x:Class="SplashScreenExample.ExtendedSplash"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SplashScreenExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#464646">
        <Canvas>
            <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png"/>
            <ProgressRing Name="splashProgressRing" IsActive="True" Width="20" HorizontalAlignment="Center"/>
        </Canvas>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Button x:Name="DismissSplash" Content="Dismiss extended splash screen" HorizontalAlignment="Center" Click="DismissSplashButton_Click" />
        </StackPanel>
    </Grid>
</Page>

ExtendedSplash.xaml.cs

DismissExtendedSplash メソッドが DismissSplash ボタンのクリックイベントハンドラーから呼び出されることに注意してください。アプリでは、DismissSplash ボタンは不要です。その代わりに、アプリがリソースの読み込みの完了時に DismissExtendedSplash を呼び出し、そのメインページに移動します。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

using Windows.ApplicationModel.Activation;
using SplashScreenExample.Common;
using Windows.UI.Core;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234238

namespace SplashScreenExample
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    partial class ExtendedSplash : Page
    {
        internal Rect splashImageRect; // Rect to store splash screen image coordinates.
        private SplashScreen splash; // Variable to hold the splash screen object.
        internal bool dismissed = false; // Variable to track splash screen dismissal status.
        internal Frame rootFrame;

        public ExtendedSplash(SplashScreen splashscreen, bool loadState)
        {
            InitializeComponent();

            // 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 snapping, unsnapping, rotation, etc...
            Window.Current.SizeChanged += new WindowSizeChangedEventHandler(ExtendedSplash_OnResize);

            splash = splashscreen;

            if (splash != null)
            {
                // Register an event handler to be executed when the splash screen has been dismissed.
                splash.Dismissed += new TypedEventHandler<SplashScreen, Object>(DismissedEventHandler);

                // Retrieve the window coordinates of the splash screen image.
                splashImageRect = splash.ImageLocation;
                PositionImage();

                // Optional: Add a progress ring to your splash screen to show users that content is loading
                PositionRing();
            }

            // Create a Frame to act as the navigation context
            rootFrame = new Frame();

            // Restore the saved session state if necessary
            RestoreState(loadState);
        }

        void RestoreState(bool loadState)
        {
            if (loadState)
            {
                // TODO: write code to load state
            }
        }

        // Position the extended splash screen image in the same location as the system splash screen image.
        void PositionImage()
        {
            extendedSplashImage.SetValue(Canvas.LeftProperty, splashImageRect.X);
            extendedSplashImage.SetValue(Canvas.TopProperty, splashImageRect.Y);
            extendedSplashImage.Height = splashImageRect.Height;
            extendedSplashImage.Width = splashImageRect.Width;

        }

        void PositionRing()
        {
            splashProgressRing.SetValue(Canvas.LeftProperty, splashImageRect.X + (splashImageRect.Width*0.5) - (splashProgressRing.Width*0.5));
            splashProgressRing.SetValue(Canvas.TopProperty, (splashImageRect.Y + splashImageRect.Height + splashImageRect.Height*0.1));
        }

        void ExtendedSplash_OnResize(Object sender, WindowSizeChangedEventArgs e)
        {
            // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
            if (splash != null)
            {
                // Update the coordinates of the splash screen image.
                splashImageRect = splash.ImageLocation;
                PositionImage();
                PositionRing();
            }
        }

        // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
        void DismissedEventHandler(SplashScreen sender, object e)
        {
            dismissed = true;

            // Complete app setup operations here...
        }

        void DismissExtendedSplash()
        {
            // Navigate to mainpage
            rootFrame.Navigate(typeof(MainPage));
            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }

        void DismissSplashButton_Click(object sender, RoutedEventArgs e)
        {
            DismissExtendedSplash();
        }
    }
}

App.xaml.cs

このプロジェクトは、UWP アプリの [新しいアプリケーション (XAML)] プロジェクトテンプレートを使用して Visual Studio で作成されました。 OnNavigationFailed と OnSuspending の両方のイベントハンドラーは自動的に生成され、追加スプラッシュ画面を実装するために変更する必要はありません。このトピックでは、OnLaunched のみを変更します。

アプリにプロジェクトテンプレートを使わなかった場合、Frame ナビゲーションを使用しないように変更した OnLaunched の例については、手順 4「起動アクティブ化ハンドラーの変更」をご覧ください。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Application template is documented at https://go.microsoft.com/fwlink/p/?LinkID=234227

namespace SplashScreenExample
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            Microsoft.ApplicationInsights.WindowsAppInitializer.InitializeAsync(
            Microsoft.ApplicationInsights.WindowsCollectors.Metadata |
            Microsoft.ApplicationInsights.WindowsCollectors.Session);
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }

        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used such as when the application is launched to open a specific file.
        /// </summary>
        /// <param name="e">Details about the launch request and process.</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
                // Set the default language
                rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                rootFrame.NavigationFailed += OnNavigationFailed;

                //  Display an extended splash screen if app was not previously running.
                if (e.PreviousExecutionState != ApplicationExecutionState.Running)
                {
                    bool loadState = (e.PreviousExecutionState == ApplicationExecutionState.Terminated);
                    ExtendedSplash extendedSplash = new ExtendedSplash(e.SplashScreen, loadState);
                    rootFrame.Content = extendedSplash;
                    Window.Current.Content = rootFrame;
                }
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

        /// <summary>
        /// Invoked when Navigation to a certain page fails
        /// </summary>
        /// <param name="sender">The Frame which failed navigation</param>
        /// <param name="e">Details about the navigation failure</param>
        void OnNavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load Page " + e.SourcePageType.FullName);
        }

        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender">The source of the suspend request.</param>
        /// <param name="e">Details about the suspend request.</param>
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            // TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

アプリのライフサイクル

参照

スプラッシュスクリーンの表示時間の延長

重要な API

既定のスプラッシュスクリーンの推奨事項

[空白のページ] 項目を既にあるアプリに追加する

追加スプラッシュ画面の基本的な XAML

追加スプラッシュ画面クラスの基本的なコード

起動アクティブ化ハンドラーの変更

コードを完成させる

ExtendedSplash.xaml

ExtendedSplash.xaml.cs

App.xaml.cs

フィードバック

フィードバック

その他のリソース

スプラッシュ スクリーンの表示時間の延長

重要な API

既定のスプラッシュ スクリーンの推奨事項

[空白のページ] 項目を既にあるアプリに追加する

追加スプラッシュ画面の基本的な XAML

追加スプラッシュ画面クラスの基本的なコード

起動アクティブ化ハンドラーの変更

コードを完成させる

ExtendedSplash.xaml

ExtendedSplash.xaml.cs

App.xaml.cs

関連トピック

フィードバック

フィードバック

その他のリソース

スプラッシュスクリーンの表示時間の延長

既定のスプラッシュスクリーンの推奨事項