teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップWebサイトに関する質問短く、簡潔なJavascriptの記述をするためにヒントをください

編集履歴

回答編集履歴

3

テキスト修正

2020/06/22 23:54

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -254,7 +254,7 @@
254
254
 
255
255
 
256
256
 
257
- - **修正による差分:** [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
257
+ - **github.com:** [修正による差分](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
258
258
 
259
259
 
260
260
 

2

テキスト修正

2020/06/22 23:54

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -14,28 +14,250 @@
14
14
 
15
15
 
16
16
 
17
- 上記を行うと、一例として以下のような感じになります。
18
-
19
-
20
-
21
- - [github.com/jun68ykt/q272079/blob/master/asset/js/app.js](https://github.com/jun68ykt/q272079/blob/master/asset/js/app.js)
22
-
23
-
24
-
25
- ご質問にある、元の `app.js`からの差分は以下です。
26
-
27
-
28
-
29
- - [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
17
+ 上記の修正を行った一例として、以下のような感じになります。
18
+
19
+
20
+
21
+ ```javascript
22
+
23
+ // 天気の表示文字列および画像ファイル名
24
+
25
+ const WEATHERS = {
26
+
27
+ Thunderstorm: { label: '雷雨', img: 'clouds' },
28
+
29
+ Drizzle: { label: '霧雨', img: 'rains' },
30
+
31
+ Rain: { label: '雨', img: 'rains' },
32
+
33
+ Snow: { label: '雪', img: 'snow' },
34
+
35
+ Atmosphere: { label: '濃霧', img: 'snow' },
36
+
37
+ Clear: { label: '晴れ', img: 'clear' },
38
+
39
+ Clouds: { label: '曇り', img: 'clouds' }
40
+
41
+ };
42
+
43
+
44
+
45
+ // 日にちを入れるターゲットを定義する
46
+
47
+ const nowTimeTarget = document.getElementById('nowData');
48
+
49
+ const nextTimeTarget = document.getElementById('nextData');
50
+
51
+ const afNextTimeTarget = document.getElementById('afNextData');
52
+
53
+
54
+
55
+ // 現在の日時を取得
56
+
57
+ const now = new Date();
58
+
59
+
60
+
61
+ // 取得した日時をターゲットに代入
62
+
63
+ nowTimeTarget.innerHTML = (now.getMonth() + 1) + '月' + now.getDate() + '日　' + now.getHours() + '時' + now.getMinutes() + '分';
64
+
65
+ nextTimeTarget.innerHTML = (now.getDate() + 1);
66
+
67
+ afNextTimeTarget.innerHTML = (now.getDate() + 2);
68
+
69
+
70
+
71
+ // 位置情報を取得開始
72
+
73
+ if (navigator.geolocation) {
74
+
75
+ // 位置情報が取得成功した時
76
+
77
+ navigator.geolocation.getCurrentPosition(function (position) {
78
+
79
+
80
+
81
+ // 緯度経度を取得
82
+
83
+ const basePosition = position.coords;
84
+
85
+ const lat = basePosition.latitude;
86
+
87
+ const lng = basePosition.longitude;
88
+
89
+
90
+
91
+ // WEB API を使用し、現在地の現在の天気を取得
92
+
93
+ const API_KEY = "????????????????????????????????";
94
+
95
+ const url = "https://api.openweathermap.org/data/2.5/weather" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
96
+
97
+ const request = new XMLHttpRequest();
98
+
99
+ request.open("GET", url, true);
100
+
101
+ request.responseType = "json";
102
+
103
+
104
+
105
+ // 現在の天気に関する関数
106
+
107
+ request.onload = function () {
108
+
109
+ const nowData = this.response;
110
+
111
+
112
+
113
+ // 「現在の天気」「現在の気温」「現在地」を取得
114
+
115
+ const weatherName = nowData.weather[0].main;
116
+
117
+ const weatherTemp = nowData.main.temp;
118
+
119
+ const cityName = nowData.name;
120
+
121
+
122
+
123
+ // 取得した現在地が「Suguri」の時の処置
124
+
125
+ if (cityName === 'Suguri') {
126
+
127
+ alert('現在位置をうまく取得することができませんでした。\nしばらくお待ちいただき、再度アクセスいただけますでしょうか？\n「Suguri」の天気を表示させていただきます。どこかは知りません。')
128
+
129
+ }
130
+
131
+ // 取得したもの入れるターゲットを定義
132
+
133
+ const geoTarget = document.getElementById('cityName');
134
+
135
+ const patternTextTarget = document.getElementById('pattern');
136
+
137
+ const patternImgTarget = document.getElementById('picture');
138
+
139
+ const patternTempTarget = document.getElementById('temp');
140
+
141
+
142
+
143
+ // 現在地、気温をターゲットに代入
144
+
145
+ geoTarget.innerHTML = cityName;
146
+
147
+ patternTempTarget.innerHTML = weatherTemp + '<span class="unit">℃</span>';
148
+
149
+
150
+
151
+ /*取得した天気によって
152
+
153
+ 「天気の名前」「天気の画像を」を挿入*/
154
+
155
+ const weather = WEATHERS[weatherName];
156
+
157
+ if (weather) {
158
+
159
+ const { label, img } = weather;
160
+
161
+ patternTextTarget.innerHTML = label;
162
+
163
+ patternImgTarget.innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
164
+
165
+ } else {
166
+
167
+ return false;
168
+
169
+ }
170
+
171
+ };
172
+
173
+ request.send();
174
+
175
+
176
+
177
+ // WEB API を使用し、現在地の翌日以降の天気を取得
178
+
179
+ const nextUrl = "https://api.openweathermap.org/data/2.5/forecast" + "?lat=" + lat + "&lon=" + lng + "&units=metric&APPID=" + API_KEY;
180
+
181
+ const nextRequest = new XMLHttpRequest();
182
+
183
+ nextRequest.open("GET", nextUrl, true);
184
+
185
+ nextRequest.responseType = "json";
186
+
187
+
188
+
189
+ // 現在、翌日以降の天気に関する関数
190
+
191
+ nextRequest.onload = function () {
192
+
193
+ const data = this.response;
194
+
195
+
196
+
197
+ // 翌日および翌々日の6,9,12,15,18時の天気情報を取得し、対応する画像と気温を設定
198
+
199
+ const cells = document.querySelectorAll('.weather-dot-cell');
200
+
201
+ [...data.list.slice(7, 12), ...data.list.slice(15, 20)].forEach((e, i) => {
202
+
203
+ const weather = WEATHERS[e.weather[0].main];
204
+
205
+ if (weather) {
206
+
207
+ const { label, img } = weather;
208
+
209
+ cells[i].querySelector('.weather-dot').innerHTML = `<img src="asset/img/${img}.png" alt="${label}">`;
210
+
211
+ cells[i].querySelector('.weather-temp').textContent = `${e.main.temp}℃`;
212
+
213
+ }
214
+
215
+ });
216
+
217
+ };
218
+
219
+ nextRequest.send();
220
+
221
+ },
222
+
223
+
224
+
225
+ // 位置情報の取得失敗した時
226
+
227
+ function () {
228
+
229
+ alert('位置情報の取得に失敗しました。');
230
+
231
+ });
232
+
233
+ } else {
234
+
235
+ alert("位置情報を取得できませんでした……");
236
+
237
+ }
238
+
239
+
240
+
241
+ ```
242
+
243
+
244
+
245
+ 上記の修正後の `app.js` を以下のGithubにも上げておきました。
246
+
247
+
248
+
249
+ - **github.com:** [jun68ykt/q272079/blob/master/asset/js/app.js](https://github.com/jun68ykt/q272079/blob/master/asset/js/app.js)
250
+
251
+
252
+
253
+ ご質問にある元の `app.js`からの差分を、以下から確認できます。
254
+
255
+
256
+
257
+ - **修正による差分:** [Improve app.js](https://github.com/jun68ykt/q272079/commit/b19da56466baa2ff19c7ea971d0ca7c2c594f898)
258
+
259
+
30
260
 
31
261
 
32
262
 
33
263
  以上、参考になれば幸いです。
34
-
35
-
36
-
37
- ### 追伸
38
-
39
-
40
-
41
- 上記のコードはあくまでヒントです。お手元のコードに適用する場合はそのままコピペではなく、修正後のコードの意図をご理解のうえ、使えそうな所があればお手元のコードに応用して頂ければと思います。

1

テキスト修正

2020/06/22 23:38

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 以下のような修正が考えられられます。
5
+ 以下のような修正が考えられます。
6
6
 
7
7
 
8
8
 
@@ -31,3 +31,11 @@
31
31
 
32
32
 
33
33
  以上、参考になれば幸いです。
34
+
35
+
36
+
37
+ ### 追伸
38
+
39
+
40
+
41
+ 上記のコードはあくまでヒントです。お手元のコードに適用する場合はそのままコピペではなく、修正後のコードの意図をご理解のうえ、使えそうな所があればお手元のコードに応用して頂ければと思います。