編集履歴

回答編集履歴

テキスト修正

2019/01/12 10:06

投稿

スコア9058

test CHANGED Viewed

@@ -154,13 +154,13 @@
             for (var num in myDash[foo]){
-              // (3):  objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
+              // 修正(3):  objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
               objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
             }}
-          // (2): document.getElementById("calendar") += objobj;
+          // 修正(2): document.getElementById("calendar") += objobj;
           document.getElementById("calendar").innerHTML = objobj;
@@ -168,7 +168,7 @@
         };
-        httpObj.send();  // (1): 追加
+        httpObj.send();  // 追加(1)
       }

テキスト修正

2019/01/12 10:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -154,13 +154,13 @@
             for (var num in myDash[foo]){
-              // objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
+              // (3):  objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
               objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
             }}
-          // document.getElementById("calendar") += objobj;
+          // (2): document.getElementById("calendar") += objobj;
           document.getElementById("calendar").innerHTML = objobj;
@@ -168,7 +168,7 @@
         };
-        httpObj.send();  // 追加
+        httpObj.send();  // (1): 追加
       }

テキスト修正

2019/01/12 10:04

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -110,11 +110,11 @@
-上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
-なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。
+上記3点を修正したJSを含むHTMLを作成したので、参考のため以下に挙げておきます。
+なお以下のHTMLでは、実際にJSONをXMLHttpRequestで取得して動作確認できるようにするため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにして、これを使うようにしていますが、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。

テキスト修正

2019/01/12 09:59

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -6,7 +6,7 @@
-### （１） httpObj.send() の追加
+### (1) httpObj.send() の追加

テキスト修正

2019/01/12 09:52

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -114,7 +114,7 @@
-なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。
+なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったサーバーサイドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。

テキスト修正

2019/01/12 09:48

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -114,7 +114,7 @@
-なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
+なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように、URLを戻して頂ければと思います。

テキスト修正

2019/01/12 09:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -114,7 +114,7 @@
-なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
+なお動作確認のため、ご質問にあるJSONを[mockable.io](https://www.mockable.io/)からGETできるようにしておき、以下のHTMLではこれを使うようにしていますので、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。

テキスト修正

2019/01/12 09:40

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -114,7 +114,7 @@
-なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（コメントアウトしています。）にリクエストを送るように戻して頂ければと思います。
+なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（以下ではコメントアウトしています。）にリクエストを送るように戻して頂ければと思います。

テキスト修正

2019/01/12 09:09

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -110,7 +110,11 @@
+上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。
-上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、私の手元ではこれを使うようにしましたが、ShotaYamamotoさんのほうでは、Pythonで作ったバックエンドのエンドポイント（コメントアウトしています。）に戻して頂ければと思います。
+なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、以下のHTMLではこれを使うようにしましたが、ShotaYamamotoさんのほうではPythonで作ったバックエンドのエンドポイント（コメントアウトしています。）にリクエストを送るように戻して頂ければと思います。

テキスト修正

2019/01/12 08:30

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -210,4 +210,4 @@
 以上、参考になれば幸いです。
-（※ 修正後のHTMLで使っている、 [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）
+（※ 修正後のHTMLで使っている、mockableに載せたJSONは、この質問が解決済みになりしだい消します）

テキスト修正

2019/01/12 08:21

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -110,7 +110,7 @@
-上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておき、これを使うようにしました。）
+上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。なお動作確認のため、JSONはmockable.ioからGETできるようにしておき、私の手元ではこれを使うようにしましたが、ShotaYamamotoさんのほうでは、Pythonで作ったバックエンドのエンドポイント（コメントアウトしています。）に戻して頂ければと思います。

テキスト修正

2019/01/12 08:14

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -192,7 +192,7 @@
-私のほうの手元で、`calendar.js` と `Main_2.css` を空（＝大きさゼロ）のファイルとして用意したうえで上記のHTMLを表示させると以下のようになりました。
+私のほうの手元で、上記のHTMLを表示させると以下のようになりました。（`calendar.js` と `Main_2.css` は、空（＝大きさゼロ）のファイルとして用意しました。）

テキスト修正

2019/01/12 08:03

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -210,4 +210,4 @@
 以上、参考になれば幸いです。
-（※ [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）
+（※ 修正後のHTMLで使っている、 [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）

テキスト修正

2019/01/12 07:53

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -192,7 +192,7 @@
-私のほうの手元で、`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のHTMLを表示させると以下のようになりました。
+私のほうの手元で、`calendar.js` と `Main_2.css` を空（＝大きさゼロ）のファイルとして用意したうえで上記のHTMLを表示させると以下のようになりました。

テキスト修正

2019/01/12 07:48

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -180,7 +180,7 @@
 <body>
-<div id="calendar"></div>
+    <div id="calendar"></div>
 </body>

テキスト修正

2019/01/12 07:45

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -106,7 +106,7 @@
-### 補足
+### 修正後のHTML

テキスト修正

2019/01/12 07:38

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,9 +200,9 @@
-上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
+上記の画面キャプチャによって、とりあえずご質問の主旨である 「**外部JSONファイルを動的にHTMLへ追加したい**」という課題はクリアできていることを確認できると思います。
 ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。

テキスト修正

2019/01/12 07:29

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -10,7 +10,7 @@
-以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send(null);`を追加します。
+以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send();`を追加します。
@@ -50,7 +50,7 @@
   };
-  httpObj.send(null);  // 追加
+  httpObj.send();  // 追加
 }
@@ -164,7 +164,7 @@
         };
-        httpObj.send(null);  // 追加
+        httpObj.send();  // 追加
       }

テキスト修正

2019/01/12 07:15

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -172,11 +172,7 @@
     <script>
-        document.addEventListener('DOMContentLoaded', function(){
+      document.addEventListener('DOMContentLoaded', cal);
-            cal();
-        });
     </script>

テキスト修正

2019/01/12 07:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -50,7 +50,7 @@
   };
-  httpObj.send(null);
+  httpObj.send(null);  // 追加
 }

テキスト修正

2019/01/12 07:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -102,7 +102,7 @@
-修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの修正として、簡単に `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻します。
+修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの簡単な修正で `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻しておきます。

テキスト修正

2019/01/12 06:57

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -102,6 +102,10 @@
+修正前のままだと、`[object Object]`と表示されてしまいます。とり急ぎの修正として、簡単に `myDash[foo]` の内容を表示させるために、`JSON.stringify`でJSON文字列に戻します。
 ### 補足

テキスト修正

2019/01/12 06:55

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -146,6 +146,8 @@
             for (var num in myDash[foo]){
+              // objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + myDash[foo] + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
               objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
             }}
@@ -158,7 +160,7 @@
         };
-        httpObj.send(null);
+        httpObj.send(null);  // 追加
       }

テキスト修正

2019/01/12 06:46

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -106,7 +106,7 @@
-上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておきました。）
+上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておき、これを使うようにしました。）
@@ -132,6 +132,8 @@
         var httpObj = new XMLHttpRequest();
+        // httpObj.open("get", "http://0.0.0.0:8000/cgi-bin/json/dash_dash.json", true);
         httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
         httpObj.onload = function (){

テキスト修正

2019/01/12 06:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -10,6 +10,10 @@
+以下のように、`httpObj.onload` に関数を代入した後に、`httpObj.send(null);`を追加します。
 **修正前：**
 ```javascript

テキスト修正

2019/01/12 06:39

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -140,9 +140,7 @@
             for (var num in myDash[foo]){
-              objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>'
-              ;
+              objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>';
             }}

テキスト修正

2019/01/12 06:26

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -8,6 +8,8 @@
 ### （１） httpObj.send() の追加
 **修正前：**
 ```javascript
@@ -52,6 +54,10 @@
+- **参考：** [MDN - XMLHttpRequest の利用](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
 ### (2) objobjをDOMに反映させている行の修正
 **修正前：**

テキスト修正

2019/01/12 06:24

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -198,4 +198,4 @@
 以上、参考になれば幸いです。
-（※mockableに載せたJSONは、この質問が解決済みになりしだい消します）
+（※ [mockableに載せたJSON](http://demo7981651.mockable.io/q168398.json)は、この質問が解決済みになりしだい消します）

テキスト修正

2019/01/12 06:17

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -18,6 +18,8 @@
   httpObj.onload = function (){
+    // ・・・中略・・・
     return;
   }
@@ -36,9 +38,11 @@
   httpObj.onload = function (){
+    // ・・・中略・・・
     return;
-  }
+  };
   httpObj.send(null);
@@ -142,7 +146,7 @@
           return;
-        }
+        };
         httpObj.send(null);

テキスト修正

2019/01/12 06:15

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -176,7 +176,7 @@
-`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになりました。
+私のほうの手元で、`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のHTMLを表示させると以下のようになりました。
@@ -188,10 +188,10 @@
-次に`calendar.js` と `Main_2.css` を空ではない実際のものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
+ShotaYamamotoさんのお手元では、`calendar.js` と `Main_2.css` は何らか空ではないファイルだと思いますが、これらが反映されたときの表示が要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
 以上、参考になれば幸いです。
-（※mockableに載せたＪＳＯＮは、この質問が解決済みになりしだい消します）
+（※mockableに載せたJSONは、この質問が解決済みになりしだい消します）

テキスト修正

2019/01/12 06:10

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -176,7 +176,7 @@
-`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになり、とりあえず、ご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
+`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになりました。
@@ -184,7 +184,11 @@
+上記の画面キャプチャによって、とりあえずご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
-次に`calendar.js` と `Main_2.css` を空ではない何らかのものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
+次に`calendar.js` と `Main_2.css` を空ではない実際のものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。

テキスト修正

2019/01/12 06:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -176,7 +176,7 @@
-`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになります。
+`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになり、とりあえず、ご質問の主旨である 「外部JSONファイルを動的にHTMLへ追加したい」という課題はクリアできているものと思います。
@@ -184,4 +184,10 @@
+次に`calendar.js` と `Main_2.css` を空ではない何らかのものに差し替えて要求を満たすものになっているかどうかを確認し、完成に近づけていけばよいかと思います。
 以上、参考になれば幸いです。
+（※mockableに載せたＪＳＯＮは、この質問が解決済みになりしだい消します）

テキスト修正

2019/01/12 06:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-以下の２点を追加、修正するといかがでしょうか？
+以下の3点を追加、修正するといかがでしょうか？(3点目は暫定の修正です）
@@ -68,4 +68,120 @@
+### (3)  myDash[foo] を JSONに戻してから<span>で表示させる。
+**修正前：**
+```javascript
++ myDash[foo] +
+```
+**修正後：**
+```javascript
++ JSON.stringify(myDash[foo]) +
+```
+### 補足
+上記3点を修正したJSを含むＨＴＭＬを作成したので、参考のため以下に載せておきます。（動作確認のため、JSONはmockable.ioからGETできるようにしておきました。）
+```HTML
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="utf-8"/>
+    <link rel="stylesheet" type="text/css" href="../css/Main_2.css" />
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&amp;subset=japanese" rel="stylesheet">
+    <script src="../css/calendar.js"></script>
+    <script>
+      function cal(){
+        var httpObj = new XMLHttpRequest();
+        httpObj.open("get", "http://demo7981651.mockable.io/q168398.json", true);
+        httpObj.onload = function (){
+          var objobj = '';
+          var myDash = JSON.parse(this.responseText);
+          for (var foo in myDash){
+            for (var num in myDash[foo]){
+              objobj += '<span class="event_foo"  style="color:' + myDash[foo][num]["color"] + ';">' + JSON.stringify(myDash[foo]) + '</span><span class="event_time">' + myDash[foo][num]["begin_time"] + '</span><span class="event_name">' + myDash[foo][num]["event"] + '</span>'
+              ;
+            }}
+          // document.getElementById("calendar") += objobj;
+          document.getElementById("calendar").innerHTML = objobj;
+          return;
+        }
+        httpObj.send(null);
+      }
+    </script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function(){
+            cal();
+        });
+    </script>
+</head>
+<body>
+<div id="calendar"></div>
+</body>
+</html>
+```
+`calendar.js` と `Main_2.css` は空（＝大きさゼロ）のファイルとして用意しておき、上記のＨＴＭＬを表示させると以下のようになります。
+![イメージ説明](289c1e1eb35789003497a8a8a65157d6.png)
 以上、参考になれば幸いです。