teratail
回答率
85.48%
質問するログイン新規登録
トップRubyに関する質問DMのメッセージの表示について

編集履歴

質問編集履歴

8

修正

2022/11/12 14:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -3,9 +3,6 @@
3
3
  現在はDMの相手メッセージも自身のメッセージも同じく左に表示されているので自身のメッセージを右に表示させたいのですが、controllerから振り分けるのか、view箇所で振り分けることが可能なのでしょうか？
4
4
 
5
5
 
6
- ### 発生している問題・エラーメッセージ
7
- 現在のDm画面
8
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/7cdd71f5-e21a-4445-b3df-0a746e87d76d.png)
9
6
 
10
7
  ### 該当のソースコード
11
8
  ```message.rb
Ruby

7

追記

2022/11/08 09:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  ### 発生している問題・エラーメッセージ
7
7
  現在のDm画面
8
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b7eb14f6-8cc0-4943-a60b-af8f9feae423.png)
8
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/7cdd71f5-e21a-4445-b3df-0a746e87d76d.png)
9
9
 
10
10
  ### 該当のソースコード
11
11
  ```message.rb
@@ -43,12 +43,19 @@
43
43
  ```
44
44
 
45
45
  ```views/rooms/show.html.erb
46
- <div class="chat-box <%= ' not-my-message' unless m.user == current_user %>">
46
+ <div class="chat-box <%= ' my-message' if m.user == current_user %>">
47
47
  <div class="chat-hukidashi">
48
+ <%if m.user == current_user%>
49
+ <div class='dm-user my-message'>
50
+ <%= m.user.name %>
51
+ <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %>
52
+ </div>
53
+ <% else %>
48
- <div class='dm-user'>
54
+ <div class='dm-user'>
55
+ <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %>
49
- <%= m.user.name %>
56
+ <%= m.user.name %>
50
- <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %>
51
- </div>
57
+ </div>
58
+ <% end %>
52
59
  <div class="chat-content">
53
60
  <div class="chat-content-text">
54
61
  <p><%=safe_join(m.content.split("\n"),tag(:br))%></p>
@@ -69,13 +76,16 @@
69
76
  border: solid 1px silver;
70
77
  border-radius: 10px;
71
78
  background-color: #FFFFEE;
79
+ .my-message{
80
+ width: auto;
72
- display:flex;
81
+ display: flex;
73
- .not-my-message{
74
- justify-content: end;
82
+ justify-content: flex-end;
75
83
  order: 3;
76
84
  }
77
85
  }
78
86
  ```
79
87
 
88
+ ！追記
89
+ 自身のメッセージを右に配置することにしました。
80
90
 
81
91
 
Ruby

6

追記

2022/11/08 08:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -5,8 +5,7 @@
5
5
 
6
6
  ### 発生している問題・エラーメッセージ
7
7
  現在のDm画面
8
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b83527ea-e516-47e8-aeb2-c2a6e2b0f2f8.png)
9
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b7e7a693-c45a-4b18-bb3d-821f0406aa24.png)
8
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b7eb14f6-8cc0-4943-a60b-af8f9feae423.png)
10
9
 
11
10
  ### 該当のソースコード
12
11
  ```message.rb
@@ -44,14 +43,7 @@
44
43
  ```
45
44
 
46
45
  ```views/rooms/show.html.erb
47
- <div class="chat">
48
- <% if @messages.present? %>
49
- <% @messages.each do |m| %>
50
- <%if @messages == current_user %>
51
- <div class="chat-box">
52
- <%else %>
53
- <div class="chat-box not-my-message">
46
+ <div class="chat-box <%= ' not-my-message' unless m.user == current_user %>">
54
- <% end %>
55
47
  <div class="chat-hukidashi">
56
48
  <div class='dm-user'>
57
49
  <%= m.user.name %>
@@ -67,9 +59,6 @@
67
59
  </div>
68
60
  </div>
69
61
  </div>
70
- <% end %>
71
- <% end %>
72
- </div><br />
73
62
  ```
74
63
 
75
64
  ！追記
@@ -85,7 +74,7 @@
85
74
  justify-content: end;
86
75
  order: 3;
87
76
  }
88
- }
77
+ }
89
78
  ```
90
79
 
91
80
 
Ruby

5

修正

2022/11/08 07:02

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -44,28 +44,14 @@
44
44
  ```
45
45
 
46
46
  ```views/rooms/show.html.erb
47
- <div class='dm-page'>
48
- <div class="rooms-title">
49
- <p>～応募した企画名～</p>
50
- <h4><%= @room.room_name %></h4>
51
- </div>
52
- <% @entries.each do |e| %>
53
- <div class="dm-user-name-box">
54
- <strong>
55
- <div class="dm-user-name">
56
- <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %>
57
- <a class="rooms-user-link" href="/users/<%= e.user.id %>">
58
- <%= e.user.name %>
59
- </a>
60
- </div>
61
- </strong>
62
- </div>
63
- <% end %>
64
- <div class="chats">
65
- <div class="chat">
47
+ <div class="chat">
66
48
  <% if @messages.present? %>
67
49
  <% @messages.each do |m| %>
50
+ <%if @messages == current_user %>
51
+ <div class="chat-box">
52
+ <%else %>
68
53
  <div class="chat-box not-my-message">
54
+ <% end %>
69
55
  <div class="chat-hukidashi">
70
56
  <div class='dm-user'>
71
57
  <%= m.user.name %>
@@ -84,22 +70,6 @@
84
70
  <% end %>
85
71
  <% end %>
86
72
  </div><br />
87
- <div class="posts">
88
- <%= form_for @message do |f| %>
89
- <div class="posts-form">
90
- <%= f.text_area :content, placeholder: "メッセージを入力して下さい" , class:"form-text-field" %>
91
- <%#<%= f.file_field :photo_content, class: 'photo_content' %>
92
- </div>
93
- <div class="chat-btn">
94
- <%= f.hidden_field :room_id, value: @room.id %>
95
- <%= f.submit "投稿",class: 'form-submit btn btn-outline-danger btn-lg'%>
96
- <div class="left-button">
97
- <%= link_to '戻る', :back, class:"edit-link btn btn-outline-danger btn-lg" %>
98
- </div>
99
- </div>
100
- <% end %>
101
- </div>
102
- </div>
103
73
  ```
104
74
 
105
75
  ！追記
Ruby

4

修正

2022/11/08 06:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -65,7 +65,7 @@
65
65
  <div class="chat">
66
66
  <% if @messages.present? %>
67
67
  <% @messages.each do |m| %>
68
- <div class="chat-box">
68
+ <div class="chat-box not-my-message">
69
69
  <div class="chat-hukidashi">
70
70
  <div class='dm-user'>
71
71
  <%= m.user.name %>
@@ -100,8 +100,6 @@
100
100
  <% end %>
101
101
  </div>
102
102
  </div>
103
-
104
- </div>
105
103
  ```
106
104
 
107
105
  ！追記
Ruby

3

修正

2022/11/08 06:20

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
  ### 発生している問題・エラーメッセージ
7
7
  現在のDm画面
8
8
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b83527ea-e516-47e8-aeb2-c2a6e2b0f2f8.png)
9
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/3cd762ea-3c08-45ae-bb4e-d598e6dd9d4b.png)
9
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b7e7a693-c45a-4b18-bb3d-821f0406aa24.png)
10
10
 
11
11
  ### 該当のソースコード
12
12
  ```message.rb
Ruby

2

修正

2022/11/08 06:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -5,7 +5,8 @@
5
5
 
6
6
  ### 発生している問題・エラーメッセージ
7
7
  現在のDm画面
8
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-07/cab06bed-d909-43f0-9363-eaf1524e62cc.png)
8
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/b83527ea-e516-47e8-aeb2-c2a6e2b0f2f8.png)
9
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-08/3cd762ea-3c08-45ae-bb4e-d598e6dd9d4b.png)
9
10
 
10
11
  ### 該当のソースコード
11
12
  ```message.rb
@@ -103,5 +104,21 @@
103
104
  </div>
104
105
  ```
105
106
 
107
+ ！追記
108
+ ```room.scss
109
+ .chat{
110
+ height: auto;
111
+ padding: 20px;
112
+ border: solid 1px silver;
113
+ border-radius: 10px;
114
+ background-color: #FFFFEE;
115
+ display:flex;
116
+ .not-my-message{
117
+ justify-content: end;
118
+ order: 3;
119
+ }
120
+ }
121
+ ```
106
122
 
107
123
 
124
+
Ruby

1

追記

2022/11/07 12:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,16 @@
8
8
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-07/cab06bed-d909-43f0-9363-eaf1524e62cc.png)
9
9
 
10
10
  ### 該当のソースコード
11
+ ```message.rb
12
+ class Message < ApplicationRecord
13
+ belongs_to :user
14
+ belongs_to :room
15
+ validates :content, presence: false, length: { maximum: 200 }
16
+ validates :photo_content, presence: false
17
+ mount_uploader :photo_content, PhotoContentUploader
18
+ end
11
19
 
20
+ ```
12
21
  ```rooms_controllers.rb/showアクション
13
22
  def show
14
23
  @room = Room.find(params[:id])
Ruby