デスクトップで重要な機能を忘れていました。
どのOSでも確実に表示されているモノが、表示されていません。
それは、
時計です。
普通にパソコンを使っている場合、画面の右上か右下に日付と時刻が表示されているでしょう。
Webデスクトップも、ちゃんとソレっぽく見えるように時刻表示をしてみます。
デモ
デモ画面右上の日時表示は、現在時刻です。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#19"です。
解説
日付と時刻の表示はさほど難しくないんですが、見た目のフォーマットと表示する文字列について、作り込んでおきました。
一つだけお断りをしておくと、今回の時刻表示は世界的な標準時刻に動機がとれているという保証はありません。
お使いのブラウザを表示しているパソコンの内部時刻を表示するのが、Javascriptのdate()関数です。
なので、パソコンの時刻を手動で変更したら、Webデスクトップの日時も変わってしまいます。
本来ならば、Webサーバーでサーバー時刻を取得して、確実な日時表示をするのが確実なのですが、そもそもWebデスクトップなので、使っているパソコンがインターネットに繋がっている事が大前提になるはずです。
最近のパソコンであれば、自動的にNPTという時刻サーバーと動悸して、パソコン内時刻を標準時刻に合わせる機能が備わっているはずなので、概ね使っているパソコンはよほど古くない限り
標準時刻になっているはずという見立てです。
むしろ、古いパソコン出会った場合、ブラウザが最新バージョンまでアップデートできなくて、Javascriptエラーなどが表示されてまともにインターネットも見られないと思うので、これで辻褄は合うはずです。
話を時刻機能に戻しますが、Javascriptでの日時の取得は、
new Date()で簡単に行えます。
それを、年（西暦）、月、日、時、分、秒、曜日、AMとPMなどのそれぞれの値を取得する内容が書かれています。
年月日と曜日の取得
get date(){
return {
y : this.d.getFullYear(),
m : this.d.getMonth() + 1,
d : this.d.getDate(),
w : this.d.getDay(),
}
}
時刻の取得
get time(){
return {
h : this.d.getHours(),
i : this.d.getMinutes(),
s : this.d.getSeconds(),
}
}
AM,PMの取得
// 午前,am(ante meridiem) 午後,pm(past meridiem)
get meridiem(){
switch(this.format){
case "ja" : return this.time.h < 12 ? "午前" : "午後"
default : return this.time.h < 12 ? "AM" : "PM"
}
}
あとがき
そもそも、AMとPMって英語っぽいけどどういう意味なのかわからなかったので変数名をつけるために調べてみたところ、
AMは、Ante Meridiemで、PMは、Past Meridiemの略でラテン語とのことでした。（知らんかった）
それを、日本語とそれ以外で表示を切り替えるようにしておきました。
いや〜、プログラミングを通してこんな雑学も学べて、やはり手を動かすって、スキルアップ以外に、いろいろな脳の部分も鍛えられる気がしますね。
次回もお楽しみに！
0 件のコメント:
コメントを投稿