【HTML】煩わしいリロードとはおさらばできます!ブラウザ自動更新設定方法解説

公開日: 2022.03.11
更新日: 2024.01.06
ブラウザ自動更新設定方法解説

自動更新方法

WEBアプリを制作しているときに、ページを自動更新させたいと思ったことはありませんか?

例えば、チャットアプリやSNS風の投稿アプリを制作している場合、ユーザーに毎度更新ボタンを押させるのはユーザビリティを欠いていると思います。

チャットアプリは特に更新頻度が高く、最新の情報をユーザーに届けたいのでHTMLにコード1行追加し、〇秒に1度自動更新する設定を施しましょう。

HTML設定

HTMLの設定はとても簡単です。下記のコードを<head>要素に追加してください。

<meta http-equiv="refresh" content="10">
HTMLの設定

metaタグ要素のhttp-equiv属性に対して、refreshを指定してあげることで、WEBページをリロードすることができます。

その後のcontent属性に時間を指定することができるので、何秒おきに更新したいのか設定が可能です。

今回の例の場合、10秒ごとにページをリロードする設定になっています。

注意事項
開発中の自動リロード設定として使用していた場合は納品時に必ず消すようにしましょう。 注意書きをコメントアウトしておくことをオススメします。

JavaScript設定

JavaScriptを使用した場合、setTimeout()location.reload()関数を使用します。

先ほどの <meta http-equiv="refresh" content="10"> をコメントアウトして、<body>タグの下部に以下のコードを追加してください。

<script>
        setTimeout(function () {
        location.reload();
        }, 10000);
 </script>
HTMLの設定

これで先ほどと同じく、10秒(10000ミリ秒)に1度ページを自動更新する処理が設定できました。

注意事項
先ほどと同じく、開発中の自動リロード設定として使用していた場合は納品時に必ず消すようにしましょう。 注意書きをコメントアウトしておくことをオススメします。

*番外編エディタ自動更新

開発中のリロードが煩わしい場合、HTMLやJavaScriptに記述して納品時に消し忘れた場合、クレームにつながる恐れがあります

そんな時は、エディタ側に自動更新機能を設定しましょう。この拡張機能を取り入れてから、開発の生産性が劇的に上がりました。

  • 前提状況:開発エディタにVScodeを使用している

LiveServerというプラグインをインストールしましょう。

VScodeの拡張機能もしくはCtrl+Shift+xを押してください。

検索バーに「Live」と入力し、「LiveServer」をインストールします。

右下に「Go Live」と表示されたら成功です。

HTMLの設定
Go Liveと表示されない場合
・HTMLファイルを開く ・VScodeを再起動する ・PCを再起動する

使い方としては、HTMLファイルを編集中に「GoLive」を押すと、自動的にブラウザが起動します。

この状態でHTMLファイルを保存すると、ブラウザ側も自動更新されます

コード保存も自動更新したい場合

Ctrl+SやCommand+Sのエディタ側の保存も自動にしたいというものぐささんはプログラマーに向いていると思います。

なんでも自動化して楽に生産性をあげることがプログラムを書く目的や楽しさでもあるので、どんどん自動化しましょう。

「ファイル」→「自動更新」を選択するだけです。*英語表記の場合は「File」→「Auto Save」と選択しましょう。

GoLiveと自動更新設定をすることで、集中してコードを書くことができますね。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5