(第1回)[Javascript]OpenWeatherMapからの天気情報の取得とその表示

℃
2018年1月4日
読了時間: 4分

更新日：2018年1月10日

　OpenWeatherMapというサイトを使って指定地域の天気情報を取得して、表示させてみたいと思います。まず最初にやることは、OpenWeatherMapサイトにとんで無料登録して自分のAPI keysを取得してください。

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>お天気情報取得</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
</head>
<body>
<div id="wrap"></div>
<div id="weatherbox">
<div id="topbox">
<span id="city"></span>
</div>
<div id="middlebox">
<div id="midmid">
<span><i id="currenticon"></i></span>
<span id="temp"></span>
<button class="fc">C</button>
</div>
<span id="desc"></span>
</div>
<div id="bottombox">
<div class="bottomsides">
<span><i class="wi wi-raindrop"></i></span>
<span id="hum"></span>
</div>
<div class="bottomsides">
<span><i class="wi wi-strong-wind"></i></span>
<span id="wind"></span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

[css]

/* Stylesheet for Local Weather App */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
html {
height: 100%;
/*
background: linear-gradient(to bottom, #4C739B 0%, #B0D5A7 100%) fixed;
background: -webkit-linear-gradient(to bottom, #4C739B 0%, #B0D5A7 100%) fixed;
background: -moz-linear-gradient(to bottom, #4C739B 0%, #B0D5A7 100%) fixed;
*/
}
body{
margin:0;
}
#wrap{
position: absolute;
width: 100%;
height: 100%;
}
#weatherbox {
/*box-shadow: 2px 2px 10px #FFFFFF;*/
border: 1px solid #FFFFFF;
color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
right: 1%;
top: 1%;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
width: 200px;
height: 250px;
}
#topbox {
border-bottom: 1px #FFFFFF solid;
height: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
#middlebox {
height: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
}
#midmid {
display: flex;
flex-direction: row;
align-items: center;
}
#bottombox {
height: 30%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
font-family: 'Montserrat', sans-serif;
}
.bottomsides {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wi {
width: 100%;
font-size: 35px;
}
button {
color: #FFFFFF;
outline: none;
}
#temp {
font-size: 35px;
padding-left: 10px;
}
.fc {
border: none;
border-radius: 50%;
font-size: 35px;
height: 1.5em;
width: 1.5em;
text-align: center;
text-decoration: none;
background: none;
cursor: pointer;
padding: 0px;
}
.fc:hover {
color: #FFFFFF;
border: 1px solid #FFFFFF;
/*color: #4C739B;
background-color: #FFFFFF;*/
}

[js]

// JS for Local Weather App
$( document ).ready(function() {
//使用する天気情報の指定。
var lat;//軽度
var lon;//緯度
var desc;//天気の詳細
var hum;//湿度
var weatherid;
var temp = [];//気温
var wind = [];//風速
/*
ユーザーのIPアドレスを取得して場所や座標を取得する。
getJSON関数を使ってjsonデータを読み込んで使用する。
第一引数にjsonファイルのurlを指定して、第二引数にfunction(変数名)と書き、jsonデータをそのまま変数の中に入れる。
*/
$.getJSON("https://ipapi.co/json", function(data) {
//$("#city").html(data.city);緯度軽度を指定して都市を指定する。
lat = 43.06451;//軽度
lon = 141.346603;//緯度
/*
天気情報を取得する。
OpenWeatherMapでAPI keysの取得が必要。
http://api.openweathermap.org/data/2.5/weather?lat=軽度値&lon=緯度値&appid=API keysにリクエストして天気のデータを取得する。
*/
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +"&APPID=****************************", function(weatherData) {
//HTMLの変更。$('A').html('HTMLを記述'); AのHTMLを記述したHTMLに変更。
//<span id="city"></span>に都市名を代入。
$("#city").html(weatherData.name);
/*
Store temperates (celsius and fahrenheit)
toFixed()少数切り捨て。
&#176アイコンid
気温が絶対温度[K]で返ってくるので、セルシウス温度[℃]と華氏度に[°F]に変換する。
t[℃] = T[K]-273.25 = 5(f[°F]-32)/9
*/
//温度の取得。
temp[0] = (weatherData.main.temp - 273.15).toFixed(0) + "&#176";
temp[1] = (((weatherData.main.temp - 273.15)*1.8) + 32).toFixed(0) + "&#176";
//天気の詳細
desc = weatherData.weather[0].description;
//湿度
hum = weatherData.main.humidity + '%';
//風速(mi/h:マイル毎時)
//1[m/s] = 3.6[km/s], 1[m/s] = 2.23[mi/h]
wind[0] = (weatherData.wind.speed * 3.6).toFixed(2) + " km/h";
wind[1] = (weatherData.wind.speed * 2.23).toFixed(2) + " mi/h";
//アイコン
weatherid = (weatherData.weather[0].id);
/*
各数値はOpenWeatherMapが設定している Weather condition codes
このコードによって既存のアイコンが設定されている。
これを各々 Maintained at http://erikflowers.github.io/weather-icons で提供されているアイコンに変換する。
*/
if (weatherid == 800) {
$("#currenticon").html('<i class="wi wi-day-sunny></i>').css({"color": "#FFE14A"});
};
var rainIcons = [300, 301, 302, 310, 311, 312, 313, 314, 321, 500, 501, 502, 503, 504, 511, 520, 521, 522, 531];
/*
for文は変数iを宣言し、これを0に初期化することからはじめる。iがrainIcons.lengthより小さいことを
チェックしてから続く文を実行し、ループを通過するごとにiを1づつ増加させる。
iは配列[]の番号。
rainIcons.lengthはrainIconsが持つ配列の長さ。
*/
for (i=0; i<rainIcons.length; i++) {
if (weatherid == rainIcons[i]) {
$("#currenticon").html('<i class="wi wi-rain"></i>').css({"color": "#244A69"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var stormIcons = [200, 201, 202, 210, 211, 212, 221, 230, 231, 232];
for (i=0; i<stormIcons.length; i++) {
if (weatherid == stormIcons[i]) {
$("#currenticon").html('<i class="wi wi-storm-showers"></i>').css({"color": "#244A69"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var cloudIcons = [801, 802, 803, 804];
for (i=0; i<cloudIcons.length; i++) {
if (weatherid == cloudIcons[i]) {
$("#currenticon").html('<i class="wi wi-cloudy"></i>').css({"color": "#C1C1C1"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var snowIcons = [600, 601, 602, 611, 612, 615, 616, 620, 621, 622];
for (i=0; i<snowIcons.length; i++) {
if (weatherid == snowIcons[i]) {
$("#currenticon").html('<i class="wi wi-snow"></i>').css({"color": "#FFFFFF"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var atmosphereIcons = [701, 711, 721, 731, 741, 751, 761, 762, 771, 781];
for (i=0; i<atmosphereIcons.length; i++) {
if (weatherid == atmosphereIcons[i]) {
$("#currenticon").html('<i class="wi wi-dust"></i>').css({"color": "#C1C1C1"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var extremeIcons = [900, 901, 902, 903, 904, 905, 906];
for (i=0; i<extremeIcons.length; i++) {
if (weatherid == extremeIcons[i]) {
$("#currenticon").html('<i class="wi wi-storm-warning"></i>').css({"color": "#FFFFFF"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
var additionalIcons = [951, 952, 953, 954, 955, 956, 957, 958, 959, 960, 961, 961];
for (i=0; i<additionalIcons.length; i++) {
if (weatherid == additionalIcons[i]) {
$("#currenticon").html('<i class="wi wi-hurricane-warning"></i>').css({"color": "#FFFFFF"});
$("#wrap").html('<div id="wrapper"></div>').css({"width":"100%","height":"100%","position":"absolute","background":"#aaa","z-index":"-1"});
};
};
//各天気要素の取得情報を各々のidに代入する。
$("#temp").html(temp[0]);
$("#desc").html(desc);
$("#hum").html(hum);
$("#wind").html(wind[0]);
});
//クリック時の入れ替え。
//class="fc"をクリックすると以下の関数を実行する。
$(".fc").click (function() {
//class="fc"のテキスト要素が'F'ならば、lass="fc"のテキスト要素を'C'に変える。
if ($(".fc").text() === "F") {
$(".fc").text("C");
//id="temp","wind"のhtmlの記述をtemp[0],wind[0]に変更。
$("#temp").html(temp[0]);
$("#wind").html(wind[0]);
}
//class="fc"のテキスト要素が'C'ならば、lass="fc"のテキスト要素を'F'に変える。
else {
$(".fc").text('F');
//id="temp","wind"のhtmlの記述をtemp[1],wind[1]に変更。
$("#temp").html(temp[1]);
$("#wind").html(wind[1]);
};
});
//アイコンカラーの設定の確認。
var weatherIcons = {
sunny: ["wi-day-sunny", "#FFE14A"],
cloudy: ["wi-cloudy", "#C1C1C1"],
rainy: ["wi-rain", "#33436D"],
storm: ["wi-storm-showers", "#33436D"],
snow: ["wi-snow", "#FFFFFF"]
};
});
});

(第1回)[Javascript]OpenWeatherMapからの天気情報の取得とその表示

最新記事

Comments