実現したいこと
rails4 ローカル環境
現在メッセージ機能を実装してラインのようなメッセージのやりとりができるようにしたいと思っています。
解決したい問題
メッセージ機能は無事に実装できて、メッセージのやり取りをしているページで『相手のメッセージは左側』『自分のメッセージは右側』という表示にして吹き出しをつけて表示しようと思っています。
吹き出しもCSSで実装したのですが、吹き出しをつけると下記の画像のように空の吹き出しが1つ勝手に表示されてしまいます。
私なりに原因を探ってみたところ、
CSSで枠線をつけるとこういう現象が出るため、枠線の付け方に問題がある?
ただ単に、メッセージのやり取りを一覧で表示して枠線をつけると、このような現象は起きなかったためメッセージの取得に関する記述が間違っている?
怪しいのはここら辺かと思っているのですが、解決はできずにいます。
どのようにしたらいいか教えていただけると嬉しいです。
現在はこのように記述しています。
messages/index.html.erb
<div class="container message">
<div class="wrapper col-md-8 col-md-offset-2 col-sm-10 message-index">
<div class="message-user-name">
<p><%= @conversation.target_user(current_user).name %>さんとのメッセージ</p>
</div>
<!-- メッセージが10件以上あれば以前のメッセージへのリンクを表示する -->
<% if @over_ten %>
<center><%= link_to '以前のメッセージをすべて表示', '?m=all' %></center>
<% end %>
<!-- メッセージを一件ずつ抽出 -->
<div class="ui segment">
<% @messages.each do |message| %>
<% if message.user_id == current_user.id %>
<!-- 自分のメッセージ -->
<% user = User.find(message.user_id) %>
<div class="item-right">
<div class="balloon1">
<%= qiita_markdown(message.body) %>
</div>
<div class="clear"></div>
<p><%= message.message_time %></p>
</div>
<% else %>
<!-- 相手のメッセージ -->
<div class="item-left">
<% user = User.find_by(id: message.user_id) %>
<%= link_to user_path(message.user_id) do %>
<%= profile_img(message.user) %>
<% end %>
<div id="balloon">
<%= qiita_markdown(message.body) %>
</div>
<p><%= message.message_time %></p>
</div>
<% end %>
<% end %>
</div>
<!-- メッセージの送信 -->
<%= form_for [@conversation, @message], html: {class: "ui reply form"} do |f| %>
<div class="message-field">
<%= f.text_area :body, class: "form-control input-mysize-message" %>
<%= f.text_field :user_id, value: current_user.id, type: "hidden" %>
<%= f.submit "メッセージを送る" %>
</div>
<% end %>
実際に出力されるHTML
<div class="container message">
<div class="wrapper col-md-8 col-md-offset-2 col-sm-10 message-index">
<div class="message-user-name">
<p>hogeさんとのメッセージ</p>
</div>
<!-- メッセージが10件以上あれば以前のメッセージへのリンクを表示する -->
<!-- メッセージを一件ずつ抽出 -->
<div class="ui segment">
<!-- 自分のメッセージ -->
<div class="item-right">
<div class="balloon1">
<p>huga</p>
</div>
<div class="clear"></div>
<p>04/02/17 at 5:34 PM</p>
</div>
<br>
<!-- 自分のメッセージ -->
<div class="item-right">
<div class="balloon1">
</div>
<div class="clear"></div>
<p></p>
</div>
<br>
</div>
<!-- メッセージの送信 -->
<form class="ui reply form" id="new_message" action="/conversations/6/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="NdypJ7WEIU/M0JAzIFGZHq4yBBZX8MMtVxaEqqFAvtYY9PzzG6yjj10XF/NMeqnAMjZZHdncS946HxF5N3DiAg==" />
<div class="message-field">
<textarea class="form-control input-mysize-message" name="message[body]" id="message_body">
</textarea>
<input value="3" type="hidden" name="message[user_id]" id="message_user_id" />
<input type="submit" name="commit" value="メッセージを送る" />
</div>
</form>
</div>
</div>
messages_controller
class MessagesController < ApplicationController
before_action :authenticate_user!
before_action do
@conversation = Conversation.find(params[:conversation_id])
end
def index
@messages = @conversation.messages
if @messages.length > 10
@over_ten = true
@messages = @messages[-10..-1]
end
if params[:m]
@over_ten = false
@messages = @conversation.messages
end
if @messages.last
if @messages.last.user_id != current_user.id
@messages.last.read = true
end
end
@message = @conversation.messages.build(user: current_user)
end
def create
@message = @conversation.messages.build(message_params)
if @message.save
redirect_to conversation_messages_path(@conversation)
end
end
private
def message_params
params.require(:message).permit(:body, :user_id)
end
end
@messages
に空なものが含まれているのではないでしょうか。Message.delete_all
でmessageを全て削除した後、Message.all
でメッセージが0なのを確認して表示してみましたが、空のメッセージが表示されてしまいます。他に原因と思われる部分がどこかありますでしょうか?