DMのメッセージの表示について

Question

前提

DMのメッセージを誰のメッセージか分かるように右と左に振り分けて表示させたいです。
現在はDMの相手メッセージも自身のメッセージも同じく左に表示されているので自身のメッセージを右に表示させたいのですが、controllerから振り分けるのか、view箇所で振り分けることが可能なのでしょうか？

該当のソースコード

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :room
  validates :content, presence: false, length: { maximum: 200 }
  validates :photo_content,  presence: false
  mount_uploader :photo_content, PhotoContentUploader
end

def show
    @room = Room.find(params[:id])
    if Entry.where(user_id: current_user.id,room_id: @room.id).present?
      @messages = @room.messages
      @message = Message.new
      @entries = @room.entries
    else
      redirect_back(fallback_location: root_path)
    end
  end

def create
    if Entry.where(user_id: current_user.id, room_id: params[:message][:room_id]).present?
      @message = Message.create(params.require(:message).permit(:user_id, :content, :photo_content, :room_id).merge(user_id: current_user.id))
    else
      flash[:alert] = "メッセージ送信に失敗しました。"
    end
    redirect_to "/rooms/#{@message.room_id}"
  end

<div class="chat-box <%= ' my-message' if m.user == current_user %>">
            <div class="chat-hukidashi">
              <%if m.user == current_user%>
                <div class='dm-user my-message'>
                  <%= m.user.name %>
                  <%= image_tag 'room_logo.png',  :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle',  size: '50x50' %>
                </div>
              <% else %>
                <div class='dm-user'>
                  <%= image_tag 'room_logo.png',  :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle',  size: '50x50' %>
                  <%= m.user.name %>
                </div>
              <% end %>
              <div class="chat-content">
                <div class="chat-content-text">
                  <p><%=safe_join(m.content.split("\n"),tag(:br))%></p>
                </div>
                <div class="chat-content-time">
                  <%= m.created_at.strftime("%Y年%m月%d日 %H:%M")%>
                </div>
              </div>
            </div>
          </div>

！追記

.chat{
        height: auto;
        padding: 20px;
        border: solid 1px silver;
        border-radius: 10px;
        background-color: #FFFFEE;
        .my-message{
            width: auto;
            display: flex;
            justify-content: flex-end;
            order: 3;
        }
    }

！追記
自身のメッセージを右に配置することにしました。

Answer 1

• 要素の横並びをdisplay:flexで実現する
• 相手のメッセージをクラスで判別できるようにする（class="chat-box not-my-message"）
• not-my-messageのときに、justify-content: endで右寄せ
• not-my-messageのときに、orderで要素の並び順を入れ替え

Comments

[no1knows]

本来はnot-my-messageではなくて、my-messageというクラスにしたほうが良い気がしますが、説明のためnot-my-messageという回りくどい表現で記載しています。

[退会済みユーザー]

すみません。
試してみたのですが、cssの記述は質問に追記した書き方で合っていますでしょうか？
誤って、DMが３つ並んでしまい、また分けることができませんでした。

[no1knows]

> 相手のメッセージをクラスで判別できるようにする
をきちんとコードに落とし込んでみてください。

[退会済みユーザー]

if文で条件分岐させて自分のメッセージと相手メッセージを分けるということですか？

[no1knows]

そうです。自分のメッセージでなければnot-my-messageクラスを追加するという実装が必要となります。

[退会済みユーザー]

<div class="chat-box <%= ' not-my-message' unless @messages == current_user %>">
というような形でclass付けを試してみたのですが、
全てのクラスにnot-my-messageが追加されてしまいます。
クラス付けのifは上記のやり方が適切でしょうか？

[no1knows]

@messagesとcurrent_userは比較可能なものでしょうか？

[退会済みユーザー]

@messagesの中にuser_idがあるので比較できるのかなと考えたのですが、どうでしょうか？

!追記
m.user.id == current_userでも試してみたのですが、変わらず全てのクラスにnot-my-messageが付きました。

！追記
m.user == current_userで分けることができました。

[no1knows]

unlessは直感的に分かりづらいので個人的には下記のような書き方が好ましいかと思います。
<div class="chat-box<%= ' not-my-message' if m.user != current_user %>">

[no1knows]

またSCSSは正しく書けていないようです。orderの使い方などを調べてみてください。

[退会済みユーザー]

現在のscssの状態はどうでしょうか？
display:flex
justify-content: end
に関してましてはうまく記述できたと感じているのですが。。。

[退会済みユーザー]

.my-message{
width: auto;
display: flex;
justify-content: flex-end;
order: 3;
.chat-hukidashi{
margin: 0 0 0 auto;
}
.my-message-user{
margin-left: 10px;
display: flex;
justify-content: flex-end;
order: 3;
p{
position:relative;
top: 15px;
margin-right: 5px;
}
}
}
できれいに右寄せできました。
ありがとうございました！