WEBデザイン WORK スクリプト

JavaScriptとPHPで現在時刻をリアルタイムで時計表示する

2019年3月31日

JavaScript

WEBデザイナー歴ほぼ20年の皆川(@minagawa_osamu)です。

WEBデザイン・ホームページ制作に使える小技として、JavaScriptでリアルタイム時間表示するという記事を以前書きました。

しかしこれには弱点があって、「ローカルパソコン・ローカルデバイスの時間を取得して表示する」というもの。
つまりパソコンやタブレットなどの時間設定が狂ってたり、敢えて時間表示を変えていたりすると、正しい日本時間が表示されないんですね。

まあ最近のPCやスマホは時間を自動修正するので問題ないとは思いますが、上記の弱点を回避する策として「WEBサーバーの時間を参照する」という方法で表示できるようにしたものを作りましたのでご紹介します。

何がいいっていうと、先程のJavaScriptだけの場合の弱点克服以外には、サーバーの時刻取得にPHPを使っていますので、PHPプログラムに応用して例えば閲覧時間を計測したりということもできますね。
どう使うかはアナタ次第なので、頭捻ってくださいね。

仕組み説明とデモ

①サーバーの時刻を取得し、それをJSON形式で出力するPHPファイルを作成します。
②それをHTMLに記述したJavaScriptで取得して、リアルタイム時間表示プログラムに渡して1秒毎に表示を書き換えていく。

デモ

というわけで、1秒毎に表示が更新される、フツーの時計の出来上がりです。

※ちなみに1秒未満についてはどうしても誤差が生じますので、細かいこと気にする人はやめておいた方がよさそう。

ソースコード

とうわけで、お待ちかねのソースコードのご紹介。

PHPファイル(datetime.php)

<?php
$time = time();
$data = array('nowtime' => $time );
$json = json_encode($data);
print($json);
?>

time()関数でタイムスタンプ(1970年1月1日 00:00:00 GMTからの経過秒数)を取得し、それをJSON形式で出力するというえらくシンプルな作りになっています。配列にする必要があるのかどうか?ですか、いろいろ再利用する可能性も考えて。
これを次のJavaScriptで読み込んで使用するわけですな。

JavaScript(HTMLファイル)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function() {
	var now; //タイムスタンプ用変数
	$.getJSON('datetime.php') // json読み込み開始(ファイルパスは適宜通してください)
	  .done(function(json){ // jsonの読み込みに成功した時
		  for(var i in json){
		    now = json[i] * 1000;//PHPのタイムスタンプを1000倍に
		  }
	  })
	  .fail(function(){ // jsonの読み込みに失敗した時
	    console.log('json_error');
	  });

	function showtime(){
	  today = new Date(now);
	  $weekday = ['日','月','火','水','木','金','土'];
	  month = today.getMonth() + 1 ;
	  $('#datetime').html(month + "月"+ today.getDate() + "日(" + $weekday[today.getDay()] +") " +today.getHours() + ":" + ('0'+today.getMinutes()).slice(-2) + ":" + ('0' +today.getSeconds()).slice(-2));
	  now += 1000;
	}
	setInterval(showtime,1000);

});
</script>

<div id="datetime"></div>

まず、jQueryは使うので読み込んでくださいね。

そして、「getJSON」を利用して、先程の「datetime.php」を読み込んでJSONからタイムスタンプを取り出します。

このときJavaScriptで使用するタイムスタンプは 1970年1月1日 00:00:00 GMTからの経過ミリ秒数なのでPHPのタイムスタンプの1000倍に修正します。

わたくしここに気づかず引っかかってしまってました(汗)

あとの処理は、前回記事と同じで

以下の処理を showtimeという関数で定義し、setInterval(showtime,1000);
で、一秒毎に再実行してリアルタイムに時刻表示します。

var today = new Date(now);
today変数にDate()でタイムスタンプの時間をオブジェクトとして代入、jQueryで扱うことが出来るようになります。

today.getMonth() で月の数字を返し、(0~11なので、表示使用時は1プラス)today.getDate()で曜日(0~7までの数字で日~月に対応するので、$weekday = ['日','月','火','水','木','金','土']という配列を定義し、そこから曜日を取り出す)today.getDay() , today.getHours() , today.getMinutes() , today.getSeconds()もそれぞれ同様に日時分秒を返します。

1桁の数値は前にゼロを付けて2桁に揃える処理をします。('0'+today.getMinutes()).slice(-2)
文字列"0"と取り出した数値を連結して先頭が0になる文字列にし、そこから下二桁を取り出して2桁に。

<div id="datetime"></div>を、$('#datetime').html() で中のhtmlを書き換える処理をします。

最後に now 変数に1000をプラスします。つまりタイムスタンプに1秒(1000ミリ秒)加算して、次の1秒後のループ処理。

以上です。

その他注意点と一応免責事項

JavaScriptでの外部ファイル読み込みは、別ドメインだと基本的には不可能ですので、同一ドメイン・同一サーバー内に設置したほうがいいですね。軽いPHPファイルなんで何の問題もないと思いますが。

多分大丈夫だと思うけど、設置テストなどご利用は自己責任でお願いしますね。

オンラインスクールなら自宅で無料体験もできます

「現場のことは現場で学べ」といいますけど、まずある程度の知識がないと現場でも質問の仕方や何を学びとったらいいのかがわからないこともあると思います。
独学で知ることができないことは現場以外にもWEBデザインのスクールなどでも学べますが、オンラインで自宅にいながらリモートで学習できるという環境も増えてきていますので、自分のライフスタイルに合えばそういう選択もありですね。

【TechAcademy】は、オンライン完結のスクールで、 「最短4週間で未経験からプロを育てる」とのこと。
あくまで「最短」なので、もっと学びたいと思えば学ぶことも出来るでしょう。

WEBデザインコース以外にも

・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・Pythonコース ・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース
・Javaエンジニアコース
・ブロックチェーンコース
・Node.jsコース
・Scalaコース

など多岐にわたってWEB関係の開発の技術を学習できるので、WEBデザイナーとして成熟したあとも、WEBエンジニアとしてさらに活躍の場を広げたいという場合にもいいんじゃないでしょうか。

もし興味があれば、無料体験もできるのでまずは無料で、自分のライフスタイルや性格にフィットするか試してみてはどうでしょう?

-WEBデザイン, WORK, スクリプト
-,

Copyright© MDBloG , 2020 All Rights Reserved Powered by AFFINGER5.