teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問wordpressのウィジェット内にjavascriptを記述して反映させたい。

編集履歴

質問編集履歴

6

不要なソースコードを削除

2020/03/10 04:25

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,209 +1,3 @@
1
- ```ここに言語を入力
2
-
3
- javascriptのソースコード
4
-
5
- 'use strict';
6
-
7
-
8
-
9
- (() => {
10
-
11
- class ClockDrawer {
12
-
13
- constructor(canvas) {
14
-
15
- this.ctx = canvas.getContext('2d');
16
-
17
- this.width = canvas.width;
18
-
19
- this.height = canvas.height;
20
-
21
- }
22
-
23
-
24
-
25
- draw(angle, func) {
26
-
27
- this.ctx.save();
28
-
29
-
30
-
31
- this.ctx.translate(this.width / 2, this.height / 2);
32
-
33
- this.ctx.rotate(Math.PI / 180 * angle);
34
-
35
-
36
-
37
- this.ctx.beginPath();
38
-
39
- func(this.ctx);
40
-
41
- this.ctx.stroke();
42
-
43
-
44
-
45
- this.ctx.restore();
46
-
47
- }
48
-
49
-
50
-
51
- clear() {
52
-
53
- this.ctx.clearRect(0, 0, this.width, this.height);
54
-
55
- }
56
-
57
- }
58
-
59
-
60
-
61
- class Clock {
62
-
63
- constructor(drawer) {
64
-
65
- this.r = 100;
66
-
67
- this.drawer = drawer;
68
-
69
- }
70
-
71
-
72
-
73
- drawFace() {
74
-
75
- for (let angle = 0; angle < 360; angle += 6) {
76
-
77
- this.drawer.draw(angle, ctx => {
78
-
79
- ctx.moveTo(0, -this.r);
80
-
81
- if (angle % 30 === 0) {
82
-
83
- ctx.lineWidth = 2;
84
-
85
- ctx.lineTo(0, -this.r + 10);
86
-
87
- ctx.font = '13px Arial';
88
-
89
- ctx.textAlign = 'center';
90
-
91
- ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
92
-
93
- } else {
94
-
95
- ctx.lineTo(0, -this.r + 5);
96
-
97
- }
98
-
99
- });
100
-
101
- }
102
-
103
- }
104
-
105
-
106
-
107
- drawHands() {
108
-
109
- // hour
110
-
111
- this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
112
-
113
- ctx.lineWidth = 6;
114
-
115
- ctx.moveTo(0, 10);
116
-
117
- ctx.lineTo(0, -this.r + 50);
118
-
119
- });
120
-
121
-
122
-
123
- // minute
124
-
125
- this.drawer.draw(this.m * 6, ctx => {
126
-
127
- ctx.lineWidth = 4;
128
-
129
- ctx.moveTo(0, 10);
130
-
131
- ctx.lineTo(0, -this.r + 30);
132
-
133
- });
134
-
135
-
136
-
137
- // second
138
-
139
- this.drawer.draw(this.s * 6, ctx => {
140
-
141
- ctx.strokeStyle = 'red';
142
-
143
- ctx.moveTo(0, 20);
144
-
145
- ctx.lineTo(0, -this.r + 20);
146
-
147
- });
148
-
149
- }
150
-
151
-
152
-
153
- update() {
154
-
155
- this.h = (new Date()).getHours();
156
-
157
- this.m = (new Date()).getMinutes();
158
-
159
- this.s = (new Date()).getSeconds();
160
-
161
- }
162
-
163
-
164
-
165
- run() {
166
-
167
- this.update();
168
-
169
-
170
-
171
- this.drawer.clear();
172
-
173
- this.drawFace();
174
-
175
- this.drawHands();
176
-
177
-
178
-
179
- setTimeout(() => {
180
-
181
- this.run();
182
-
183
- }, 100);
184
-
185
- }
186
-
187
- }
188
-
189
-
190
-
191
- const canvas = document.querySelector('canvas');
192
-
193
- if (typeof canvas.getContext === 'undefined') {
194
-
195
- return;
196
-
197
- }
198
-
199
-
200
-
201
- const clock = new Clock(new ClockDrawer(canvas));
202
-
203
- clock.run();
204
-
205
- })();
206
-
207
1
  ```超超初心者です。難しいプログラミング用語は分かりません…。
208
2
 
209
3
  wordpressでブログを作成しています。（テーマはcocoon）

5

ご追記の削除

2020/03/10 04:25

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -231,7 +231,3 @@
231
231
 
232
232
 
233
233
  ![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
234
-
235
-
236
-
237
- [サイトURL](https://japan-thinks.com)

4

サイトのURLの追記

2020/03/09 13:02

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -231,3 +231,7 @@
231
231
 
232
232
 
233
233
  ![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
234
+
235
+
236
+
237
+ [サイトURL](https://japan-thinks.com)

3

codeを<code>タグで挿入しなおしました。

2020/03/09 10:48

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ```ここに言語を入力
2
+
1
3
  javascriptのソースコード
2
4
 
3
5
  'use strict';
@@ -202,12 +204,6 @@
202
204
 
203
205
  })();
204
206
 
205
-
206
-
207
- ```ここに言語を入力
208
-
209
- コード
210
-
211
207
  ```超超初心者です。難しいプログラミング用語は分かりません…。
212
208
 
213
209
  wordpressでブログを作成しています。（テーマはcocoon）

2

codeを<code>タグで挿入しなおしました。

2020/03/09 10:42

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,214 @@
1
+ javascriptのソースコード
2
+
3
+ 'use strict';
4
+
5
+
6
+
7
+ (() => {
8
+
9
+ class ClockDrawer {
10
+
11
+ constructor(canvas) {
12
+
13
+ this.ctx = canvas.getContext('2d');
14
+
15
+ this.width = canvas.width;
16
+
17
+ this.height = canvas.height;
18
+
19
+ }
20
+
21
+
22
+
23
+ draw(angle, func) {
24
+
25
+ this.ctx.save();
26
+
27
+
28
+
29
+ this.ctx.translate(this.width / 2, this.height / 2);
30
+
31
+ this.ctx.rotate(Math.PI / 180 * angle);
32
+
33
+
34
+
35
+ this.ctx.beginPath();
36
+
37
+ func(this.ctx);
38
+
39
+ this.ctx.stroke();
40
+
41
+
42
+
43
+ this.ctx.restore();
44
+
45
+ }
46
+
47
+
48
+
49
+ clear() {
50
+
51
+ this.ctx.clearRect(0, 0, this.width, this.height);
52
+
53
+ }
54
+
55
+ }
56
+
57
+
58
+
59
+ class Clock {
60
+
61
+ constructor(drawer) {
62
+
63
+ this.r = 100;
64
+
65
+ this.drawer = drawer;
66
+
67
+ }
68
+
69
+
70
+
71
+ drawFace() {
72
+
73
+ for (let angle = 0; angle < 360; angle += 6) {
74
+
75
+ this.drawer.draw(angle, ctx => {
76
+
77
+ ctx.moveTo(0, -this.r);
78
+
79
+ if (angle % 30 === 0) {
80
+
81
+ ctx.lineWidth = 2;
82
+
83
+ ctx.lineTo(0, -this.r + 10);
84
+
85
+ ctx.font = '13px Arial';
86
+
87
+ ctx.textAlign = 'center';
88
+
89
+ ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
90
+
91
+ } else {
92
+
93
+ ctx.lineTo(0, -this.r + 5);
94
+
95
+ }
96
+
97
+ });
98
+
99
+ }
100
+
101
+ }
102
+
103
+
104
+
105
+ drawHands() {
106
+
107
+ // hour
108
+
109
+ this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
110
+
111
+ ctx.lineWidth = 6;
112
+
113
+ ctx.moveTo(0, 10);
114
+
115
+ ctx.lineTo(0, -this.r + 50);
116
+
117
+ });
118
+
119
+
120
+
121
+ // minute
122
+
123
+ this.drawer.draw(this.m * 6, ctx => {
124
+
125
+ ctx.lineWidth = 4;
126
+
127
+ ctx.moveTo(0, 10);
128
+
129
+ ctx.lineTo(0, -this.r + 30);
130
+
131
+ });
132
+
133
+
134
+
135
+ // second
136
+
137
+ this.drawer.draw(this.s * 6, ctx => {
138
+
139
+ ctx.strokeStyle = 'red';
140
+
141
+ ctx.moveTo(0, 20);
142
+
143
+ ctx.lineTo(0, -this.r + 20);
144
+
145
+ });
146
+
147
+ }
148
+
149
+
150
+
151
+ update() {
152
+
153
+ this.h = (new Date()).getHours();
154
+
155
+ this.m = (new Date()).getMinutes();
156
+
157
+ this.s = (new Date()).getSeconds();
158
+
159
+ }
160
+
161
+
162
+
163
+ run() {
164
+
165
+ this.update();
166
+
167
+
168
+
169
+ this.drawer.clear();
170
+
171
+ this.drawFace();
172
+
173
+ this.drawHands();
174
+
175
+
176
+
177
+ setTimeout(() => {
178
+
179
+ this.run();
180
+
181
+ }, 100);
182
+
183
+ }
184
+
185
+ }
186
+
187
+
188
+
189
+ const canvas = document.querySelector('canvas');
190
+
191
+ if (typeof canvas.getContext === 'undefined') {
192
+
193
+ return;
194
+
195
+ }
196
+
197
+
198
+
199
+ const clock = new Clock(new ClockDrawer(canvas));
200
+
201
+ clock.run();
202
+
203
+ })();
204
+
205
+
206
+
207
+ ```ここに言語を入力
208
+
209
+ コード
210
+
1
- 超超初心者です。難しいプログラミング用語は分かりません…。
211
+ ```超超初心者です。難しいプログラミング用語は分かりません…。
2
212
 
3
213
  wordpressでブログを作成しています。（テーマはcocoon）
4
214
 
@@ -25,211 +235,3 @@
25
235
 
26
236
 
27
237
  ![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
28
-
29
-
30
-
31
-
32
-
33
- javascriptのソースコード
34
-
35
- 'use strict';
36
-
37
-
38
-
39
- (() => {
40
-
41
- class ClockDrawer {
42
-
43
- constructor(canvas) {
44
-
45
- this.ctx = canvas.getContext('2d');
46
-
47
- this.width = canvas.width;
48
-
49
- this.height = canvas.height;
50
-
51
- }
52
-
53
-
54
-
55
- draw(angle, func) {
56
-
57
- this.ctx.save();
58
-
59
-
60
-
61
- this.ctx.translate(this.width / 2, this.height / 2);
62
-
63
- this.ctx.rotate(Math.PI / 180 * angle);
64
-
65
-
66
-
67
- this.ctx.beginPath();
68
-
69
- func(this.ctx);
70
-
71
- this.ctx.stroke();
72
-
73
-
74
-
75
- this.ctx.restore();
76
-
77
- }
78
-
79
-
80
-
81
- clear() {
82
-
83
- this.ctx.clearRect(0, 0, this.width, this.height);
84
-
85
- }
86
-
87
- }
88
-
89
-
90
-
91
- class Clock {
92
-
93
- constructor(drawer) {
94
-
95
- this.r = 100;
96
-
97
- this.drawer = drawer;
98
-
99
- }
100
-
101
-
102
-
103
- drawFace() {
104
-
105
- for (let angle = 0; angle < 360; angle += 6) {
106
-
107
- this.drawer.draw(angle, ctx => {
108
-
109
- ctx.moveTo(0, -this.r);
110
-
111
- if (angle % 30 === 0) {
112
-
113
- ctx.lineWidth = 2;
114
-
115
- ctx.lineTo(0, -this.r + 10);
116
-
117
- ctx.font = '13px Arial';
118
-
119
- ctx.textAlign = 'center';
120
-
121
- ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
122
-
123
- } else {
124
-
125
- ctx.lineTo(0, -this.r + 5);
126
-
127
- }
128
-
129
- });
130
-
131
- }
132
-
133
- }
134
-
135
-
136
-
137
- drawHands() {
138
-
139
- // hour
140
-
141
- this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
142
-
143
- ctx.lineWidth = 6;
144
-
145
- ctx.moveTo(0, 10);
146
-
147
- ctx.lineTo(0, -this.r + 50);
148
-
149
- });
150
-
151
-
152
-
153
- // minute
154
-
155
- this.drawer.draw(this.m * 6, ctx => {
156
-
157
- ctx.lineWidth = 4;
158
-
159
- ctx.moveTo(0, 10);
160
-
161
- ctx.lineTo(0, -this.r + 30);
162
-
163
- });
164
-
165
-
166
-
167
- // second
168
-
169
- this.drawer.draw(this.s * 6, ctx => {
170
-
171
- ctx.strokeStyle = 'red';
172
-
173
- ctx.moveTo(0, 20);
174
-
175
- ctx.lineTo(0, -this.r + 20);
176
-
177
- });
178
-
179
- }
180
-
181
-
182
-
183
- update() {
184
-
185
- this.h = (new Date()).getHours();
186
-
187
- this.m = (new Date()).getMinutes();
188
-
189
- this.s = (new Date()).getSeconds();
190
-
191
- }
192
-
193
-
194
-
195
- run() {
196
-
197
- this.update();
198
-
199
-
200
-
201
- this.drawer.clear();
202
-
203
- this.drawFace();
204
-
205
- this.drawHands();
206
-
207
-
208
-
209
- setTimeout(() => {
210
-
211
- this.run();
212
-
213
- }, 100);
214
-
215
- }
216
-
217
- }
218
-
219
-
220
-
221
- const canvas = document.querySelector('canvas');
222
-
223
- if (typeof canvas.getContext === 'undefined') {
224
-
225
- return;
226
-
227
- }
228
-
229
-
230
-
231
- const clock = new Clock(new ClockDrawer(canvas));
232
-
233
- clock.run();
234
-
235
- })();

1

javascriptのソースコードの追記

2020/03/09 10:41

投稿

super_beginner1
super_beginner1

スコア8

test CHANGED
File without changes
test CHANGED
@@ -25,3 +25,211 @@
25
25
 
26
26
 
27
27
  ![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
28
+
29
+
30
+
31
+
32
+
33
+ javascriptのソースコード
34
+
35
+ 'use strict';
36
+
37
+
38
+
39
+ (() => {
40
+
41
+ class ClockDrawer {
42
+
43
+ constructor(canvas) {
44
+
45
+ this.ctx = canvas.getContext('2d');
46
+
47
+ this.width = canvas.width;
48
+
49
+ this.height = canvas.height;
50
+
51
+ }
52
+
53
+
54
+
55
+ draw(angle, func) {
56
+
57
+ this.ctx.save();
58
+
59
+
60
+
61
+ this.ctx.translate(this.width / 2, this.height / 2);
62
+
63
+ this.ctx.rotate(Math.PI / 180 * angle);
64
+
65
+
66
+
67
+ this.ctx.beginPath();
68
+
69
+ func(this.ctx);
70
+
71
+ this.ctx.stroke();
72
+
73
+
74
+
75
+ this.ctx.restore();
76
+
77
+ }
78
+
79
+
80
+
81
+ clear() {
82
+
83
+ this.ctx.clearRect(0, 0, this.width, this.height);
84
+
85
+ }
86
+
87
+ }
88
+
89
+
90
+
91
+ class Clock {
92
+
93
+ constructor(drawer) {
94
+
95
+ this.r = 100;
96
+
97
+ this.drawer = drawer;
98
+
99
+ }
100
+
101
+
102
+
103
+ drawFace() {
104
+
105
+ for (let angle = 0; angle < 360; angle += 6) {
106
+
107
+ this.drawer.draw(angle, ctx => {
108
+
109
+ ctx.moveTo(0, -this.r);
110
+
111
+ if (angle % 30 === 0) {
112
+
113
+ ctx.lineWidth = 2;
114
+
115
+ ctx.lineTo(0, -this.r + 10);
116
+
117
+ ctx.font = '13px Arial';
118
+
119
+ ctx.textAlign = 'center';
120
+
121
+ ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
122
+
123
+ } else {
124
+
125
+ ctx.lineTo(0, -this.r + 5);
126
+
127
+ }
128
+
129
+ });
130
+
131
+ }
132
+
133
+ }
134
+
135
+
136
+
137
+ drawHands() {
138
+
139
+ // hour
140
+
141
+ this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
142
+
143
+ ctx.lineWidth = 6;
144
+
145
+ ctx.moveTo(0, 10);
146
+
147
+ ctx.lineTo(0, -this.r + 50);
148
+
149
+ });
150
+
151
+
152
+
153
+ // minute
154
+
155
+ this.drawer.draw(this.m * 6, ctx => {
156
+
157
+ ctx.lineWidth = 4;
158
+
159
+ ctx.moveTo(0, 10);
160
+
161
+ ctx.lineTo(0, -this.r + 30);
162
+
163
+ });
164
+
165
+
166
+
167
+ // second
168
+
169
+ this.drawer.draw(this.s * 6, ctx => {
170
+
171
+ ctx.strokeStyle = 'red';
172
+
173
+ ctx.moveTo(0, 20);
174
+
175
+ ctx.lineTo(0, -this.r + 20);
176
+
177
+ });
178
+
179
+ }
180
+
181
+
182
+
183
+ update() {
184
+
185
+ this.h = (new Date()).getHours();
186
+
187
+ this.m = (new Date()).getMinutes();
188
+
189
+ this.s = (new Date()).getSeconds();
190
+
191
+ }
192
+
193
+
194
+
195
+ run() {
196
+
197
+ this.update();
198
+
199
+
200
+
201
+ this.drawer.clear();
202
+
203
+ this.drawFace();
204
+
205
+ this.drawHands();
206
+
207
+
208
+
209
+ setTimeout(() => {
210
+
211
+ this.run();
212
+
213
+ }, 100);
214
+
215
+ }
216
+
217
+ }
218
+
219
+
220
+
221
+ const canvas = document.querySelector('canvas');
222
+
223
+ if (typeof canvas.getContext === 'undefined') {
224
+
225
+ return;
226
+
227
+ }
228
+
229
+
230
+
231
+ const clock = new Clock(new ClockDrawer(canvas));
232
+
233
+ clock.run();
234
+
235
+ })();