javascriptで日本時間とハワイ時間を表示する

【時刻表示部分】

はい、表示しました。簡単だろこんなもん～とか舐めてましたがやってみると若干ハマったので備忘録として残しておきます。

ハワイに住んでてネットで日本の人と交流してるとよく聞かれるんです。「ハワイ今何時？」って。気になる人多いんだろうなとおもってブログのウィジェットに表示させてみました。

このワードプレスもタイムゾーンはhonolulu(UTC-10)にしてます。

ここ1週間(ハワイ時間9/9-15)の閲覧者の地域をみると日本からが93%を占めていました。なのでこのブログのタイムゾーンも日本とするのがいいんでしょうけど、私が更新するとき若干混乱するのでハワイ時間のまま行きます。ごめんね。

さて、実際になににハマったかというと、Dateオブジェクト操作です。javascriptで時刻を扱うときはnew Date();で現在時刻を取得して世界標準時からプラスマイナスすればいいんじゃない？と思ってました。Dateオブジェクトは1970年1月1日(UTC) から始まるミリ秒単位の時刻値を基準としているようです。

しかしながら、new Date()で取得したDateオブジェクトから取得できるのはローカルと協定時(世界標準時)のみっぽいとわかりました。Dateに+9して日本時間、Dateに-10してハワイ時間とかできない。

じゃあ無理やり協定時のミリ秒に+9時間(9h * 60min * 60sec * 1000msec)をしてやれば日本時間になるんじゃないかと。ここにたどり着くまでハマりました。もっといい方法あるかもしれませんが、、、

<script>
function Clock(){
  var utc = new Date();
  //現在時刻とUTCの時差を求める。ハワイなら600分 * 60秒 * 1000ミリ秒
  var offset = utc.getTimezoneOffset() * 60 * 1000;

　//ローカルタイムとして協定時を出すために時差分調整
  utc = new Date(utc.getTime() + offset);

  //協定時の出力
  var utcYear = utc.getFullYear();
  var utcMonth = ("0" + (utc.getMonth() + 1) ).slice(-2);
  var utcDate = ("0" + utc.getDate() ).slice(-2);
  var utcHour = ("0" + utc.getHours() ).slice(-2);
  var utcMin = ("0" + utc.getMinutes() ).slice(-2);
  var utcSec = ("0" + utc.getSeconds() ).slice(-2);

  //ハワイ時間に調整(UTC-10)
  var timeHI = new Date(utc.getTime() - 10 * 60 * 60 * 1000);
  var hiYear = timeHI.getFullYear();
  var hiMonth = ("0" + (timeHI.getMonth() + 1) ).slice(-2);
  var hiDate = ("0" + timeHI.getDate() ).slice(-2);
  var hiHour = ("0" + timeHI.getHours() ).slice(-2);
  var hiMin = ("0" + timeHI.getMinutes() ).slice(-2);
  var hiSec = ("0" + timeHI.getSeconds() ).slice(-2);

  //日本時間に調整(UTC+9)
  var timeJP = new Date(utc.getTime() + 9 * 60 * 60 * 1000);
  var jpYear = timeJP.getFullYear();
  var jpMonth = ("0" + (timeJP.getMonth() + 1) ).slice(-2);
  var jpDate = ("0" + timeJP.getDate() ).slice(-2);
  var jpHour = ("0" + timeJP.getHours() ).slice(-2);
  var jpMin = ("0" + timeJP.getMinutes() ).slice(-2);
  var jpSec = ("0" + timeJP.getSeconds() ).slice(-2);
  
  //html出力部分
  var Time = "世界標準時:" + utcYear + "/" + utcMonth + "/" + utcDate + " "  + utcHour  + ":" + utcMin + ":" + utcSec + "<br>ハワイ時間:" + hiYear + "/" + hiMonth + "/" + hiDate + " " + hiHour  + ":" + hiMin + ":" + hiSec + "<br>日本時間:" + jpYear + "/" + jpMonth + "/" + jpDate + " " + jpHour  + ":" + jpMin + ":" + jpSec;
  document.getElementById("RealtimeClockArea").innerHTML = Time;
}

//1秒毎に更新
function showClock(){
  setInterval('Clock()',1000);
}

//実行
showClock();
</script>
<p id="RealtimeClockArea">【時刻表示部分】</p>

var utcMonth = (“0” + (utc.getMonth() + 1) ).slice(-2);
1桁数字のときは先頭に0を足したいので、問答無用で0を頭に付けてから下2桁だけ切り取ってます。

こんな感じのJavascriptをウィジェットに貼り付けてみました。こんなもの見ずとも、ハワイ時間は日本時間-19hです。日本時間に5時間プラスして1日戻すとハワイ時間です。時差めんどくさい。

Web, wordpress

Posted by hyperbanana