teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

内容修正

2020/03/28 15:30

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -10,8 +10,6 @@
10
10
  ![イメージ説明](a42b7a4196de10ea06211a7afd4d2ce8.png)
11
11
  どなたかビューに表示させるまでの流れを教えていただけないでしょうか?
12
12
 
13
- また天気登録する際に〇〇度〜〇〇度の範囲で登録できるようにしたいのですが、こちらのhtmlでの記載はどのようなものを使えばよかったでしょうか?
14
- 例えば今日の天気は11℃〜15℃のように設定して11〜15の値をデータベースに保存できるようにしたいです。
15
13
 
16
14
  ```ここに言語を入力
17
15
  $(document).on('turbolinks:load', function() {

3

コード修正しました。

2020/03/28 15:30

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -11,4 +11,47 @@
11
11
  どなたかビューに表示させるまでの流れを教えていただけないでしょうか?
12
12
 
13
13
  また天気登録する際に〇〇度〜〇〇度の範囲で登録できるようにしたいのですが、こちらのhtmlでの記載はどのようなものを使えばよかったでしょうか?
14
- 例えば今日の天気は11℃〜15℃のように設定して11〜15の値をデータベースに保存できるようにしたいです。
14
+ 例えば今日の天気は11℃〜15℃のように設定して11〜15の値をデータベースに保存できるようにしたいです。
15
+
16
+ ```ここに言語を入力
17
+ $(document).on('turbolinks:load', function() {
18
+ $(function() {
19
+ var API_KEY = ''
20
+ var city = 'Tokyo';
21
+ var url = 'http://api.openweathermap.org/data/2.5/forecast?q=' + city + ',jp&units=metric&APPID=' + API_KEY;
22
+ $.ajax({
23
+ url: url,
24
+ dataType: "json",
25
+ type: 'GET',
26
+ })
27
+ .done(function(data) {
28
+ var insertHTML = "";
29
+ var cityName = '<h2>' + data.city.name + '</h2>';
30
+ $('#city-name').html(cityName);
31
+ for (var i = 0; i <= 12; i = i + 1) {
32
+ insertHTML += buildHTML(data, i);
33
+ }
34
+ $('#weather').html(insertHTML);
35
+ })
36
+ .fail(function(data) {
37
+ console.log("失敗しました");
38
+ });
39
+ });
40
+ function buildHTML(data, i) {
41
+ var Week = new Array("(日)","(月)","(火)","(水)","(木)","(金)","(土)");
42
+ var date = new Date (data.list[i].dt_txt);
43
+ date.setHours(date.getHours() + 9);
44
+ var month = date.getMonth()+1;
45
+ var day = month + "月" + date.getDate() + "日" + Week[date.getDay()] + date.getHours() + ":00";
46
+ var icon = data.list[i].weather[0].icon;
47
+ var html =
48
+ '<div class="weather-report">' +
49
+ '<img src="http://openweathermap.org/img/w/' + icon + '.png">' +
50
+ '<div class="weather-date">' + day + '</div>' +
51
+ '<div class="weather-main">'+ data.list[i].weather[0].main + '</div>' +
52
+ '<div class="weather-temp">' + Math.round(data.list[i].main.temp) + '℃</div>' +
53
+ '</div>';
54
+ return html
55
+ }
56
+ });
57
+ ```

2

修正しました

2020/03/28 15:19

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,10 @@
1
1
  Railsを利用して天気予報のデータを取得してビューに表示させたいと考えています。
2
2
 
3
- OpenWeatherMapを利用して取得しようと考えているのですが、どうもビューに表示させるまでの流れがどのサイトを調べても詳しく乗っていないのでいまいちパッときません。以下の画像の会員登録をした後のAPIキーを取得して、JSONが取得できるところまではできましたが、その後がrailsでの記載の仕方がピンときません。
3
+ OpenWeatherMapを利用して取得しようと考えているのですが、どうもビューに表示させるまでの流れがどのサイトを調べても詳しく乗っていないのでいまいちパッときません。
4
4
 
5
+ <追加内容>
6
+ 以下の画像の会員登録をした後のAPIキーを取得して、JSONが取得できるところまではできましたが、その後がrailsでの記載の仕方がピンときません。
7
+
5
8
  ![イメージ説明](daeb099e67153a400488ee40b72e9cfd.png)
6
9
  ![イメージ説明](a5669f330b77f8871437453d2d84474f.png)
7
10
  ![イメージ説明](a42b7a4196de10ea06211a7afd4d2ce8.png)

1

修正変更

2020/03/26 11:06

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,11 @@
1
1
  Railsを利用して天気予報のデータを取得してビューに表示させたいと考えています。
2
2
 
3
- OpenWeatherMapを利用して取得しようと考えているのですが、どうもビューに表示させるまでの流れがどのサイトを調べても詳しく乗っていないのでいまいちパッときません。
3
+ OpenWeatherMapを利用して取得しようと考えているのですが、どうもビューに表示させるまでの流れがどのサイトを調べても詳しく乗っていないのでいまいちパッときません。以下の画像の会員登録をした後のAPIキーを取得して、JSONが取得できるところまではできましたが、その後がrailsでの記載の仕方がピンときません。
4
+
5
+ ![イメージ説明](daeb099e67153a400488ee40b72e9cfd.png)
6
+ ![イメージ説明](a5669f330b77f8871437453d2d84474f.png)
7
+ ![イメージ説明](a42b7a4196de10ea06211a7afd4d2ce8.png)
4
8
  どなたかビューに表示させるまでの流れを教えていただけないでしょうか?
5
9
 
6
- また天気登録する際に〇〇度〜〇〇度の範囲で登録できるようにしたいのですが、こちらのhtmlでの記載はどのようなものを使えばよかったでしょうか?
10
+ また天気登録する際に〇〇度〜〇〇度の範囲で登録できるようにしたいのですが、こちらのhtmlでの記載はどのようなものを使えばよかったでしょうか?
11
+ 例えば今日の天気は11℃〜15℃のように設定して11〜15の値をデータベースに保存できるようにしたいです。