HTMLページでスプラッシュスクリーンを一度だけ表示する方法

2024-02-15 16:45 HTML JavaScript

方法1: Cookieを使用する方法

<!DOCTYPE html>
<html>
<head>
    <title>Splash Screen</title>
    <script>
        function checkSplashScreen() {
            var splashScreenShown = getCookie("splashScreenShown");
            if (splashScreenShown) {
                // スプラッシュスクリーンを表示しない
                document.getElementById("splashScreen").style.display = "none";
            } else {
                // スプラッシュスクリーンを表示する
                document.getElementById("splashScreen").style.display = "block";
                // Cookieを設定する
                setCookie("splashScreenShown", true, 365);
            }
        }
        function setCookie(name, value, days) {
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toUTCString();
            }
            document.cookie = name + "=" + (value || "") + expires + "; path=/";
        }
        function getCookie(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
    </script>
    <style>
        #splashScreen {
            /* スプラッシュスクリーンのスタイルを設定 */
        }
    </style>
</head>
<body onload="checkSplashScreen()">
    <div id="splashScreen">
        <!-- スプラッシュスクリーンのコンテンツをここに追加 -->
    </div>
    <!-- メインコンテンツをここに追加 -->
</body>
</html>

方法2: LocalStorageを使用する方法

<!DOCTYPE html>
<html>
<head>
    <title>Splash Screen</title>
    <script>
        function checkSplashScreen() {
            var splashScreenShown = localStorage.getItem("splashScreenShown");
            if (splashScreenShown) {
                // スプラッシュスクリーンを表示しない
                document.getElementById("splashScreen").style.display = "none";
            } else {
                // スプラッシュスクリーンを表示する
                document.getElementById("splashScreen").style.display = "block";
                // LocalStorageにフラグを設定する
                localStorage.setItem("splashScreenShown", true);
            }
        }
    </script>
    <style>
        #splashScreen {
            /* スプラッシュスクリーンのスタイルを設定 */
        }
    </style>
</head>
<body onload="checkSplashScreen()">
    <div id="splashScreen">
        <!-- スプラッシュスクリーンのコンテンツをここに追加 -->
    </div>
    <!-- メインコンテンツをここに追加 -->
</body>
</html>

以上のコード例では、CookieまたはLocalStorageを使用して、スプラッシュスクリーンが一度だけ表示されるようにしています。最初にスプラッシュスクリーンが表示された後は、ユーザーがページに戻ってきても表示されません。

この方法を使用する場合、スプラッシュスクリーンのスタイルやコンテンツを適宜変更してください。また、必要に応じて他の方法やテクニクニックを使用することもできます。たとえば、セッションストレージやデータベースを使用する方法などがあります。必要に応じて、アプリケーションの要件に合わせて最適な方法を選択してください。

なお、上記のコード例はHTMLとJavaScriptを組み合わせたものです。スプラッシュスクリーンのスタイルはCSSで設定することができます。また、スプラッシュスクリーンのコンテンツは<div>タグなどで囲んで追加することができます。

以上が、HTMLページでスプラッシュスクリーンを一度だけ表示する方法となります。