質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

1回答

1244閲覧

Rails 天気予報取得 表示

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2020/03/25 15:17

編集2022/01/12 10:55

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 } });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gouf

2020/03/26 02:02

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

退会済みユーザー

2020/03/26 09:34

すみません、修正しましたので確認のほどお願いいたします。
退会済みユーザー

退会済みユーザー

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

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

回答1

0

質問に対するレビュー欄にも書きましたが、回答としても改めて記載します

  • 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 要素として追加する

というのが、現状の実装に沿った、変更の少ない方法なのかな、と考えました


リポジトリを作成しました
なにか参考になれば幸いです

Link

投稿2020/04/05 11:20

gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問