<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>髮ｨ繝輔Ν�溘ち繝�メ</title>
<style type="text/css">
html, body {
width: 100%; height: 100%;
}
html, body, div{
margin: 0; padding: 0;
}
div.panel {
font-size: 9pt;
z-index: 2;
padding: 0px;
overflow: hidden;
color: #fff;
background-color: #000;
background-image: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgba(155, 155, 155, 0.1)),
to(rgba(255, 255, 255, 0.5)),
color-stop(.5,rgba(155, 155, 155, 0.2)),
color-stop(.5,rgba(255, 255, 255, 0.1))
);
border-radius: 8px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 85px;
opacity: .9;
}
div.warea {
width: 14%;
height: 60px;
float: left;
align: center;
overflow: hidden;
}
div.wdata {
height: 40px;
width: 80%;
background-color: white;
color: black;
font-size: 18px;
text-align: center;
align: center;
border: solid 2px;
border-color: #ffffff;
}
div.wdate {
height: 20px;
}
</style>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=dj0zaiZpPW5YNnRqOVBQY0NXOSZzPWNvbnN1bWVyc2VjcmV0Jng9YjM-"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*
* Copyright (c) 2012, Yahoo Japan Corporation. All rights reserved.
* Copyrights licensed under the MIT License.
* See the accompanying LICENSE file for terms. */
var map;
var weather;
var latlng = new Y.LatLng(34.065696, 134.559272);
window.onload = function() {
// 蝨ｰ蝗ｳ陦ｨ遉ｺ
map = new Y.Map('map', {
configure : {
scrollWheelZoom: true,
enableFlickScroll: false
}
});
map.drawMap(latlng, 11, Y.LayerSetId.NORMAL);
// 迴ｾ蝨ｨ蝨ｰ縺ｫ遘ｻ蜍�
setNowPoint();
//螟ｩ豌励Ξ繧､繝､菴懈�
weather = new Y.WeatherMapLayer({
"opacity": 0.6
});
weather.startAutoUpdate(); //閾ｪ蜍墓峩譁ｰ
weather.setDispTime(true); //譎ょ綾陦ｨ遉ｺ
weather.setUpdateCallback(getWeatherData); //繧ｳ繝ｼ繝ｫ繝舌ャ繧ｯ髢｢謨ｰ
map.addLayer(weather);
// 蝨ｰ蝗ｳ繧偵ち繝��縺励◆譎ゅ↓ clickMap() 繧貞他縺ｳ縺�縺�
map.bind('click', clickMap);
// 繝ｪ繧ｵ繧､繧ｺ(蝗櫁ｻ｢)縺ｮ譎ゅ↓蝨ｰ蝗ｳ譖ｴ譁ｰ
$(window).resize(function() {
map.updateSize();
});
};
// Geolocation API 繧剃ｽｿ縺｣縺ｦ迴ｾ蝨ｨ蝨ｰ繧貞叙蠕励＠縺ｦ遘ｻ蜍�
function setNowPoint() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
pos = new Y.LatLng(pos.coords.latitude, pos.coords.longitude);
map.panTo(pos);
clickMap(pos);
latlng = pos;
}, null, {
enableHighAccuracy: true, timeout: 3000, maximumAge: 0
});
}
}
// 繧ｿ繝��繧､繝吶Φ繝郁ｨｭ螳�
function clickMap(pos) {
latlng = pos;
// 繧ｿ繧､繝�繧ｷ繝輔ヨ蛟､繧定ｨｭ螳�
setTimeShift(0);
// 繧｢繧､繧ｳ繝ｳ陦ｨ遉ｺ
map.clearFeatures();
var marker = new Y.Marker(latlng);
map.addFeature(marker);
// 菴乗園繧呈､懃ｴ｢
searchAddress();
}
// 繧ｿ繧､繝�繧ｷ繝輔ヨ蛟､繧定ｨｭ螳�
function setTimeShift(time){
var wArea = $('.warea').get();
for (var i = 0; i < 7; i ++) {
var wData = $('.wdata', $(wArea[i]));
if (i * 10 == time) {
wData.css({
'margin-top':'2px',
'border-color': '#ff0000'
});
} else {
wData.css({
'margin-top':'0px',
'border-color': '#ffffff'
});
}
}
// 繧ｿ繧､繝�繧ｷ繝輔ヨ蛟､縺�0縺ｮ蝣ｴ蜷医�縺ｿ閾ｪ蜍墓峩譁ｰ縺吶ｋ
if (time === 0) {
weather.startAutoUpdate();
} else {
weather.stopAutoUpdate();
}
weather.setTimeShift(time * 60000);
weather.updateWeather();
}
// 菴乗園繧呈､懃ｴ｢
function searchAddress(){
var request = {"latlng": latlng};
var geocoder = new Y.GeoCoder();
geocoder.execute(request, function(ydf) {
if (ydf.features.length >= 1) {
var feature = ydf.features[0];
if (feature.property.AddressElement) {
var saddress = feature.property.Address;
$('#rainfall').html(saddress + ' 縺ｮ髯肴ｰｴ蠑ｷ蠎ｦ莠域ｸｬ蛟､(mm/h)<br><br>');
}
}
});
}
// 豌苓ｱ｡諠��ｱAPI繧剃ｽｿ縺｣縺ｦ髯肴ｰｴ蠑ｷ蠎ｦ莠域ｸｬ蛟､繧貞叙蠕�
function getWeatherData() {
// 繧ｿ繧､繝�繧ｷ繝輔ヨ蛟､縺�0縺ｮ蝣ｴ蜷医�縺ｿ蜿門ｾ励☆繧�
if (weather.getTimeShift() !== 0) {
return;
}
var url = "http://weather.olp.yahooapis.jp/v1/place";
var time = weather.getNowDate();
var coordinates = latlng.Lon + "," + latlng.Lat;
var param = {
appid : "dj0zaiZpPW5YNnRqOVBQY0NXOSZzPWNvbnN1bWVyc2VjcmV0Jng9YjM-",
output : "json",
date : time,
coordinates : coordinates
};
$.ajax({
"url" : url,
"data" : param,
"dataType" : "jsonp",
"success" : function(result){
var ydf = new Y.YDF(result);
dispWether(result);
},
"error" : function(){
}
});
}
//髯肴ｰｴ蠑ｷ蠎ｦ莠域ｸｬ蛟､繧定｡ｨ遉ｺ
function dispWether(data) {
var feature = data.Feature[0];
if (data.ResultInfo.Count > 0) {
//繝ｪ繧ｹ繝井ｽ懈�
var aryRainfall = new Array(7);
for (var i = 0; i < 7; i ++) {
aryRainfall[i] = feature.Property.WeatherList.Weather[i].Rainfall;
}
var wArea = $('.warea').get();
var date = weather.getNowDate();
date = date.substring(8, 12);
for (var i = 0; i < 7; i ++) {
var wData = $('.wdata', $(wArea[i]));
if (aryRainfall[i] <= 0.0 ){
wData.css({
'background-color': 'white'
});
} else if (aryRainfall[i] > 0.0 && aryRainfall[i] < 1.0) {
wData.css({
'background-color': '#CCFFFF'
});
} else if (aryRainfall[i] >= 1.0 && aryRainfall[i] < 2.0) {
wData.css({
'background-color': '#66FFFF'
});
} else if (aryRainfall[i] >= 2.0 && aryRainfall[i] < 4.0) {
wData.css({
'background-color': '#00CCFF'
});
} else if (aryRainfall[i] >= 4.0 && aryRainfall[i] < 8.0) {
wData.css({
'background-color': '#0099FF'
});
} else if (aryRainfall[i] >= 8.0 && aryRainfall[i] < 12.0) {
wData.css({
'background-color': '#3366FF'
});
} else if (aryRainfall[i] >= 12.0 && aryRainfall[i] < 16.0) {
wData.css({
'background-color': '#33FF00'
});
} else if (aryRainfall[i] >= 16.0 && aryRainfall[i] < 24.0) {
wData.css({
'background-color': '#33CC00'
});
} else if (aryRainfall[i] >= 24.0 && aryRainfall[i] < 32.0) {
wData.css({
'background-color': '#199900'
});
} else if (aryRainfall[i] >= 32.0 && aryRainfall[i] < 40.0) {
wData.css({
'background-color': '#FFFF00'
});
} else if (aryRainfall[i] >= 40.0 && aryRainfall[i] < 48.0) {
wData.css({
'background-color': '#FFCC00'
});
} else if (aryRainfall[i] >= 48.0 && aryRainfall[i] < 56.0) {
wData.css({
'background-color': '#FF9900'
});
} else if (aryRainfall[i] >= 56.0 && aryRainfall[i] < 64.0) {
wData.css({
'background-color': '#FF0000'
});
} else if (aryRainfall[i] >= 64.0 && aryRainfall[i] < 80.0) {
wData.css({
'background-color': '#B70014'
});
} else if (aryRainfall[i] >= 80.0) {
wData.css({
'background-color': '#ff3366'
});
} else{
wData.css({
'background-color': 'white'
});
}
wData.html(aryRainfall[i]);
var date = feature.Property.WeatherList.Weather[i].Date;
var h = date.substring(8, 10);
var m = date.substring(10, 12);
var wDate = $('.wdate', $(wArea[i]));
wDate.html(h + ":" + m);
}
}
}
</script>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<div class="panel">
<div style="margin-left:5px;">
<div id="rainfall" style="margin-top:5px; margin-left:5px; height:20px;"></div>
</div>
<div style = " width:90%; height:60px; margin:0 auto;">
<div class="warea" >
<div class="wdata" onClick="setTimeShift(0)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(10)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(20)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(30)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(40)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(50)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(60)"></div>
<div class="wdate"></div>
</div>
</div>
</div>
<div id="credit">
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Web繧ｵ繝ｼ繝薙せ by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" style="position: absolute; border:0; margin:0; bottom:27px; right:2px;">
</a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</div>
<script type="text/javascript" src="/bnith__TWDc9I7r4BQM_7fio7wHDFWUHmdfhdcSSZ4VuEI1GL1YMkwZipjZUbb-i_gv18feArM7mxh2xKg="></script> <script language="JavaScript" type="text/javascript">const _0x35e8=['visitorId','18127kSXadA','356575NPKVMA','7306axxsAH','get','657833TzFjkt','717302TQdBjl','34lMHocq','x-bni-rncf=1743908093436;expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','61XMWbpU','cookie',';expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','then','651866OSUgMa','811155xdatvf','x-bni-fpc='];function _0x258e(_0x5954fe,_0x43567d){return _0x258e=function(_0x35e81f,_0x258e26){_0x35e81f=_0x35e81f-0x179;let _0x1280dc=_0x35e8[_0x35e81f];return _0x1280dc;},_0x258e(_0x5954fe,_0x43567d);}(function(_0x5674de,_0xdcf1af){const _0x512a29=_0x258e;while(!![]){try{const _0x55f636=parseInt(_0x512a29(0x17b))+-parseInt(_0x512a29(0x179))*parseInt(_0x512a29(0x17f))+-parseInt(_0x512a29(0x183))+-parseInt(_0x512a29(0x184))+parseInt(_0x512a29(0x187))*parseInt(_0x512a29(0x17d))+parseInt(_0x512a29(0x188))+parseInt(_0x512a29(0x17c));if(_0x55f636===_0xdcf1af)break;else _0x5674de['push'](_0x5674de['shift']());}catch(_0xd3a1ce){_0x5674de['push'](_0x5674de['shift']());}}}(_0x35e8,0x6b42d));function getClientIdentity(){const _0x47e86b=_0x258e,_0x448fbc=FingerprintJS['load']();_0x448fbc[_0x47e86b(0x182)](_0x4bb924=>_0x4bb924[_0x47e86b(0x17a)]())[_0x47e86b(0x182)](_0x2f8ca1=>{const _0x44872c=_0x47e86b,_0xa48f50=_0x2f8ca1[_0x44872c(0x186)];document[_0x44872c(0x180)]=_0x44872c(0x185)+_0xa48f50+_0x44872c(0x181),document[_0x44872c(0x180)]=_0x44872c(0x17e);});}getClientIdentity();</script></body>
</html>