【Rails/JS】無料API「OpenWeatherMap」で天気予報を表示する

目標

• 画像の左下にあるような天気予報を表示する

手順

• OpenWeatherMapを使用する準備
• AjaxでAPIから情報を取得する
• HTMLを組み立てる

OpenWeatherMapを使用する準備

• OpenWeatherMap(https://openweathermap.org/)にアクセスし、「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を使ってみる

内容に不備等ありましたら、お手数ですがコメントにてお願いします。