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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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はプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

受付中

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はプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1回答

-4評価

0クリップ

407閲覧

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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はプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。