0

実現したいこと

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="&#x2713;" /><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
7
  • 実際に出力されたHTMLはどうなっているのでしょうか。質問を編集して追記してください。
    – suzukis
    Commented 2017年4月2日 5:45
  • 実際に出力されたHTMLを追記しました。よろしくお願いします。
    – kana
    Commented 2017年4月2日 9:35
  • 自分のメッセージの2つめが空ですね。@messages に空なものが含まれているのではないでしょうか。
    – masm
    Commented 2017年4月2日 13:42
  • Message.delete_allでmessageを全て削除した後、Message.allでメッセージが0なのを確認して表示してみましたが、空のメッセージが表示されてしまいます。他に原因と思われる部分がどこかありますでしょうか?
    – kana
    Commented 2017年4月2日 15:12
  • 五月雨式になってしまいましたが、@messagesを作成しているコントローラのコードも追記してください。
    – suzukis
    Commented 2017年4月3日 5:45

1 件の回答 1

1

index メソッドの最後の行、

@message = @conversation.messages.build(user: current_user)

@message = Message.new(user: current_user)

に変更すれば治ると思います。


以下、理由です。
まず、

@messages = @conversation.messages

で、@conversation に紐付いたメッセージを取得して、最後に、

@message = @conversation.messages.build(user: current_user)

で、その @conversation にメッセージを追加しています。
その追加分が空のメッセージとなって表示されているのだと思います。

直接的に @messages と関係ないように見えますが、
@messages@conversation.messages は同じオブジェクトを指していますので、
@conversation へのメッセージの追加は @messages への追加と同じことです。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。