質問編集履歴

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

2020/03/10 04:25

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,106 +1,3 @@
-```ここに言語を入力
-javascriptのソースコード
-'use strict';
-(() => {
-class ClockDrawer {
-constructor(canvas) {
-this.ctx = canvas.getContext('2d');
-this.width = canvas.width;
-this.height = canvas.height;
-}
-draw(angle, func) {
-this.ctx.save();
-this.ctx.translate(this.width / 2, this.height / 2);
-this.ctx.rotate(Math.PI / 180 * angle);
-this.ctx.beginPath();
-func(this.ctx);
-this.ctx.stroke();
-this.ctx.restore();
-}
-clear() {
-this.ctx.clearRect(0, 0, this.width, this.height);
-}
-}
-class Clock {
-constructor(drawer) {
-this.r = 100;
-this.drawer = drawer;
-}
-drawFace() {
-for (let angle = 0; angle < 360; angle += 6) {
-this.drawer.draw(angle, ctx => {
-ctx.moveTo(0, -this.r);
-if (angle % 30 === 0) {
-ctx.lineWidth = 2;
-ctx.lineTo(0, -this.r + 10);
-ctx.font = '13px Arial';
-ctx.textAlign = 'center';
-ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
-} else {
-ctx.lineTo(0, -this.r + 5);
-}
-});
-}
-}
-drawHands() {
-// hour
-this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
-ctx.lineWidth = 6;
-ctx.moveTo(0, 10);
-ctx.lineTo(0, -this.r + 50);
-});
-// minute
-this.drawer.draw(this.m * 6, ctx => {
-ctx.lineWidth = 4;
-ctx.moveTo(0, 10);
-ctx.lineTo(0, -this.r + 30);
-});
-// second
-this.drawer.draw(this.s * 6, ctx => {
-ctx.strokeStyle = 'red';
-ctx.moveTo(0, 20);
-ctx.lineTo(0, -this.r + 20);
-});
-}
-update() {
-this.h = (new Date()).getHours();
-this.m = (new Date()).getMinutes();
-this.s = (new Date()).getSeconds();
-}
-run() {
-this.update();
-this.drawer.clear();
-this.drawFace();
-this.drawHands();
-setTimeout(() => {
-this.run();
-}, 100);
-}
-}
-const canvas = document.querySelector('canvas');
-if (typeof canvas.getContext === 'undefined') {
-return;
-}
-const clock = new Clock(new ClockDrawer(canvas));
-clock.run();
-})();
 ```超超初心者です。難しいプログラミング用語は分かりません…。
 wordpressでブログを作成しています。（テーマはcocoon）
 サイドバーのカスタムＨＴＭＬにHTMLとjavascriptを記述して、アナログ時計(ソースコードはドットインストールの完全コピペです）を表示させようとしましたが、領域だけ真っ白に表示されただけで肝心の時計が表示されません。

ご追記の削除

2020/03/10 04:25

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -114,6 +114,4 @@
 ![イメージ説明](013e88bc237e6b21edab4e35abdc1543.png)
-![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
-[サイトURL](https://japan-thinks.com)

サイトのURLの追記

2020/03/09 13:02

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -114,4 +114,6 @@
 ![イメージ説明](013e88bc237e6b21edab4e35abdc1543.png)
-![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+[サイトURL](https://japan-thinks.com)

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

2020/03/09 10:48

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,3 +1,4 @@
+```ここに言語を入力
 javascriptのソースコード
 'use strict';
@@ -100,9 +101,6 @@
 const clock = new Clock(new ClockDrawer(canvas));
 clock.run();
 })();
-```ここに言語を入力
-コード
 ```超超初心者です。難しいプログラミング用語は分かりません…。
 wordpressでブログを作成しています。（テーマはcocoon）
 サイドバーのカスタムＨＴＭＬにHTMLとjavascriptを記述して、アナログ時計(ソースコードはドットインストールの完全コピペです）を表示させようとしましたが、領域だけ真っ白に表示されただけで肝心の時計が表示されません。

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

2020/03/09 10:42

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,118 +1,119 @@
+javascriptのソースコード
-超超初心者です。難しいプログラミング用語は分かりません…。
+'use strict';
-wordpressでブログを作成しています。（テーマはcocoon）
-サイドバーのカスタムＨＴＭＬにHTMLとjavascriptを記述して、アナログ時計(ソースコードはドットインストールの完全コピペです）を表示させようとしましたが、領域だけ真っ白に表示されただけで肝心の時計が表示されません。
-そもそも、カスタムＨＴＭＬにjavascriptを記述することはシステム上不可能なのでしょうか？
+(() => {
+class ClockDrawer {
+constructor(canvas) {
-※カスタムＨＴＭＬのウィジェットでは、html記述内にscriptタグで囲ってjavascriptを記述しています。
+this.ctx = canvas.getContext('2d');
+this.width = canvas.width;
+this.height = canvas.height;
+}
-※もし、javascriptを反映させることができる場合には、wordpressのウィジェット内に外部ファイルで作成したjavascriptを読み込む方法が有れば併せてご教示お願い申し上げます。
+draw(angle, func) {
+this.ctx.save();
+this.ctx.translate(this.width / 2, this.height / 2);
-![イメージ説明](c5a1bfc558737dcdda7edbf71a65b72f.png)
+this.ctx.rotate(Math.PI / 180 * angle);
-![イメージ説明](013e88bc237e6b21edab4e35abdc1543.png)
+this.ctx.beginPath();
+func(this.ctx);
+this.ctx.stroke();
-![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+this.ctx.restore();
+}
+clear() {
+this.ctx.clearRect(0, 0, this.width, this.height);
+}
+}
-javascriptのソースコード
+class Clock {
-'use strict';
+constructor(drawer) {
+this.r = 100;
+this.drawer = drawer;
+}
-(() => {
+drawFace() {
+for (let angle = 0; angle < 360; angle += 6) {
+this.drawer.draw(angle, ctx => {
+ctx.moveTo(0, -this.r);
-  class ClockDrawer {
+if (angle % 30 === 0) {
-    constructor(canvas) {
+ctx.lineWidth = 2;
+ctx.lineTo(0, -this.r + 10);
+ctx.font = '13px Arial';
-      this.ctx = canvas.getContext('2d');
+ctx.textAlign = 'center';
-      this.width = canvas.width;
+ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
+} else {
-      this.height = canvas.height;
+ctx.lineTo(0, -this.r + 5);
-    }
+}
+});
+}
+}
-    draw(angle, func) {
+drawHands() {
+// hour
+this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
+ctx.lineWidth = 6;
-      this.ctx.save();
+ctx.moveTo(0, 10);
+ctx.lineTo(0, -this.r + 50);
+});
-      this.ctx.translate(this.width / 2, this.height / 2);
+// minute
-      this.ctx.rotate(Math.PI / 180 * angle);
+this.drawer.draw(this.m * 6, ctx => {
+ctx.lineWidth = 4;
+ctx.moveTo(0, 10);
+ctx.lineTo(0, -this.r + 30);
+});
+// second
+this.drawer.draw(this.s * 6, ctx => {
+ctx.strokeStyle = 'red';
-      this.ctx.beginPath();
+ctx.moveTo(0, 20);
-      func(this.ctx);
+ctx.lineTo(0, -this.r + 20);
-      this.ctx.stroke();
+});
+}
+update() {
-      this.ctx.restore();
+this.h = (new Date()).getHours();
+this.m = (new Date()).getMinutes();
+this.s = (new Date()).getSeconds();
-    }
+}
-    clear() {
+run() {
-      this.ctx.clearRect(0, 0, this.width, this.height);
+this.update();
-    }
-  }
-  class Clock {
-    constructor(drawer) {
-      this.r = 100;
-      this.drawer = drawer;
+this.drawer.clear();
-    }
+this.drawFace();
+this.drawHands();
-    drawFace() {
-      for (let angle = 0; angle < 360; angle += 6) {
-        this.drawer.draw(angle, ctx => {
+setTimeout(() => {
-          ctx.moveTo(0, -this.r);
-          if (angle % 30 === 0) {
-            ctx.lineWidth = 2;
-            ctx.lineTo(0, -this.r + 10);
+this.run();
-            ctx.font = '13px Arial';
-            ctx.textAlign = 'center';
-            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
-          } else {
+}, 100);
-            ctx.lineTo(0, -this.r + 5);
-          }
+}
-        });
-      }
+}
-    }
-    drawHands() {
-      // hour
-      this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
-        ctx.lineWidth = 6;
-        ctx.moveTo(0, 10);
-        ctx.lineTo(0, -this.r + 50);
-      });
-      // minute
+const canvas = document.querySelector('canvas');
-      this.drawer.draw(this.m * 6, ctx => {
+if (typeof canvas.getContext === 'undefined') {
-        ctx.lineWidth = 4;
+return;
-        ctx.moveTo(0, 10);
-        ctx.lineTo(0, -this.r + 30);
-      });
+}
-      // second
-      this.drawer.draw(this.s * 6, ctx => {
-        ctx.strokeStyle = 'red';
+const clock = new Clock(new ClockDrawer(canvas));
-        ctx.moveTo(0, 20);
+clock.run();
-        ctx.lineTo(0, -this.r + 20);
-      });
+})();
-    }
-    update() {
+```ここに言語を入力
+コード
-      this.h = (new Date()).getHours();
+```超超初心者です。難しいプログラミング用語は分かりません…。
-      this.m = (new Date()).getMinutes();
-      this.s = (new Date()).getSeconds();
+wordpressでブログを作成しています。（テーマはcocoon）
+サイドバーのカスタムＨＴＭＬにHTMLとjavascriptを記述して、アナログ時計(ソースコードはドットインストールの完全コピペです）を表示させようとしましたが、領域だけ真っ白に表示されただけで肝心の時計が表示されません。
-    }
+そもそも、カスタムＨＴＭＬにjavascriptを記述することはシステム上不可能なのでしょうか？
-    run() {
-      this.update();
+※カスタムＨＴＭＬのウィジェットでは、html記述内にscriptタグで囲ってjavascriptを記述しています。
-      this.drawer.clear();
+※もし、javascriptを反映させることができる場合には、wordpressのウィジェット内に外部ファイルで作成したjavascriptを読み込む方法が有れば併せてご教示お願い申し上げます。
-      this.drawFace();
-      this.drawHands();
-      setTimeout(() => {
-        this.run();
-      }, 100);
-    }
-  }
-  const canvas = document.querySelector('canvas');
-  if (typeof canvas.getContext === 'undefined') {
+![イメージ説明](c5a1bfc558737dcdda7edbf71a65b72f.png)
-    return;
-  }
-  const clock = new Clock(new ClockDrawer(canvas));
+![イメージ説明](013e88bc237e6b21edab4e35abdc1543.png)
-  clock.run();
+![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
-})();

javascriptのソースコードの追記

2020/03/09 10:41

投稿

super_beginner1

スコア8

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -11,4 +11,108 @@
 ![イメージ説明](013e88bc237e6b21edab4e35abdc1543.png)
-![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+![イメージ説明](9c0c00df925504d9e8cddb69c456f9d2.png)
+javascriptのソースコード
+'use strict';
+(() => {
+  class ClockDrawer {
+    constructor(canvas) {
+      this.ctx = canvas.getContext('2d');
+      this.width = canvas.width;
+      this.height = canvas.height;
+    }
+    draw(angle, func) {
+      this.ctx.save();
+      this.ctx.translate(this.width / 2, this.height / 2);
+      this.ctx.rotate(Math.PI / 180 * angle);
+      this.ctx.beginPath();
+      func(this.ctx);
+      this.ctx.stroke();
+      this.ctx.restore();
+    }
+    clear() {
+      this.ctx.clearRect(0, 0, this.width, this.height);
+    }
+  }
+  class Clock {
+    constructor(drawer) {
+      this.r = 100;
+      this.drawer = drawer;
+    }
+    drawFace() {
+      for (let angle = 0; angle < 360; angle += 6) {
+        this.drawer.draw(angle, ctx => {
+          ctx.moveTo(0, -this.r);
+          if (angle % 30 === 0) {
+            ctx.lineWidth = 2;
+            ctx.lineTo(0, -this.r + 10);
+            ctx.font = '13px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
+          } else {
+            ctx.lineTo(0, -this.r + 5);
+          }
+        });
+      }
+    }
+    drawHands() {
+      // hour
+      this.drawer.draw(this.h * 30 + this.m * 0.5, ctx => {
+        ctx.lineWidth = 6;
+        ctx.moveTo(0, 10);
+        ctx.lineTo(0, -this.r + 50);
+      });
+      // minute
+      this.drawer.draw(this.m * 6, ctx => {
+        ctx.lineWidth = 4;
+        ctx.moveTo(0, 10);
+        ctx.lineTo(0, -this.r + 30);
+      });
+      // second
+      this.drawer.draw(this.s * 6, ctx => {
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(0, 20);
+        ctx.lineTo(0, -this.r + 20);
+      });
+    }
+    update() {
+      this.h = (new Date()).getHours();
+      this.m = (new Date()).getMinutes();
+      this.s = (new Date()).getSeconds();
+    }
+    run() {
+      this.update();
+      this.drawer.clear();
+      this.drawFace();
+      this.drawHands();
+      setTimeout(() => {
+        this.run();
+      }, 100);
+    }
+  }
+  const canvas = document.querySelector('canvas');
+  if (typeof canvas.getContext === 'undefined') {
+    return;
+  }
+  const clock = new Clock(new ClockDrawer(canvas));
+  clock.run();
+})();