質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Q&A

解決済

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

1回答

0グッド

0クリップ

194閲覧

投稿2022/11/07 11:57

編集2022/11/12 14:40

前提

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

該当のソースコード

message.rb

1class Message < ApplicationRecord 2 belongs_to :user 3 belongs_to :room 4 validates :content, presence: false, length: { maximum: 200 } 5 validates :photo_content, presence: false 6 mount_uploader :photo_content, PhotoContentUploader 7end 8

rooms_controllers.rb/showアクション

1def show 2 @room = Room.find(params[:id]) 3 if Entry.where(user_id: current_user.id,room_id: @room.id).present? 4 @messages = @room.messages 5 @message = Message.new 6 @entries = @room.entries 7 else 8 redirect_back(fallback_location: root_path) 9 end 10 end

messages_controllers.rb/createアクション

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

views/rooms/show.html.erb

1<div class="chat-box <%= ' my-message' if m.user == current_user %>"> 2 <div class="chat-hukidashi"> 3 <%if m.user == current_user%> 4 <div class='dm-user my-message'> 5 <%= m.user.name %> 6 <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %> 7 </div> 8 <% else %> 9 <div class='dm-user'> 10 <%= image_tag 'room_logo.png', :alt => 'アプリロゴ', :class => 'topLogo, rounded-circle', size: '50x50' %> 11 <%= m.user.name %> 12 </div> 13 <% end %> 14 <div class="chat-content"> 15 <div class="chat-content-text"> 16 <p><%=safe_join(m.content.split("\n"),tag(:br))%></p> 17 </div> 18 <div class="chat-content-time"> 19 <%= m.created_at.strftime("%Y年%m月%d日 %H:%M")%> 20 </div> 21 </div> 22 </div> 23 </div>

!追記

room.scss

1.chat{ 2 height: auto; 3 padding: 20px; 4 border: solid 1px silver; 5 border-radius: 10px; 6 background-color: #FFFFEE; 7 .my-message{ 8 width: auto; 9 display: flex; 10 justify-content: flex-end; 11 order: 3; 12 } 13 }

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

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

投稿2022/11/07 21:34

no1knows

総合スコア3363

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

no1knows

2022/11/07 21:36

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

退会済みユーザー

2022/11/08 06:05

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

2022/11/08 06:35

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

退会済みユーザー

2022/11/08 06:55

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

2022/11/08 06:59

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

退会済みユーザー

2022/11/08 07:33 編集

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

2022/11/08 07:40

@messagesとcurrent_userは比較可能なものでしょうか?
退会済みユーザー

退会済みユーザー

2022/11/08 08:49 編集

@messagesの中にuser_idがあるので比較できるのかなと考えたのですが、どうでしょうか? !追記 m.user.id == current_userでも試してみたのですが、変わらず全てのクラスにnot-my-messageが付きました。 !追記 m.user == current_userで分けることができました。
no1knows

2022/11/08 09:00

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

2022/11/08 09:02

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

退会済みユーザー

2022/11/08 09:20 編集

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

退会済みユーザー

2022/11/08 11:23

.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; } } } できれいに右寄せできました。 ありがとうございました!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。