【Rails】OpenWeatherMapを用いて、登録住所の天気予報を、日本語で表示する方法

# 目標

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/677c9a4e-3e76-9c56-2dd1-7952613480a4.gif)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[ログイン機能実装](https://qiita.com/matsubishi5/items/5bd8fdd45af955cf137d)

# APIキーを取得

### 1.下記リンクにアクセス

[OpenWeatherMap](https://openweathermap.org/)

### 2.`Sign in`をクリック 
![スクリーンショット 2020-06-10 19.37.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/7e3a6207-bb54-8f56-fd83-375528233aea.png)

### 3.`Create an Acount.`をクリック
![スクリーンショット 2020-06-10 19.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/2e8eb1a3-d5fc-e814-50a6-d3801c4f2163.png)

### 4.必要情報を入力し、`Create Acount`をクリック
![スクリーンショット 2020-06-10 19.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/c832194f-6eca-3a70-fd2c-2eb3a0b0b9a9.png)

### 5.Purposeを`other`に設定し(適当で良い),`Save`をクリック
![スクリーンショット 2020-06-10 19.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/71fa365c-bb75-553f-1920-204f9fae418c.png)

### 6.`API keys`をクリック
![スクリーンショット 2020-06-10 19.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/12d45852-53ac-4f94-cf29-50e18c2e1be1.png)

### 7.`Key`をコピー
![スクリーンショット 2020-06-10 19.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/d34c0446-0214-2776-6dfc-e15125e0dcc5.png)

### 8.APIキーを環境変数化
下記記事の「APIキーを環境変数化」と同様に実装する。

[Google Map表示](https://qiita.com/matsubishi5/items/196fa1941da2152b6d5d)

# 実装

### 1.カラムを追加

```terminal:ターミナル
$ rails g migration AddPrefectureToUsers prefecture:string
```

```ruby:~_add_prefecture_to_users.rb
class AddPrefectureToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :prefecture, :string
  end
end
```

```terminal:ターミナル
$ rails db:migrate
```

### 2.`application_controller.rb`を編集

ストロングパラメーターに`prefecture`を追加します。

```ruby:applocation_controller.rb
def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :name, :prefecture])
end
```

### 3.ビューを編集

```slim:users/show.html.slim
h3.weather-text
  = @user.prefecture

#weather

javascript:

  $(function () {
    var API_KEY = "#{ENV['OPEN_WEATHER_MAP_API']}"; // APIキー(環境変数)を変数に代入
    var city = "#{@user.prefecture}"; // 該当ユーザーの都道府県名を変数に代入
    // APIを読み込み変数に代入
    var url = 'https://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 = data.city.name;
        $('#city-name').html(cityName);

        // デフォルトでは3時間ごとの天気を取得するため、
        // 8の倍数でデータを取得することにより、24時間ごとの天気を取得する
        for (var i = 0; i <= 32; i = i + 8) {
          insertHTML += buildHTML(data, i);
        }
        $('#weather').html(insertHTML);
      })
      .fail(function (data) {
        alert('天気予報取得に失敗しました');
      });
  });

  // 日本語化
  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()];
    var icon = data.list[i].weather[0].icon;
    var html =
      '<div class="weather-report">' +
        '<img src="https://openweathermap.org/img/w/' + icon + '.png">' +
        '<span class="weather-date">' + day + "</span>" +
        '<div class="weather-temp-max">' + '最高：' + Math.round(data.list[i].main.temp_max) + "℃</div>" +
        '<span class="weather-temp-min">' + '最低：' + Math.floor(data.list[i].main.temp_min) + "℃</span>" +
      '</div>';
    return html
  }
```