33747


# 実現したいこと

rails4 ローカル環境

現在メッセージ機能を実装してラインのようなメッセージのやりとりができるようにしたいと思っています。

# 解決したい問題

メッセージ機能は無事に実装できて、メッセージのやり取りをしているページで『相手のメッセージは左側』『自分のメッセージは右側』という表示にして吹き出しをつけて表示しようと思っています。

吹き出しもCSSで実装したのですが、吹き出しをつけると下記の画像のように空の吹き出しが１つ勝手に表示されてしまいます。

[![問題点](https://i.stack.imgur.com/MOmJw.png)](https://i.stack.imgur.com/MOmJw.png)

私なりに原因を探ってみたところ、  
CSSで枠線をつけるとこういう現象が出るため、枠線の付け方に問題がある？

ただ単に、メッセージのやり取りを一覧で表示して枠線をつけると、このような現象は起きなかったためメッセージの取得に関する記述が間違っている？

怪しいのはここら辺かと思っているのですが、解決はできずにいます。

どのようにしたらいいか教えていただけると嬉しいです。

現在はこのように記述しています。

`messages/index.html.erb`

[code]

    <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 %>
    
[/code]

  

# 実際に出力されるHTML

[code]

    <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>
    
[/code]

# messages_controller

[code]

    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
    
[/code]


CC BY-SA 3.0
2017-04-02T02:18:11.533
33705
2017-04-03T12:03:24.203
2017-04-03T06:06:38.030
21311
21311
question
ruby-on-rails ruby
Ruby on Rails メッセージ機能でのメッセージの取得について


`index` メソッドの最後の行、

[code]

    @message = @conversation.messages.build(user: current_user)
    
[/code]

を

[code]

    @message = Message.new(user: current_user)
    
[/code]

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

* * *

以下、理由です。  
まず、

[code]

    @messages = @conversation.messages
    
[/code]

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

[code]

    @message = @conversation.messages.build(user: current_user)
    
[/code]

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

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


CC BY-SA 3.0
2017-04-03T12:03:24.203
33747
2017-04-03T12:03:24.203
5288
33705
answer