はじめに
「Webサイトを一定時間ごとに自動で更新したいけれど、Chromeではどう設定すればいいの？」
「自分で作ったWebページをHTMLやJavaScriptで自動更新するには、どんな方法があるの？」と迷っていませんか。
商品の在庫状況や管理画面など、内容が変わるページを確認するたびに更新ボタンを押していると、数分おきに同じ操作を繰り返すことになり、画面から目を離しにくくなりますよね。
この記事では、Chrome拡張機能を使う方法から、HTML・JavaScriptで自動更新を設定する方法、うまく更新されない場合の確認ポイントまで紹介します。
Webサイトを自動更新する方法は目的によって異なる
Webサイトを自動更新する方法は、閲覧しているページを一定間隔で再読み込みしたいのか、自分で管理しているWebページを自動で更新したいのかによって異なります。
閲覧中のページを30秒や60秒ごとに更新したい場合は、Chromeの自動更新に対応した拡張機能を使う方法があります。一方、自分で管理しているWebページを10秒後などに再読み込みさせたい場合は、HTMLやJavaScriptに更新処理を記述します。
まずは「閲覧する側で更新したいのか」「Webページを作る側で更新したいのか」を整理すると、自分に合った方法を選びやすくなります。
Chromeの拡張機能でWebサイトを自動更新する方法
Chromeでは、自動更新に対応した拡張機能を追加すると、指定したWebサイトを一定間隔で繰り返し再読み込みできます。
ここでは、拡張機能の追加からWebサイトの自動更新を開始・停止するまでの手順を順に説明します。
自動更新の拡張機能をChromeに追加する
ChromeでWebサイトを自動更新するには、まずChromeウェブストアを開き、自動更新に対応した拡張機能を探します。
使いたい拡張機能のページを開いて「Chromeに追加」をクリックし、確認画面で「拡張機能を追加」を選択するとインストールできます。
自動更新したいWebサイトを開く
拡張機能を追加したら、Chromeで自動更新したいWebサイトを開きます。
複数のタブを開いている場合は対象のタブを選び、Chrome右上の拡張機能アイコンから追加した自動更新の拡張機能を開きましょう。
更新間隔を設定して自動更新を開始する
拡張機能を開いたら、10秒、30秒、1分など、ページを再読み込みする間隔を設定します。
たとえば30秒に設定して開始ボタンを押すと、対象のページが30秒ごとに自動で再読み込みされるようになります。
Webサイトの自動更新を停止する
自動更新を止めたい場合は、対象のページを開いた状態で拡張機能を表示します。
停止ボタンを押すと自動更新が終了し、その後は設定していた間隔が経過してもページが自動で再読み込みされません。
自分のWebサイトを自動更新する方法
自分で管理しているWebサイトなら、ページ側に自動更新の処理を組み込むことで、指定した秒数ごとに再読み込みできます。
ここでは、HTMLとJavaScriptを使ってWebサイトを自動更新する方法を順に説明します。
HTMLのmeta refreshで一定時間ごとに自動更新する
HTMLだけでページを自動更新したい場合は、<head>内にmeta refreshを記述します。
contentには更新までの秒数を指定し、たとえばcontent="30"と設定すると、30秒後にページが再読み込みされます。
再読み込み後も同じ設定が適用されるため、その後も30秒ごとに自動更新されます。
meta refreshを設定するときに、書き方だけでなくHTMLの基本的な記述方法も確認したい場合はこちらも参考にしてください。
▶HTMLの書き方とは？基本構造やタグの使い方を初心者向けに解説
JavaScriptのlocation.reload()で自動更新する
JavaScriptを使う場合は、location.reload()を一定時間ごとに実行するように設定します。
たとえばsetInterval()を30000ミリ秒に設定すると、30秒ごとにlocation.reload()が実行され、そのたびに現在のページが再読み込みされます。
JavaScriptで自動更新を設定する際に、setInterval()の仕組みや時間指定の方法も確認しておくと設定しやすくなります。
▶JavaScriptのsetInterval()とは？一定時間ごとに処理を実行する方法を解説
Webサイトが自動更新されないときの確認ポイント
自動更新を設定してもWebサイトが再読み込みされない場合は、拡張機能と更新間隔の設定を順番に確認します。
ここでは、Webサイトが自動更新されないときに確認する3つのポイントを順に説明します。
拡張機能が対象サイトで有効になっているか確認する
Webサイトが自動更新されない場合は、対象のページを開いた状態で、Chrome右上の拡張機能アイコンをクリックします。
使用している自動更新の拡張機能を開き、そのページで自動更新が開始されているか確認しましょう。
停止している場合は開始操作を行い、自動更新を有効にします。
自動更新の間隔が正しく設定されているか確認する
拡張機能を開き、更新間隔が10秒、30秒、1分など、希望する時間に設定されているか確認します。
たとえば30秒ごとに更新したい場合は30秒に設定して開始し、実際にページが再読み込みされるか確認しましょう。
自動更新できないページではないか確認する
拡張機能や更新間隔に問題がない場合は、対象のページで自動更新が正常に動作するか確認します。
ログイン画面などでは、再読み込みによって入力内容やログイン状態が変わり、自動更新がうまく続かない場合があります。
別のページでは問題なく自動更新できる場合は、元のページ側に再読み込みを妨げる仕組みがある可能性があります。
まとめ
Webサイトを自動更新したいときは、まず「閲覧中のページを更新したいのか」「自分で管理するページを更新したいのか」を整理すると、方法を選びやすくなります。
Chromeで閲覧中のページを更新するなら拡張機能、自分のWebページならHTMLやJavaScriptを使う方法があります。うまく更新されないときは、拡張機能の状態や更新間隔を確認してみましょう。
自動更新は便利な機能ですが、間隔を短くしすぎるとアクセス回数が増えるため、必要な頻度に合わせて無理のない設定で活用してみてください。
