Railsを利用して天気予報のデータを取得してビューに表示させたいと考えています。

OpenWeatherMapを利用して取得しようと考えているのですが、どうもビューに表示させるまでの流れがどのサイトを調べても詳しく乗っていないのでいまいちパッときません。

<追加内容>
以下の画像の会員登録をした後のAPIキーを取得して、JSONが取得できるところまではできましたが、その後がrailsでの記載の仕方がピンときません。

どなたかビューに表示させるまでの流れを教えていただけないでしょうか？

$(document).on('turbolinks:load', function() {
$(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 <= 12; i = i + 1) {
      insertHTML += buildHTML(data, i);
    }
    $('#weather').html(insertHTML);
  })
  .fail(function(data) {
    console.log("失敗しました");
  });
});
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
}
});

gouf

2020/03/26 02:02

どの時点で躓いていますか or 実装はどこまで進んでいますか? 最低限の動くコードとしてたとえば特定地域の天気予報データの取得までは可能になっていますか?

退会済みユーザー

2020/03/26 09:34

すみません、修正しましたので確認のほどお願いいたします。

gouf

2020/03/27 04:54

ガイド情報は一読されましたか? : https://openweathermap.org/guide (もし英語に不慣れであれば: Google 翻訳 ( http://translate.google.co.jp/ ) や DeepL ( https://www.deepl.com/translator ) での翻訳があれば、読解の助けになると思います)

退会済みユーザー

2020/03/27 09:29

はい、人通り読んでコードも書きました。しかし、1都市しか表示できないのが少し残念です。

gouf

2020/03/28 14:52

「1都市しか表示できないのが少し残念」とはどのような意味でしょうか。 API は必要最低限の機能を提供しているように...ドキュメント上では...見られますが、複数回リクエストすることでは実装したい動作を満たせない、ということなのでしょうか?

gouf

2020/03/28 14:54 編集

書かれたコードはプロジェクトディレクトリ内の「lib/」などの適当なディレクトリに保存して autoload_paths への設定追加は実施されましたか? ぬぐぐ。Rails6でlib以下のカスタムバリデーションが呼び出せない【Zeitwerkとは】 - 独学プログラマ - https://blog.cloud-acct.com/posts/column-rails6-zeitwerk-autoload/

退会済みユーザー

2020/03/28 14:54

現在東京のみ天気予報表示していますが、これが海外や日本の他の市(大阪、名古屋)も表示したいという意味です。

gouf

2020/03/28 15:13

(API キーなどを取り除いて) コードは質問欄に追記可能ですか?

退会済みユーザー

2020/03/28 15:20 編集

はい、今から載せました

gouf

2020/03/30 10:04

たとえばですが、次のような実装が考えられませんか? : 1. Rails 側で (OpenWeatherMap API で有効な) 都市名を配列として複数用意 2. 配列を View 内の each で回してたとえば「tag.div('data-city-name': city_name, class: 'weather')」と data 属性に値を持たせる 3. JS 初期化時に data 属性値を持つ要素を読み取る 4. JS 側で API に問い合わせ、各都市名に対応する天気情報を得る 5. 問い合わせ結果を JS で HTML 要素として反映 (ほかにも、Ruby 側で API に問い合わせて結果を Rails の View に埋め込むなど、他の実装方法も考えられるかもしれません)

退会済みユーザー

2020/04/01 13:22

上記の手順ですと、 1. var city = new Array("Tokyo","Nagoya","Osaka","Fukuoka","Hokkaido","Okinawa");とする。 2. この部分をeachで定義することが想像つきません。 3.初期化というのはvar city="Tokyo"のような部分でしょうか？

gouf

2020/04/01 23:46 編集

* Rails のコントローラ側で「@cities = %w[Tokyo Nagoya Osaka Fukuoka Hokkaido Okinawa]」として * View 内の記述で「@cities .each」で回し * 「tag.div('data-city-name': city_name, class: 'weather')」と data 属性に値を持たせる * JS が初期化されたときには「data-city-name」が拾える状況になっているので * JS 側で「document .querySelectorAll('.weather')」のように要素を拾い * JS 側でループ処理を回して data 属性値を拾いつつ OpenWeatherMap API にリクエストを送り * JS 側で HTML 要素として追加するというのが、現状の実装に沿った、変更の少ない方法なのかな、と考えました

退会済みユーザー

2020/04/04 01:50

コントローラー自体が天気用法機能に適用していません。具体的なコードを記載していただけるとわかりやすいです。