主要都市の現在時刻
地図から選ばれた世界主要10都市の現在時刻を表示します。
それによるとリオデジャネイロが東京（正確には東経135度の明石市か）よりも12時間遅れた時刻になります。
東京が2018年10月28日06時00分ならば、リオデジャネイロは2018年10月27日18時00分ということです。
今回、分かった事ですが時差というぐらいだから、すべて1時間刻みかというとなぜかニューデリーは日本よりも3.5時間遅れになっています。
詳しくはこれから調査したいと考えております。
プログラミングについて
プログラミングは単純化するために、選ばれた10都市の時差のデータを記憶しています。地図が正確ならば、ポイントされた地点の経度を求め時差を算出できますが、プログラムが複雑化します。
また、日付変更線が一直線でないことも算出式は一筋縄ではありません。都市の時間情報を記憶する手法は手堅いです。
拡張性などの配慮
今回、主要な都市を10ヶ所選び、世界白地図にプロットしました。そして、その都市マークの画面上におけるカーソル位置を記憶しました。
たった10ヶ所なのでこの作業は簡単に完成できますが、都市数が増えたときはかなり大変な作業となるでしょう。
都市名からその都市の現在時刻を求めるのならば、都市の緯度経度から白地図にプロットする仕組みが拡張性に富んでいると言えます。
プログラミングは複雑になる代わり、一度、完成させれば多くの都市の時計に対応することが可能になります。
究極の理想論とは 🌏
プログラミングには多様な手法があります。開発者の技量や規模によってもどれが適切かは変わります。原始的に泥臭くても構いません。まずは正確に動作することが大切です。これら方式を考えることも楽しみの一つと言えましょう。
プログラミングコード
<!DOCTYPE html>
<html>
<body onLoad="setInterval(timerX, 1000);">
<div><span style="color:deepskyblue; font-size:32px;">『Warmth』by MFP</span> DOVA-SYNDROMEより</div>
<audio style="float:left" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/10/Warmth.mp3" controls loop controlsList="nodownload"></audio>
<div id="ver" style="float:left; width:80px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">©TacM,2018<BR>Ver0.04</div>
<div style="float:left; width:415px; height:55px; font-size:36px; color:green; border:0px red solid;">主要10都市の現在時刻</div>
<Div id="world" style="clear:both; position: relative; width:800px; height:504px; visibility:visible; background:aliceblue;">
<img id="map" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/10/worldatlas_800.gif">
<div id="clk1" style="position:absolute; left:475px; top:310px; font-size:24px; color:deeppink; font-weight:bold;">⓿Tokyo（東京）</div>
<div id="clk2" style="position:absolute; left:475px; top:360px; font-size:24px; color:darkgreen; font-weight:bold;">2018/10/21(日)</div>
<div id="clk3" style="position:absolute; left:475px; top:410px; font-size:40px; color:mediumblue; font-weight:bold;">09:30:15</div>
</Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const city= ["東京", "ニューヨーク", "北京", "イスタンブール", "パリ", "オークランド", "シドニー", "リオデジャネイロ", "バンクーバー", "カイロ"];
const curr= [0, -14, -1, -7, -8, 3, 1, -12, -17, -7];
const px = [379, 725, 318, 129, 64, 452, 399, 771, 593, 125];const py = [282, 259, 275, 274, 249, 478, 471, 438, 236, 308];
const SZ = 18;
var l=0;
document.body.addEventListener("mousedown", function(e){ //マウスクリックのイベントを捕捉する, 座標を取得する
if(e.target.id=="map"){ //カーソルは地図上にある
var x = e.offsetX + 10; //e.pageX; //X座標
var y = e.offsetY + 110; //e.pageY; //Y座標
for(var j=0; j<px.length; ++j){
if(x<px[j] || x>(px[j]+SZ) || y<py[j] || y>(py[j]+SZ))continue;
l=j; //timerX()で使う
document.getElementById("clk1").innerHTML = "\u24FF\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E".substr(l,1) + city[l];//都市名
break;
}
}
});
function timerX(){ //年月日（曜日） 時分秒
var nowTime = new Date(); //日付情報
nowTime.setHours(nowTime.getHours() + curr[l]); //整数のみ, 30分刻みがあれば分も要修正（ニューデリーなど）
var ymd = nowTime.getFullYear() + "/" + letter2(nowTime.getMonth()+1) + "/" + letter2(nowTime.getDate()); //年 月 日
document.getElementById("clk2").innerHTML = ymd + "("+"日月火水木金土".substr(nowTime.getDay(),1) + ")"; //曜日(0-6)
document.getElementById("clk3").innerHTML = letter2(nowTime.getHours())+":"+letter2(nowTime.getMinutes())+":"+letter2(nowTime.getSeconds());
}
function letter2(num) {return ("0" + num ).slice(-2);} <!-- send "01" -->
</script>
</html>
動作例
都市名を代表する丸囲み番号をクリックすれば、世界時計が表示されます。また、思いやりのあるBGMを用意しましたので再生ボタンをクリックして和らいだ雰囲気でお楽しみください。
『Warmth』by MFP DOVA-SYNDROMEより
©TacM,2018
Ver0.04
Ver0.04
主要10都市の現在時刻
⓿Tokyo（東京）
2018/10/21(日)
09:30:15