목표

이미지의 왼쪽 하단에있는 일기 예보를 표시합니다

절차

OpenWeatherMap 사용 준비

Ajax에서 API에서 정보 얻기

HTML 조립

OpenWeatherMap을 사용할 준비

OpenWeatherMap (ぇtps://오뻬우아아테ぇr마 p. rg/)으로 이동하여 "Sign Up"에서 계정을 만듭니다.

내 페이지의 [API keys]에서 API 키를 확인할 수 있습니다. 이미지의 빨간색으로 채워진 부분입니다.

영문으로 쓰여진 것처럼, 이 API 키를 사용할 수 있게 되기까지 10분~60분 정도 걸립니다.

실제로 어떤 정보를 얻을 수 있는지 확인하려면 Chrome 확장 프로그램의 'Advanced REST Client'이 유용합니다.

왼쪽 상단의 마크를 클릭하여 탭을 열고 이미지와 같이 [Host][pass][QueryParameters]를 설정해 보세요. [QueryParameters]는 ADD 버튼으로 추가할 수 있습니다.

정보의 취득 내용은 URL로 설정됩니다. 덧붙여 이 API의 기온의 단위는 디폴트라고 화씨(°F)가 되어 있으므로, units=metric 를 추기하는 것으로, 섭씨(°C)로 변경할 수 있습니다. 기타 자세한 내용은 이 페이지를 확인하십시오.

SEND 버튼을 클릭하면, 이 URL을 보내면 실제로 어떤 데이터가 돌아오는지 확인할 수 있습니다. 이번에는 JSON 형식으로 다루기 때문에 JSON 탭을 선택하고 확인합시다.

city로 설정할 수 있는 지명은 OpenWeatherMap에서 검색해 보거나, 여기의 페이지를 참고로 해 본다 라고 좋을 것 같습니다.

왼쪽 상단의 표시를 클릭하여 탭을 닫으면 실제 URL을 볼 수 있습니다.

Ajax에서 API에서 정보 얻기

이번은 Ajax에서 json 형식으로 정보를 취득하기 위해, 아래와 같이 기술합니다.

편의를 위해 var API_KEY var city 를 정의하고 var url

app/assets/javascripts/weather.js

$(function() {
  var API_KEY = '*******************************'
  var city = 'Tokyo';
  var url = 'http://api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY;
  $.ajax({
    url: url,
    dataType: "json",
    type: 'GET',
  })
  .done(function(data) {
  })
  .fail(function(data) {
  });
});

HTML 조립

function(data) 로 되어 있기 때문에, 취득한 정보는 인수 data에 들어가 있습니다.

예를 들어, data.city.name 로 하면, 지명을 취득할 수 있습니다. 표시되는 HTML에 id="cityname" 의 div 태그를 준비해, js로 html 메소드로 내용을 재기록하는 것으로 지명을 표시할 수 있습니다.

배열 list에 3시간 마다의 날씨의 정보가 차례로 들어 있기 때문에, 반복 for를 사용해 data.list[i] 로 하는 것으로 차례로 데이터를 취득하고 있습니다. 게다가 data.list[i].weather[0].main 라고 하면 날씨를 취득할 수 있는 등 Advanced REST Client를 참고하면서 원하는 정보를 취득해 봅시다.

app/assets/javascripts/weather.js

$(function() {
  var API_KEY = '******************************'
  var city = 'Tokyo';
  var url = 'http://api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY;
  $.ajax({
    url: url,
    dataType: "json",
    type: 'GET',
  })
  .done(function(data) {
    var insertHTML = "";
    var cityName = '<h2>' + data.city.name + '</h2>';
    $('#city-name').html(cityName);
    for (var i = 0; i <= 8; i = i + 2) {
      insertHTML += buildHTML(data, i);
    }
    $('#weather').html(insertHTML);
  })
  .fail(function(data) {
    console.log("失敗しました");
  });
});

일기 예보 HTML은 buildHTML 함수 내에서 조립됩니다. 덧붙여 일시를 표시하고 싶은 경우, 협정 세계시(UTC)가 되어 있으므로 플러스 9시간 할 필요가 있습니다.

OpenWeatherMap에서 http://openweathermap.org/img/w/04n.png 와 같은 형식으로 아이콘이 준비되어 있으므로 이를 이용하여 아이콘을 표시하고 있습니다.

이러한 buildHTML을 insertHTML에 추가하고 id="weather"의 div 태그에 표시하면 완성됩니다.

app/assets/javascripts/weather.js

function buildHTML(data, i) {
  var Week = new Array("（日）","（月）","（火）","（水）","（木）","（金）","（土）");
  var date = new Date (data.list[i].dt_txt);
  date.setHours(date.getHours() + 9);
  var month = date.getMonth()+1;
  var day = month + "月" + date.getDate() + "日" + Week[date.getDay()] + date.getHours() + "：00";
  var icon = data.list[i].weather[0].icon;
  var html =
  '<div class="weather-report">' +
    '<img src="http://openweathermap.org/img/w/' + icon + '.png">' +
    '<div class="weather-date">' + day + '</div>' +
    '<div class="weather-main">'+ data.list[i].weather[0].main + '</div>' +
    '<div class="weather-temp">' + Math.round(data.list[i].main.temp) + '℃</div>' +
  '</div>';
  return html
}

참고 : 무료 일기 예보 API의 OpenWeatherMap을 사용해보십시오.

내용에 미비 등이 있으면, 수고스럽지만 코멘트에서 부탁합니다.