0%

Programmingプログラミングナレッジ

Posted:2019.01.06

javascriptで一定時間ごとにページの自動リロードを行う

2019年一発目の記事投稿です。今年も当サイトのオウンドメディアをよろしくお願いいたします。ありがたいことに新年早々、コーディング作業に追われているところで、その時に使えそうなものをメモしておきたいと思います。今回はタイトルの通りなのですが、ページの自動リロードを一定時間ごとに行うものです。最近ではスポーツのリアルタイム実況サイトなどでよく見かける機能ですね。

 

コーディング作業中は基本的にGulpでいろんなタスクを走らせており、その中でもファイル更新のタイミングでローカルサーバーと連携したページの自動リロードなどを使っています。(参考記事「Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す」

 

これも大変便利なのですが、使っているうちにメモリ消費量がかなり増えてきて、だんだんPCの動作が重たくなってくることもしばしばあります。。特に開発専用のPCではなく、出先で作業する場合などはあまりメモリを積んだPCでない場合もあるので、ストレスに感じていました。

 

とはいえ、いちいちブラウザのリロードを行うのも面倒、、ということで、javascriptでタイマーを設定したページの自動リロードを行うスクリプトを入れてみました。と言っても数行のコードで実装できてしまいます。

【javascript】

const timer = 60000    // ミリ秒で間隔の時間を指定
window.addEventListener('load',function(){
  setInterval('location.reload()',timer);
});

 

「setInterval」は一定時間ごとに実行させる関数です。引数に実行させる関数と、間隔の時間をミリ秒で指定します。ただし、ページがロードされたイベントで実行させているため、実際には一定時間経過後に実行させる関数の「setTimeout」を使っても同じようになります。タイマーの時間は変数で保持させても、直接引数に指定してもどちらでもOKです。

 

ちなみに他のサイトにもあった情報によると、下記のHTMLのメタタグでも自動リロードが設定できるようですね。リロードまでの秒数を指定し、こちらではリダイレクト先のURLも直接指定できます。ただし、デバッグ目的でHTMLを編集するのはワークフロー上あまりよろしくないのでしょうか、、

<meta http-equiv="refresh" content="[秒数]; URL=[リダイレクトURL]">

 


 

いかがでしょうか、このようにコーディング効率化目的で使うのもいいですし、実際に自動リロード機能として実装する時にも使えるのではないでしょうか。

 

(参考にさせて頂いたサイト)
ブラウザを自動的にリロードするいくつかの方法

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ