Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

目標

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

スクリーンショット 2017-06-20 15.08.38.png

手順

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

OpenWeatherMapを使用する準備

  • OpenWeatherMap(https://openweathermap.org/)にアクセスし、「Sign Up」からアカウントを作成します
  • マイページの[API keys]からAPIキーを確認できます。画像の赤く塗りつぶされた部分です。
  • 英文で書いてあるように、このAPIキーが使用できるようになるまで10分〜60分ほどかかります。

スクリーンショット 2017-06-20 15.18.27.png

  • 実際にどのような情報が取得できるのかを確認するためには、Chrome拡張の「Advanced REST Client」が便利です。
  • 左上のマークをクリックしてタブを開き、画像のように[Host][pass][QueryParameters]を設定してみてください。[QueryParameters]はADDボタンで追加できます。

スクリーンショット 2017-06-20 16.03.18.png

  • 情報の取得内容は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を使ってみる

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away