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

# 目標
* 画像の左下にあるような天気予報を表示する

<img width="771" alt="スクリーンショット 2017-06-20 15.08.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/178077/7d6b3663-c6aa-ce18-3f02-ea61fb809d29.png">

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

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

<img width="1191" alt="スクリーンショット 2017-06-20 15.18.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/178077/0dca3d7e-1e47-ecb9-a692-05775554d90d.png">

* 実際にどのような情報が取得できるのかを確認するためには、Chrome拡張の「[Advanced REST Client](https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=JA)」が便利です。
* 左上のマークをクリックしてタブを開き、画像のように[Host][pass][QueryParameters]を設定してみてください。[QueryParameters]はADDボタンで追加できます。

<img width="756" alt="スクリーンショット 2017-06-20 16.03.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/178077/655e7a95-e0ed-8d60-aceb-d57aad112049.png">

* 情報の取得内容はURLで設定されます。なお、このAPIの気温の単位はデフォルトだと華氏（°F）になっているため、`units=metric`を追記することで、摂氏（°C）に変更できます。そのほかの詳細については[こちらのページをご確認ください](https://openweathermap.org/forecast5)。
* SENDボタンをクリックすると、このURLを送ると実際にどんなデータが返ってくるかを確認することができます。今回はJSON形式で扱うため、JSONのタブを選択して確認しましょう。
* cityに設定できる地名はOpenWeatherMapで検索してみたり、[ここのページを参考にしてみる](https://openweathermap.org/weathermap?zoom=12&lat=35.6895&lon=139.6917)と良さそうです。
* 左上のマークをクリックしてタブを閉じることで、実際のURLを確認することができます。


# AjaxでAPIから情報を取得する
* 今回はAjaxでjson形式で情報を取得するため、下記のように記述します。
* わかりやすいように、`var API_KEY` `var city` を定義し、`var url`に組み込みましょう。

````js: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を参考にしながら欲しい情報を取得してみましょう。

````js: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タグに表示すれば完成です。

````js: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を使ってみる](http://qiita.com/nownabe/items/aeac1ce0977be963a740)

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