ブログデザイン備忘録～日付け情報の取得

1. 時刻表示
2. UTC時刻の表示
3. 元号表示
4. 時刻表示の装飾
5. まとめ

　今回はブラウザ上に現在時刻を取得するjavascript関数を用いて日付時刻表示する方法について紹介する。

1. 時刻表示

　現在の日時時刻を取得するには、日付オブジェクト名=new Date()として日付オブジェクトを取得してから、オブジェクト名.get～関数とすることで日付・時刻に関する戻り値を取得する。以下に日付を取得するjavascriptについて示す。

<script>
var jstnow = new Date();
var y = jstnow.getFullYear();
var mo = jstnow.getMonth() + 1;
var d = jstnow.getDate();
var week = jstnow.getDay();
var weeks = ["日", "月", "火", "水", "木", "金", "土"];
var w = weeks[week];
document.write(y+"年"+mo+"月"+d+"日"+"(" + w + ")");
</script>

実行結果を以下に示す。

まず日付オブジェクトはjstnowとしてjstnow.getFullYear()は年、jstnow.getMonth()は月を0-11で返すため1を加え、jstnow.getDate()は日にちを返す。曜日はjstnow.getDay()で日曜日を0、土曜日を6として返すため weeks=["日", "月", "火", "水", "木", "金", "土"];という配列を作成し、列番号をjstnow.getDay()で指定する。最後に結果をdocument.writeを用いて出力するようにした。時刻についても同様に

<script>
var t = jstnow.getHours();
var mi = jstnow.getMinutes();
var s = jstnow.getSeconds();
var ms = jstnow.getMilliseconds();
document.write( t + "時" +mi +"分"+ s +"秒" + ms);
</script>

実行結果を以下に示す。

jstnow.getHours()は時間、jstnow.getMinutes()は分、jstnow.getMilliseconds()は秒、そしてjstnow.getMilliseconds()はミリ秒を返す。

2. UTC時刻の表示

　UTCとは世界協定時のことで、イギリス・グリニッジを起点とするセシウム原子の振動数を基準とする国際原子時のことである。UTC時刻を上と同様の方法で表示させることができる。基本的には上のjavascript関数のgetの先にUTCをつければよい。グリニッジ標準時なので日本では9時間の時差となる。

<script>
var y2 = jstnow.getUTCFullYear();
var mo2 = jstnow.getUTCMonth() + 1;
var d2 = jstnow.getUTCDate();
var week2 = jstnow.getUTCDay();
var weeks = ["日", "月", "火", "水", "木", "金", "土"];
var w2 = weeks[week2];
document.write(y2+"年"+mo2+"月"+d2+"日"+"(" + w2 + ")"+"<br>");
</script>

実行結果は以下の通り：

時刻についても同様：

<script>
var t2 = jstnow.getUTCHours();
var mi2 = jstnow.getUTCMinutes();
var s2 = jstnow.getUTCSeconds();
var ms2 = jstnow.getUTCMilliseconds();
document.write( t2 + "時" +mi2 +"分"+ s2 +"秒" + ms2+"<br>");
</script>

結果は下に示す。

UTCと現地での時差を取得する関数としてgetTimeZoneOffset()がある。時差を分で返すので今回はとりあえず60で割って時間に変換してから補正している。（インドやイランなどは30分単位で補正が必要なので、時間を分に変換して補正してから時間に直すなど必要。あとUTCで日付を取得している場合は日付の補正も必要）

上のUTCの時刻補正するには

<script>
var offset = jstnow.getTimezoneOffset()/60;
var t3 = t2 -offset;
if(t2-offset>=24){
   t3 = t2-offset-24;
}
document.write( t3 + "時" +mi2 +"分"+ s2 +"秒" + ms2+"<br>");
</script>

UTC補正後の時刻は、getHours()などで取得した時刻と一致する。

3. 元号表示

　元号を使って表示するには、toLocaleString(locales,option)を用いてlocaleの"ja-JP-u-ca-japanese"とすると元号表示になる。optionは日付時刻の表示方法を指定する。 year,day,hour,minute,secondは"numeric"または"2-digit", era,timeZoneNameは"short"または"long", weekdayは"narrow", "short", "long" ,hour12はtrueまたはfalse, monthは"numeric", "2-digit", "narrow", "short", "long"の中から指定すると表記が変わる。

<script>
document.write(jstnow.toLocaleString("ja-JP-u-ca-japanese", {year:"2-digit",month:"2-digit",month:"2-digit",day:"2-digit",weekday:"short",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:false, era:"long",timeZoneName:"long"})+"<br>")
</script>

以下のように日付は元号表記になる。

4. 時刻表示の装飾

　時刻表示を装飾したい場合は、時刻表示用のタグを用意してstyleやCSSで装飾用の記述を行う。上記の方法で取得した時刻は、時刻の文字列を document.getElementById("id").textContentに代入することで、タグ内に現在時刻が上書きされる。

<span id="caltest" style="background:black;font-size:1.1em;padding-left:0.3em;padding-right:0.3em;text-align:center;font-weight:bold;color: white; text-shadow:0 0 0.10em #2962FF,0 0 0.15em #2962FF,0 0 0.80em #2962FF,0 0 1.00em #2962FF;"></span>
<br>
<span id="caltest2" style="background:black;font-size:1.1em;padding-left:0.3em;padding-right:0.3em;text-align:center;font-weight:bold;color: white; text-shadow:0 0 0.10em #2962FF,0 0 0.15em #2962FF,0 0 0.80em #2962FF,0 0 1.00em #2962FF;"></span>
<script>
      document.getElementById("caltest").textContent = jstnow.toLocaleString("ja-JP-u-ca-japanese", {year:"2-digit",month:"2-digit",month:"2-digit",day:"2-digit",weekday:"short", era:"long"});
      document.getElementById("caltest2").textContent = t + "時" +mi +"分"+ s +"秒" + ms;
</script>