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

回答編集履歴

2

追記2

2020/11/29 23:43

投稿

gpsoft
gpsoft

スコア1323

answer CHANGED
@@ -83,4 +83,24 @@
83
83
  var time = (time = month + "/" + day + " " + hours + ":" + minutes);
84
84
 
85
85
  const h = '<p>'+v.uname+'<br>'+v.text+'<br>'+time+'</p>';
86
- ```
86
+ ```
87
+
88
+
89
+ # 追記2
90
+
91
+ ### 改良点3
92
+
93
+ このアプリを作るときに、Firebaseにログインして、データベースの新規作成などを実行したと思います。そのとき、データベースのフィールドとして、
94
+
95
+ - `uname`という名前の、テキスト文字列型のフィールド
96
+ - `text`という名前の、テキスト文字列型のフィールド
97
+
98
+ を登録した記憶はありませんか?
99
+
100
+ もしあるなら、そこに
101
+
102
+ - `timestamp`という名前の、整数型のフィールド
103
+
104
+ を追加してみてください。
105
+
106
+ ※私自身はFirebaseを使ったことがないので、ゴールまで少々遠回りしてると思いますが、ご容赦ください。

1

より丁寧に解説

2020/11/29 23:43

投稿

gpsoft
gpsoft

スコア1323

answer CHANGED
@@ -4,4 +4,83 @@
4
4
 
5
5
  あてずっぽうですが、メッセージが送信された日時は、`v`に入ってるんじゃないですか? `v.timestamp`とか? `v`には、たぶん、データベースから読んだレコードの内容が入ってるんじゃないでしょうか。
6
6
 
7
- もしそうなら、それを使って`h`を組み立てれば良いと思います。
7
+ もしそうなら、それを使って`h`を組み立てれば良いと思います。
8
+
9
+ # 追記
10
+
11
+ このチャットアプリの流れを、想像も踏まえて書いてみます。
12
+
13
+ ※なお、ここでは「フィールド」をFirebase上でのデータの項目名のような意味で使っています。画面の入力欄という意味ではないです。
14
+
15
+ ### 投稿処理
16
+
17
+ (1)
18
+ ブラウザ画面に、名前とメッセージの入力欄が表示される。
19
+
20
+ (2)
21
+ ユーザが、名前とメッセージを入力して、「投稿する」ボタンを押す。
22
+
23
+ (3)
24
+ Javascriptで、入力欄の内容を読み取り、それをサーバ(Firebase)へ送信する。
25
+
26
+ このとき、名前は`uname`フィールド、メッセージは`text`フィールドとして
27
+ Firebaseへ送信している。
28
+
29
+ ### 投稿一覧表示処理
30
+
31
+ (4)
32
+ 新しい投稿が登録されたり、画面を再描画したとき、
33
+ Firebaseから`child_added`イベントが届く。
34
+
35
+ 1つの投稿につき、1つのイベントが届く。
36
+
37
+ (5)
38
+ イベントデータ`data`から、Firebaseに登録された投稿データの、
39
+ 各フィールド(`uname`や`text`)の値を取り出すことができるので、
40
+ それをHTMLタグに加工して画面に出力する。
41
+
42
+ ### 改良点1
43
+
44
+ (3)のところで、`uname`と`text`に加えて、
45
+ 「投稿日時」を表すフィールド`timestamp`も
46
+ Firebaseへ送信するようにしましょう。
47
+
48
+ この「投稿日時」は、ユーザに入力してもらう情報ではありません。
49
+ Javascriptで`new Date()`すれば、得られます。
50
+
51
+ ただし、Javascriptの`Date`オブジェクトをFirebaseに登録することは、できないかもしれませんので、数値に変換して送信しましょう。
52
+
53
+ ```javascript
54
+ var now = new Date().getTime(); // 現在日時を数値に変換
55
+
56
+ // Firebaseへ送信
57
+ ref.push({
58
+ uname: ...
59
+ text: ...
60
+ timestamp: now // ←ここ
61
+ }, .....
62
+ ```
63
+
64
+ ### 改良点2
65
+
66
+ (5)のところでは、`uname`と`text`に加えて、
67
+ `timestamp`フィールドの値も取り出し、画面に出力しましょう。
68
+
69
+ これは、おそらく、
70
+ 質問文の「//受信する際のコード」に書いてあるコードに、1行追加するだけでOKです。
71
+
72
+ ```javascript
73
+ ref.on("child_added",function(data){
74
+ const v = data.val();
75
+ const k = data.key;
76
+
77
+ var date = new Date();
78
+ date.setTime(v.timestamp); // ←ここ
79
+ var month = date.getMonth() + 1;
80
+ var day = date.getDate();
81
+ var hours = date.getHours();
82
+ var minutes = date.getMinutes();
83
+ var time = (time = month + "/" + day + " " + hours + ":" + minutes);
84
+
85
+ const h = '<p>'+v.uname+'<br>'+v.text+'<br>'+time+'</p>';
86
+ ```