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

回答編集履歴

3

テキスト修正

2020/06/22 23:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -126,7 +126,7 @@
126
126
 
127
127
  ご質問にある元の `app.js`からの差分を、以下から確認できます。
128
128
 
129
- - **修正による差分:** [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
129
+ - **github.com:** [修正による差分](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
130
130
 
131
131
 
132
132
  以上、参考になれば幸いです。

2

テキスト修正

2020/06/22 23:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -6,16 +6,127 @@
6
6
  - 翌日および翌々日の6,9,12,15,18時の天気情報を持つオブジェクトを要素とする、(長さ10の)配列を作り、これを `forEach` でループさせる。
7
7
  - 画像および気温を表示する`<span>`の取得を id で行わず、上記の`forEach` のループインデクスに対応する `td.weather-dot-cell`を取得して、そこから各`<span>`を特定する。
8
8
 
9
- 上記を行うと、一例として以下のような感じになります。
9
+ 上記の修正を行った一例として以下のような感じになります。
10
10
 
11
+ ```javascript
12
+ // 天気の表示文字列および画像ファイル名
13
+ const WEATHERS = {
11
- - [github.com/jun68ykt/q272079/blob/master/asset/js/app.js](https://github.com/jun68ykt/q272079/blob/master/asset/js/app.js)
14
+ Thunderstorm: { label: '雷雨', img: 'clouds' },
15
+ Drizzle: { label: '霧雨', img: 'rains' },
16
+ Rain: { label: '雨', img: 'rains' },
17
+ Snow: { label: '雪', img: 'snow' },
18
+ Atmosphere: { label: '濃霧', img: 'snow' },
19
+ Clear: { label: '晴れ', img: 'clear' },
20
+ Clouds: { label: '曇り', img: 'clouds' }
21
+ };
12
22
 
13
- ご質問、元の `app.js`からの差分は以下で
23
+ // 日ちを入れターゲットを定義
24
+ const nowTimeTarget = document.getElementById('nowData');
25
+ const nextTimeTarget = document.getElementById('nextData');
26
+ const afNextTimeTarget = document.getElementById('afNextData');
14
27
 
15
- - [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
28
+ // 現在の日時を取得
29
+ const now = new Date();
16
30
 
17
- 以上、参考なれば幸いです。
31
+ // 取得した日時をターゲット代入
32
+ nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日 ' + now.getHours() + '時' + now.getMinutes() + '分';
33
+ nextTimeTarget.innerHTML = (now.getDate() + 1);
34
+ afNextTimeTarget.innerHTML = (now.getDate() + 2);
18
35
 
19
- ### 追伸
36
+ // 位置情報を取得開始
37
+ if (navigator.geolocation) {
38
+ // 位置情報が取得成功した時
39
+ navigator.geolocation.getCurrentPosition(function (position) {
20
40
 
41
+ // 緯度経度を取得
42
+ const basePosition = position.coords;
43
+ const lat = basePosition.latitude;
44
+ const lng = basePosition.longitude;
45
+
46
+ // WEB API を使用し、現在地の現在の天気を取得
47
+ const API_KEY = "????????????????????????????????";
48
+ const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
49
+ const request = new XMLHttpRequest();
50
+ request.open("GET", url, true);
51
+ request.responseType = "json";
52
+
53
+ // 現在の天気に関する関数
54
+ request.onload = function () {
55
+ const nowData = this.response;
56
+
57
+ // 「現在の天気」「現在の気温」「現在地」を取得
58
+ const weatherName = nowData.weather[0].main;
59
+ const weatherTemp = nowData.main.temp;
60
+ const cityName = nowData.name;
61
+
62
+ // 取得した現在地が「Suguri」の時の処置
63
+ if (cityName === 'Suguri') {
21
- 上記のコードはあくでヒントで。お手元のコードに適用す場合はそのまコピペはなく、修正後のコードの意図をご理解のえ、使えそうな所があればお手元コードに応用し頂ければと思います。
64
+ alert('現在位置をうく取得することができせんした。\nしばらお待ちいただき再度アクセスいただけますでしょか?\n「Suguri」天気を表示させていただきます。どこかは知りません。')
65
+ }
66
+ // 取得したもの入れるターゲットを定義
67
+ const geoTarget = document.getElementById('cityName');
68
+ const patternTextTarget = document.getElementById('pattern');
69
+ const patternImgTarget = document.getElementById('picture');
70
+ const patternTempTarget = document.getElementById('temp');
71
+
72
+ // 現在地、気温をターゲットに代入
73
+ geoTarget.innerHTML = cityName;
74
+ patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';
75
+
76
+ /*取得した天気によって
77
+ 「天気の名前」「天気の画像を」を挿入*/
78
+ const weather = WEATHERS[weatherName];
79
+ if (weather) {
80
+ const { label, img } = weather;
81
+ patternTextTarget.innerHTML = label;
82
+ patternImgTarget.innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
83
+ } else {
84
+ return false;
85
+ }
86
+ };
87
+ request.send();
88
+
89
+ // WEB API を使用し、現在地の翌日以降の天気を取得
90
+ const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
91
+ const nextRequest = new XMLHttpRequest();
92
+ nextRequest.open("GET", nextUrl, true);
93
+ nextRequest.responseType = "json";
94
+
95
+ // 現在、翌日以降の天気に関する関数
96
+ nextRequest.onload = function () {
97
+ const data = this.response;
98
+
99
+ // 翌日および翌々日の6,9,12,15,18時の天気情報を取得し、対応する画像と気温を設定
100
+ const cells = document.querySelectorAll('.weather-dot-cell');
101
+ [...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => {
102
+ const weather = WEATHERS[e.weather[0].main];
103
+ if (weather) {
104
+ const { label, img } = weather;
105
+ cells[i].querySelector('.weather-dot').innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
106
+ cells[i].querySelector('.weather-temp').textContent = `${e.main.temp}℃`;
107
+ }
108
+ });
109
+ };
110
+ nextRequest.send();
111
+ },
112
+
113
+ // 位置情報の取得失敗した時
114
+ function () {
115
+ alert('位置情報の取得に失敗しました。');
116
+ });
117
+ } else {
118
+ alert("位置情報を取得できませんでした……");
119
+ }
120
+
121
+ ```
122
+
123
+ 上記の修正後の `app.js` を以下のGithubにも上げておきました。
124
+
125
+ - **github.com:** [jun68ykt/q272079/blob/master/asset/js/app.js](https://github.com/jun68ykt/q272079/blob/master/asset/js/app.js)
126
+
127
+ ご質問にある元の `app.js`からの差分を、以下から確認できます。
128
+
129
+ - **修正による差分:** [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
130
+
131
+
132
+ 以上、参考になれば幸いです。

1

テキスト修正

2020/06/22 23:38

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  こんにちは
2
2
 
3
- 以下のような修正が考えられられます。
3
+ 以下のような修正が考えられます。
4
4
 
5
5
  - 各天気を表すキー(例:`Thunderstorm`)に対応する、表示文字列(例:`雷雨`)と画像ファイル名(例: `clouds`) をマッピングさせるオブジェクトを定義。これを使用して `if`文を削除
6
6
  - 翌日および翌々日の6,9,12,15,18時の天気情報を持つオブジェクトを要素とする、(長さ10の)配列を作り、これを `forEach` でループさせる。
@@ -14,4 +14,8 @@
14
14
 
15
15
  - [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
16
16
 
17
- 以上、参考になれば幸いです。
17
+ 以上、参考になれば幸いです。
18
+
19
+ ### 追伸
20
+
21
+ 上記のコードはあくまでヒントです。お手元のコードに適用する場合はそのままコピペではなく、修正後のコードの意図をご理解のうえ、使えそうな所があればお手元のコードに応用して頂ければと思います。