HTMLページの自動更新と自動更新オンオフボタンの設置方法

お役立ち情報,プログラムCSS,HTML,JavaScript,自動更新

ページを自動更新して、かつ自動更新のオンオフを切り替えたかったので作りました。

やりたいことは以下のとおり。

  • 数秒おきにページを再読み込みしたい
  • トグルスイッチで自動再読み込みのオンオフを切り替えたい

バックグラウンドで HTML ページを作成して、それを再読み込みすることで情報更新したいのですが、ユーザ都合によっては自動更新を止めたい場合を想定してこのような仕組みを実装しています。

今回は CSS を使ってトグルボタンを作成し、JavaScript を使ってページの自動更新と自動更新機能のオンオフを実装しました。

HTML ファイル全体

一つの HTML ファイル内で CSS でボタンの設定まで行い、ボタンがオンの間は自動更新（3 秒おき）し、ボタンがオフになると自動更新を止めるサンプルです。サンプルページはこちら。下の方で解説します。

<!DOCTYPE html>
<html>

<head>
    <title>自動更新切り替えテストページ</title>
    <meta charset="utf-8">
    <style type="text/css">
        .toggle_input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
            opacity: 0;
            cursor: pointer;
        }

        .toggle_label {
            width: 75px;
            height: 35px;
            background: #aaa;
            position: relative;
            display: inline-block;
            border-radius: 40px;
            transition: 0.4s;
            box-sizing: border-box;
        }

        .toggle_label:after {
            content: "";
            position: absolute;
            width: 35px;
            height: 35px;
            border-radius: 100%;
            left: 0;
            top: 0;
            z-index: 2;
            background: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            transition: 0.4s;
        }

        .toggle_input:checked+.toggle_label {
            background-color: #4BD865;
        }

        .toggle_input:checked+.toggle_label:after {
            left: 40px;
        }

        .toggle_button {
            position: relative;
            width: 75px;
            height: 35px;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="toggle_button">
        <input id="reload_toggle" class="toggle_input" type='checkbox' checked/>
        <label for="reload_toggle" class="toggle_label" />
    </div>
</body>

<script text="text/javascipt">

    // ページを更新するかどうかのフラグ
    reload_flag = true;

    // ページを更新するための関数
    function doReload(){
        if(reload_flag){
            window.location.reload();
        }
    }

    // ページロードが完了したら呼び出すイベントリスナー
    window.addEventListener('load', function(){
        // ページロード完了後, 3 秒後にリロード
        setTimeout(doReload, 3000);
    });

    window.addEventListener('DOMContentLoaded', function(){
        // 更新オンオフのトグルボタンを取得
        const reload_button = document.getElementById('reload_toggle');
        reload_button.addEventListener('change', reload_toggle_status, false);

        function reload_toggle_status(){
            if(this.checked){
                reload_flag = true;
                doReload();
            }
            else{
                reload_flag = false;
            }
        }
    });
</script>

</html>

自動更新する JavaScript

JavaScript を使って更新機能を実装します。まず画面を更新（リロード）する関数はこのように書けます。

// ページを更新するための関数
function doReload(){
    window.location.reload();
}

この doReload() 関数を呼び出せばリロードできるので、ページ読み込みごとに、一定時間で doReload() 関数を呼び出すようにしておけば自動更新はできます。setTimeout 関数を使います。

// ページロードが完了したら呼び出すイベントリスナー
window.addEventListener('load', function(){
    // ページロード完了後, 3 秒後 (3000 ミリ秒後) にリロード
    setTimeout(doReload, 3000);
});

つづいて、自動更新機能のオンオフを切り替える仕組みを作っていきます。

ボタンの設置

まずはトグルボタンを設置します。CSS で作成しました。正直 CSS なしのチェックボックスでも十分ですが、カッコつけたかっただけです。

CSS 設定

.toggle_input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.toggle_label {
    width: 75px;
    height: 35px;
    background: #aaa;
    position: relative;
    display: inline-block;
    border-radius: 40px;
    transition: 0.4s;
    box-sizing: border-box;
}

.toggle_label:after {
    content: "";
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s;
}

.toggle_input:checked+.toggle_label {
    background-color: #4BD865;
}

.toggle_input:checked+.toggle_label:after {
    left: 40px;
}

.toggle_button {
    position: relative;
    width: 75px;
    height: 35px;
    margin: auto;
}

HTML

HTML では以下のように記述して設置します。

<div class="toggle_button">
    <input id="reload_toggle" class="toggle_input" type='checkbox' checked/>
    <label for="reload_toggle" class="toggle_label" />
</div>

デフォルトでは自動更新が行われる設定にしておきたかったので checked オプションをつけています。

ボタンに連動して自動更新をオンオフ

ボタンのオンオフに連動して自動更新の設定を切り替える仕組みをつくります。

まずは自動更新の機能切り替えを保持するブーリアンな変数 reload_flag を用意します。

// ページを更新するかどうかのフラグ
reload_flag = true;

続いて、トグルボタンが押されたときのイベントリスナーを追加します。

トグルボタンが押された時に reload_flag の true と false を入れ替えるとともに、今回の場合ではボタン押下後すぐに更新したいので doReload() 関数も呼んでいます。

window.addEventListener('DOMContentLoaded', function(){
    // 更新オンオフのトグルボタンを取得
    const reload_button = document.getElementById('reload_toggle');
    reload_button.addEventListener('change', reload_toggle_status, false);

    function reload_toggle_status(){
        // チェックボックス (トグルボタン) の状態で場合分け
        if(this.checked){
            reload_flag = true; // どうせ doReload で更新するのでこの文はなくてもいい
            // チェックボックスが切り替わったらすぐに更新したい
            doReload();
        }
        else{
            reload_flag = false;
        }
    }
});

また doReload() 関数自体について、reload_flag が false のときにはリロードがなされないように、if の条件分岐を追加しておきます。

// ページを更新するための関数 (reload_flag 導入に伴い書き換え)
function doReload(){
    if(reload_flag){
        window.location.reload();
    }
}

以上で「ページの自動更新し、設定をボタンで切り替えられる機能」が実装できました。サンプルページはこちら。

参考資料

お役立ち情報,プログラムCSS,HTML,JavaScript,自動更新

Posted by 村橋 究理基