質問編集履歴

6

追記5追加

2021/05/14 14:43

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -497,3 +497,41 @@
497
497
 
498
498
 
499
499
  ![画像](66cd31fb3478498a0a2ead018f4192d8.png)
500
+
501
+
502
+
503
+ #追記5
504
+
505
+
506
+
507
+ ```ここに言語を入力
508
+
509
+ {
510
+
511
+ path: "/chat/:id",
512
+
513
+ name: "Chat",
514
+
515
+ component: Chat,
516
+
517
+ meta: { requiresAuth: true },
518
+
519
+ },
520
+
521
+ ```
522
+
523
+
524
+
525
+ ```ここに言語を入力
526
+
527
+ deleteMessage(key) {
528
+
529
+ firebase
530
+
531
+ .database()
532
+
533
+ .ref("${this.$route.params.id}/key")
534
+
535
+ .remove();
536
+
537
+ ```

5

追記4訂正

2021/05/14 14:43

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -422,7 +422,7 @@
422
422
 
423
423
  ```ここに言語を入力
424
424
 
425
- <div @click.prevent="deleteMessage(key)" class="mymessage">
425
+ <div @click.right.prevent="deleteMessage(key)" class="mymessage">
426
426
 
427
427
  {{key}}
428
428
 

4

追記4追加

2021/05/14 12:18

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -413,3 +413,87 @@
413
413
 
414
414
 
415
415
  ```
416
+
417
+
418
+
419
+ #追記4
420
+
421
+
422
+
423
+ ```ここに言語を入力
424
+
425
+ <div @click.prevent="deleteMessage(key)" class="mymessage">
426
+
427
+ {{key}}
428
+
429
+ <nl2br tag="div" :text="message" />
430
+
431
+ </div>
432
+
433
+ ```
434
+
435
+
436
+
437
+ ```ここに言語を入力
438
+
439
+ deleteMessage(key) {
440
+
441
+ console.log(key);
442
+
443
+ firebase
444
+
445
+ .database()
446
+
447
+ .ref()
448
+
449
+ .remove();
450
+
451
+ this.$swal({
452
+
453
+ title: "内容確認",
454
+
455
+ text: "メッセージを削除しますか?",
456
+
457
+ icon: "warning",
458
+
459
+ buttons: true,
460
+
461
+ dangerMode: true,
462
+
463
+ }).then((willDelete) => {
464
+
465
+ if (willDelete) {
466
+
467
+ this.$swal("メッセージを削除しました", {
468
+
469
+ icon: "success",
470
+
471
+ });
472
+
473
+ this.$router.go({
474
+
475
+ path: `/chat/${this.$route.params.id}`,
476
+
477
+ force: true,
478
+
479
+ });
480
+
481
+ } else {
482
+
483
+ this.$swal("キャンセルしました。");
484
+
485
+ }
486
+
487
+ });
488
+
489
+ },
490
+
491
+ ```
492
+
493
+
494
+
495
+ ![画像](0160aa3f4febd49df03a32fe81dbf5b7.png)
496
+
497
+
498
+
499
+ ![画像](66cd31fb3478498a0a2ead018f4192d8.png)

3

追記3を追加

2021/05/14 12:13

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -297,3 +297,119 @@
297
297
  #追記2
298
298
 
299
299
  ![追加](4e94789d9456d660c08342232c8a43ee.png)
300
+
301
+
302
+
303
+
304
+
305
+ #追記3
306
+
307
+ ```ここに言語を入力
308
+
309
+ <template>
310
+
311
+ <div class="chat">
312
+
313
+ <h1 class="chat-tll flex">
314
+
315
+ <div class="flash neon">Chat Room</div>
316
+
317
+ <router-link :to="`/board/${this.uid}`" class="back-btn">
318
+
319
+ <img
320
+
321
+ src="../assets/戻る.jpg"
322
+
323
+ alt="チャット終了"
324
+
325
+ class="back-btn-icon"
326
+
327
+ />
328
+
329
+ </router-link>
330
+
331
+ </h1>
332
+
333
+ <!--Firebase から取得したリストを描画-->
334
+
335
+ <transition-group name="chat" tag="div" class="list content">
336
+
337
+ <!--chatの中の{ key, name, image, message ,userid }をそれぞれ取得-->
338
+
339
+ <section
340
+
341
+ v-for="{ key, name, image, message, userid, time } in chat"
342
+
343
+ :key="key"
344
+
345
+ >
346
+
347
+ <div v-if="userid === user.uid" class="myitem flex">
348
+
349
+ <!-- 自身 -->
350
+
351
+ <!--「画像」の指定-->
352
+
353
+
354
+
355
+ <!--「名前」と「メッセージ」の指定-->
356
+
357
+ <div class="mydetail">
358
+
359
+ <div class="mytime">{{ $dayjs(time).format("hh:mm") }}</div>
360
+
361
+ <div @click.right.prevent="deleteMessage(key)" class="mymessage">
362
+
363
+ <nl2br tag="div" :text="message" />
364
+
365
+ </div>
366
+
367
+ </div>
368
+
369
+ <div class="myimage flex">
370
+
371
+ <img :src="image" width="40" height="40" />
372
+
373
+ <div class="myname">{{ profileDeta.name }}</div>
374
+
375
+ </div>
376
+
377
+ </div>
378
+
379
+ <div v-else class="otheritem flex">
380
+
381
+ <!-- 自身ではない -->
382
+
383
+ <!--「画像」の指定-->
384
+
385
+ <div class="otherimage flex">
386
+
387
+ <img :src="image" width="40" height="40" />
388
+
389
+ <div class="othername">name</div>
390
+
391
+ </div>
392
+
393
+ <!--「名前」と「メッセージ」の指定-->
394
+
395
+ <div class="otherdetail">
396
+
397
+ <div class="othermessage">
398
+
399
+ <nl2br tag="div" :text="message" />
400
+
401
+ </div>
402
+
403
+ <div class="othertime">{{ $dayjs(time).format("hh:mm") }}</div>
404
+
405
+ </div>
406
+
407
+ </div>
408
+
409
+ </section>
410
+
411
+ </transition-group>
412
+
413
+
414
+
415
+ ```

2

画像追加

2021/05/13 13:44

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -291,3 +291,9 @@
291
291
  };
292
292
 
293
293
  ```
294
+
295
+
296
+
297
+ #追記2
298
+
299
+ ![追加](4e94789d9456d660c08342232c8a43ee.png)

1

追記

2021/05/13 05:57

投稿

TMTN
TMTN

スコア53

test CHANGED
File without changes
test CHANGED
@@ -129,3 +129,165 @@
129
129
  }
130
130
 
131
131
  ```
132
+
133
+
134
+
135
+ #追記
136
+
137
+ ```ここに言語を入力
138
+
139
+ methods: {
140
+
141
+ // スクロール位置を一番下に移動
142
+
143
+ scrollBottom() {
144
+
145
+ this.$nextTick(() => {
146
+
147
+ //this.$nextTickは、再描画を待つ。
148
+
149
+ //絶対値からbody要素の高さを取得
150
+
151
+ window.scrollTo(0, document.body.clientHeight);
152
+
153
+ });
154
+
155
+ },
156
+
157
+ childAdded(snap) {
158
+
159
+ //snapshotとは、ある時点における特定のデータベース参照にあるデータの全体像を写し取ったもの
160
+
161
+ //childAdded:データベースからアイテムのリストを取得する関数
162
+
163
+ // 受け取ったメッセージをchatに追加
164
+
165
+ const message = snap.val();
166
+
167
+ //イベントのときにデータベース内の「message」データを取得。
168
+
169
+ // データベースに新しい要素が追加されると随時呼び出される
170
+
171
+ this.chat.push({
172
+
173
+ key: snap.key,
174
+
175
+ name: message.name,
176
+
177
+ image: message.image,
178
+
179
+ message: message.message,
180
+
181
+ userid: message.userid,
182
+
183
+ time: message.time,
184
+
185
+ });
186
+
187
+ this.scrollBottom();
188
+
189
+ //スクロールの一番下に追加。
190
+
191
+ },
192
+
193
+ doSend() {
194
+
195
+ const time = time;
196
+
197
+ if (this.user.uid && this.input.length) {
198
+
199
+ // firebaseに書き込まれたメッセージを追加
200
+
201
+ firebase
202
+
203
+ .database()
204
+
205
+ .ref(this.$route.params.id)
206
+
207
+ .push(
208
+
209
+ {
210
+
211
+ message: this.input,
212
+
213
+ name: this.user.displayName,
214
+
215
+ image: this.user.photoURL,
216
+
217
+ userid: this.user.uid,
218
+
219
+ time: firebase.database.ServerValue.TIMESTAMP,
220
+
221
+ },
222
+
223
+
224
+
225
+ () => {
226
+
227
+ this.input = ""; // フォームを空にする
228
+
229
+ }
230
+
231
+ );
232
+
233
+ console.log(time);
234
+
235
+ }
236
+
237
+ },
238
+
239
+ deleteMessage() {
240
+
241
+ firebase
242
+
243
+ .database()
244
+
245
+ .ref()
246
+
247
+ .remove();
248
+
249
+ this.$swal({
250
+
251
+ title: "内容確認",
252
+
253
+ text: "メッセージを削除しますか?",
254
+
255
+ icon: "warning",
256
+
257
+ buttons: true,
258
+
259
+ dangerMode: true,
260
+
261
+ }).then((willDelete) => {
262
+
263
+ if (willDelete) {
264
+
265
+ this.$swal("メッセージを削除しました", {
266
+
267
+ icon: "success",
268
+
269
+ });
270
+
271
+ this.$router.go({
272
+
273
+ path: `/chat/${this.$route.params.id}`,
274
+
275
+ force: true,
276
+
277
+ });
278
+
279
+ } else {
280
+
281
+ this.$swal("キャンセルしました。");
282
+
283
+ }
284
+
285
+ });
286
+
287
+ },
288
+
289
+ },
290
+
291
+ };
292
+
293
+ ```