【API】OpenWeatherMapをJavaScriptで制御

openweathermapのAPIを利用して、
東京の気温とかを呼び出してみました。

OpenWeatherMap

openweathermap のAPI利用

JS Bin on jsbin.com

OpenWeatherMapのAPIは利用するために、
メールアドレスなどの簡単な登録を済ませて、APIKeyを取得する必要があります。

書いたコード

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<h1>weather api</h1>
<p>
 <small>Current time :</small>
 <span id="currenttime">12:00</span>
</p>
<p>
 <small>From :</small>
 <span id="here"></span>
</p>
<p>
 <small>temperature :</small>
 <span id="temp"></span>
 <span>℃</span>
 <span id="icon"></span>
</p>

// ---

$.ajax({
  url: "http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp&appid=取得したAPPIDを入力",
  cache: false,
  success:function (weatherdata){
// img insert
var img = document.createElement('img');
img.src = "http://openweathermap.org/img/w/"+weatherdata.weather[0].icon+".png";
img.alt = weatherdata.weather[0].main;
document.getElementById('icon').appendChild(img);

// ＝摂氏＋＝K
document.getElementById('temp').innerHTML = Math.floor(weatherdata.main.temp - 273.15);

// 位置
document.getElementById('here').innerHTML = weatherdata.name;

}
});


// 現在時刻
setInterval(function(){
var date = new Date();
var time ;
  time = date.getFullYear()+'.';
  time += (date.getMonth()+1)+'.';
  time += date.getHours()+'.';
  time += date.getMinutes()+'.';
  time += date.getSeconds(); 
 document.getElementById('currenttime').innerHTML = time;
},1000);

おわりに

ケルビン度なるものが存在することを、今まで生きてきてようやく知りました。。（無知すぎる。。。 ）
海外旅行に行ったこと無いけど、「◯◯℃」がグローバルじゃないことを海外に行く前に知れてよかったｗ