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

質問編集履歴

6

実現したい具体的な説明

2020/11/30 11:50

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
File without changes

5

現在のコード実行時の画像の添付と具体的に改善したい点

2020/11/30 11:50

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
@@ -8,73 +8,11 @@
8
8
  Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。
9
9
 
10
10
  ### 該当のソースコード
11
- html
12
- <div>
13
- <div class="header"><p>CHAT</p></div>
14
- </div>
15
- <div class="chat-area">
16
- <div class="kakomi-maru">
17
- <div>名前: <input type="text" id="uname">
18
- </div>
19
- <div>
20
- <textarea id="text" cols="80%" rows="5"></textarea>
21
- <button id="send">投稿する</button>
22
- </div>
23
- <div class id="chat-hukidashi">
24
- <div id="output">
25
- </div>
26
- </div>
27
- </div>
28
- </div>
29
- </div>
30
11
 
12
+
31
13
  javascript
32
- <script>
33
- // Your web app's Firebase configuration
34
- var firebaseConfig = {
35
- apiKey: "AIzaSyA5FeZ5n53RhH029rB4oG7lXpGDkFKzuYg",
36
- authDomain: "gsdemo-22f2a.firebaseapp.com",
37
- databaseURL: "https://gsdemo-22f2a.firebaseio.com",
38
- projectId: "gsdemo-22f2a",
39
- storageBucket: "gsdemo-22f2a.appspot.com",
40
- messagingSenderId: "830068457806",
41
- appId: "1:830068457806:web:7860391950f4b1bec7de1f"
42
- };
43
- // Initialize Firebase
44
- firebase.initializeApp(firebaseConfig);
45
14
 
46
- const ref = firebase.database().ref();
47
15
 
48
-
49
- //送信
50
- $("#send").on("click", function(){
51
- const uname = $("#uname").val();
52
- const text = $("#text").val();
53
- var now = new Date().getTime();
54
-
55
- const msg = {
56
- uname: uname,
57
- text: text,
58
- timestamp: now
59
- };
60
- ref.push(msg);
61
- });
62
-
63
- $("#text").on("keydown", function(e){
64
- if(e.keyCode==13){
65
- const uname = $("#uname").val();
66
- const text = $("#text").val();
67
- var now = new Date().getTime();
68
-
69
- const msg = {
70
- uname: uname,
71
- text: text,
72
- timestamp: now
73
- };
74
- ref.push(msg);
75
- }
76
- });
77
-
78
16
  //受信
79
17
  ref.on("child_added",function(data){
80
18
  const v = data.val();

4

実現したい具体的な説明

2020/11/30 05:04

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
@@ -8,26 +8,95 @@
8
8
  Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。
9
9
 
10
10
  ### 該当のソースコード
11
+ html
12
+ <div>
13
+ <div class="header"><p>CHAT</p></div>
14
+ </div>
15
+ <div class="chat-area">
16
+ <div class="kakomi-maru">
17
+ <div>名前: <input type="text" id="uname">
18
+ </div>
19
+ <div>
20
+ <textarea id="text" cols="80%" rows="5"></textarea>
21
+ <button id="send">投稿する</button>
22
+ </div>
23
+ <div class id="chat-hukidashi">
24
+ <div id="output">
25
+ </div>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
30
+
11
31
  javascript
32
+ <script>
33
+ // Your web app's Firebase configuration
34
+ var firebaseConfig = {
35
+ apiKey: "AIzaSyA5FeZ5n53RhH029rB4oG7lXpGDkFKzuYg",
36
+ authDomain: "gsdemo-22f2a.firebaseapp.com",
37
+ databaseURL: "https://gsdemo-22f2a.firebaseio.com",
38
+ projectId: "gsdemo-22f2a",
39
+ storageBucket: "gsdemo-22f2a.appspot.com",
40
+ messagingSenderId: "830068457806",
41
+ appId: "1:830068457806:web:7860391950f4b1bec7de1f"
42
+ };
43
+ // Initialize Firebase
44
+ firebase.initializeApp(firebaseConfig);
12
45
 
46
+ const ref = firebase.database().ref();
47
+
48
+
49
+ //送信
50
+ $("#send").on("click", function(){
51
+ const uname = $("#uname").val();
52
+ const text = $("#text").val();
53
+ var now = new Date().getTime();
54
+
55
+ const msg = {
56
+ uname: uname,
57
+ text: text,
58
+ timestamp: now
59
+ };
60
+ ref.push(msg);
61
+ });
62
+
63
+ $("#text").on("keydown", function(e){
64
+ if(e.keyCode==13){
65
+ const uname = $("#uname").val();
66
+ const text = $("#text").val();
67
+ var now = new Date().getTime();
68
+
69
+ const msg = {
70
+ uname: uname,
71
+ text: text,
72
+ timestamp: now
73
+ };
74
+ ref.push(msg);
75
+ }
76
+ });
77
+
13
- //受信する際のコード
78
+ //受信
14
79
  ref.on("child_added",function(data){
15
80
  const v = data.val();
16
- const k = data.key;
81
+ const k = data.key;
17
82
 
18
83
  var date = new Date();
84
+ date.setTime(v.timestamp);
19
85
  var month = date.getMonth() + 1;
20
86
  var day = date.getDate();
21
87
  var hours = date.getHours();
22
88
  var minutes = date.getMinutes();
23
- var time = (time = month + "/" + day + " " + hours + ":" + minutes);
89
+ var time = (time = month + "/" + day + " " + hours + ":" + minutes);
24
-
90
+
25
- const h = '<p>'+v.uname+'<br>'+v.text+'<br>'+time+'</p>';
91
+ const h = '<p>'+"名前: "+v.uname+'<br>'+v.text+'<br>'+"投稿時刻:"+time+'</p>';
26
92
  $("#output").prepend(h);
27
93
  });
28
94
 
29
95
 
96
+ </script>
30
97
 
98
+
99
+
31
100
  ### 試したこと
32
101
 
33
102
  日時を設定するidを作成したりしましたが、エラーになり混乱しています。

3

現在のコード実行時の画像の添付と具体的に改善したい点

2020/11/30 03:49

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
- ![イメージ説明]
2
- ![![イメージ説明](5bb9b0677441845331dbf80c8a4526ab.jpeg)説明](d33831a5e6867f3ca38a2fccf327ae7f.jpeg)](56b2f90734721031216ebf97779bd2e4.jpeg)### 前提・実現したいこと
1
+ ![イメージ説明](5bb9b0677441845331dbf80c8a4526ab.jpeg)
2
+ ### 前提・実現したいこと
3
3
  javascript(html.css)でチャットアプリを作っています。
4
4
  メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
5
5
  (画像では青い枠と書いてありますが画像編集の過程でグレーになってしまいました。)

2

実現したい具体的な説明(画像)

2020/11/28 14:20

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,8 @@
1
+ ![イメージ説明]
1
- ![イメージ説明](125306baebc9075cd4fce58caafbf223.png)### 前提・実現したいこと
2
+ ![![イメージ説明](5bb9b0677441845331dbf80c8a4526ab.jpeg)説明](d33831a5e6867f3ca38a2fccf327ae7f.jpeg)](56b2f90734721031216ebf97779bd2e4.jpeg)### 前提・実現したいこと
2
3
  javascript(html.css)でチャットアプリを作っています。
3
4
  メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
4
-
5
+ (画像では青い枠と書いてありますが画像編集の過程でグレーになってしまいました。)
5
6
  ### 発生している問題・エラーメッセージ
6
7
 
7
8
  Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。

1

現在のコード実行時の画像の添付と具体的に改善したい点

2020/11/28 14:18

投稿

_nikoniko_
_nikoniko_

スコア1

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明](125306baebc9075cd4fce58caafbf223.png)### 前提・実現したいこと
2
2
  javascript(html.css)でチャットアプリを作っています。
3
3
  メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
4
4