OpenWeatherMapのAPIを使って現在地の天気と気温を表示する

#はじめに
OpenWeatherMapのWeatherAPIとGoogleのgeolocationAPIを使い現在地の天気を取得します。ちなみに、どちらのAPIも無料で利用できます！

#WeatherAPI Keyを取得する
[OpenWeather](https://openweathermap.org/api)からアカウントを作成し、APIキーを取得しましょう。
以下の手順でアカウントを作成できます。
①サインイン画面へ
![スクリーンショット 2021-10-21 033133.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/fcc902e9-6fa6-2c34-7293-b7efd6ff8cdc.jpeg)
②「Create an Account.」をクリックし、アカウントを作成する。
![033455.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/df605605-6ffc-87ea-2430-fb19d7165bdb.jpeg)
③アカウント作成後、下記の画像のように「My API keys」を選択する。そうするとAPIキーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/4499493e-1d74-81cb-2743-e06a8b7afbb8.png)

#GoogleのgeolocationAPIを取得する
位置情報を取得するためGeolocation APIを使用します。
このAPIは、[Google Cloud Platform](https://console.cloud.google.com/?hl=ja)から取得できます。

この記事ではAPIの取得方法は割愛しますので、下の記事を参考に`Geolocation API`を有効にしてください。
※以下の記事では`Geocoding API`と`Maps JavaScript API`を有効にしていますが、今回は`Geolocation API`のみを有効にします。
[Google Mapを利用する 【Rails6】【Geocoder】【heroku】](https://qiita.com/MandoNarin/items/aa91ffae373a8cfc85d2)

#現在地の天気と気温を取得する

```index.html.erb
<div id="weather"></div>

<script>
const API_KEY = "<%= ENV['WeatherAPI'] %>"

window.onload = function() {
  weather_search()
};

#現在地の緯度経度を取得
navigator.geolocation.getCurrentPosition(function (position) {
     latitude = position.coords.latitude;
    longitude = position.coords.longitude;
  
  });
const wheather_select = document.querySelector('#wheather-select');
const options = document.querySelectorAll("#wheather-select option");
const weather_search = function () {

const url = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + latitude + '&lon=' + longitude  + '&units=metric&appid=' + API_KEY;

  fetch(url).then((data) => {
    return data.json();
  }).then((json) => {
    let insertHTML = "";
    let today = 0
    let weather = document.querySelector('#weather')
    insertHTML += buildHTML(json, today);
    weather.innerHTML = insertHTML
  }).catch(error => {
    console.error(error);
  });
};

wheather_select.addEventListener('change', weather_search);

function buildHTML(data, i) {
  let Week = new Array("（日）","（月）","（火）","（水）","（木）","（金）","（土）");
  let date = new Date();
  date.setHours(date.getHours() );
  let month = date.getMonth()+1;
  let day = month + "月" + date.getDate() + "日" + Week[date.getDay()] + date.getHours() + "：00";
  let icon = data.list[i].weather[0].icon;
  let main = weatherJavaneseConversion(data.list[i].weather[0].main);   
  
  let html =
  '<div class="weather-report">' +
    '<h2>現在の天気は'+ '<span>' +main + '</span>' +'です！</h2>' +
    '<img src="https://openweathermap.org/img/w/' + icon + '.png">' +
    '<div class="weather-date">' + day + '</div>' +
    '<div class=main>' + '気温:' + Math.round(data.list[i].main.temp) + '℃' + '</div>' +
  '</div>'
    ;
  return html
}

function weatherJavaneseConversion(name) {
  switch (name) {
    case "Clear":
      return "晴れ"
    case 'Clouds':
      return "曇り"
    case "Rain":
      return "雨"
    case "Snow":
      return "雪"
    default:
      console.log(name)
      return name
  }
}
</script>
<script　src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['Geolocation_API_KEY'] %>&callback"async defer>
</script>
```

#APIキーの非公開
###gemの追加
Gemfileに.envファイル(後述)を利用するためのgemを追記します。

```
gem 'dotenv-rails'
```
続いて、ターミナルで`bundle install`を実行します。

```
bundle install
```

###.envファイルの作成
`.env`というファイルをアプリケーションディレクトリ(appやdbやGemfileがあるディレクトリ)に自分で作成します。
![スクリーンショット 2021-04-20 214827.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/36a7b15a-968a-416f-d569-0bc0524183c2.jpeg)

そして、`.env`ファイルに以下の2行を追記します。

```
WeatherAPI=取得したWeatherAPI APIのAPIキーを書く
Geolocation_API_KEY=取得したGeolocation APIのAPIキーを書く
```


公開しないように`.gitignore`ファイルに以下一行を記述します。（`.gitignore`ファイルがない場合は、アプリケーションディレクトリに自分で作成します。）

```
/.env
```

#完成
![050156.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/e861fa91-5ac2-ced6-8e5b-721a837c7781.jpeg)


#参考
[Rails/ES6/OpenWeatherMapで天気予報を表示してみた](https://qiita.com/yokku21/items/69c42dd056cc5504e386)
[【Rails / Google Map API】APIを用いて位置情報を取得する](https://qiita.com/iwasan06/items/075f3dd21a0d3769e0d8)