이 기사는 뛰어넘는 엔지니어의 첫걸음! AdventCalendar2020 7일차의 기사입니다.

만들고 싶은 것

아래 그림과 같이 자신의 메시지와 자신 이외의 메시지로 사용자 아이콘의 위치와 말풍선의 방향이 바뀌는 채팅 기능을 만듭니다.

전제 조건

채팅 기능 자체가 만들어졌습니다

bootstrap4가 설치되었습니다

할 일 요약

자신의 연설 거품과 상대방의 연설 거품에 대한 CSS 클래스 준비

View 파일에서 각 메시지에 대해 자신 또는 자신이 아닌 메시지를 결정합니다.

각 결정에 적용되는 CSS 클래스를 변경합니다

1. 자신의 연설 거품과 상대방의 연설 거품 CSS 클래스 준비

풍선 테두리를 디자인하는 CSS 클래스를 만듭니다.
자신의 메시지의 경우, 연설 거품의 꼬리가 왼쪽에 오도록,
자신 이외의 메시지의 경우, 말풍선의 꼬리가 오른쪽에 오도록 합니다.

// 自分のメッセージの吹き出し
.says {
  float: left;
  position: relative;
  width: calc(100% - 56px);
  padding: 16px;
  background: #ffffff;
  border-radius: 15px;
  line-height: 1.5;
  word-break: break-all;
}
.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px;
  left: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #ffffff;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

// 自分以外のメッセージの吹き出し
.other-user-says {
  float: right;
  position: relative;
  width: calc(100% - 56px);
  padding: 16px;
  background: #ffffff;
  border-radius: 15px;
  line-height: 1.5;
  word-break: break-all;
}
.other-user-says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 3px;
  right: -19px;
  border: 8px solid transparent;
  border-right: 18px solid #ffffff;
  -webkit-transform: rotate(145deg);
  transform: rotate(145deg);
}

2.View 파일에서, 메시지마다 자신 또는 자신 이외의 메시지인지를 판정한다

each문으로 message를 모두 읽어들인 후, 메시지 마다 묶어 놓고 있는 유저가 자신인지 자신 이외인지를 if문으로 판정합니다.

그 후, 판정 결과에 따라, 적용하는 풍선의 CSS 클래스를 바꾸어 갑니다.

message.html.erb

<% messages.each do |m| %>
    <!-- 自分のメッセージの場合 -->
    <% if m.user == current_user %>

    <!-- 自分以外のメッセージの場合 -->
    <% else %>

    <% end %>
<% end %>

3. 각 판정마다 적용되는 CSS 클래스를 바꾼다

자신의 메시지의 경우 자신의 연설 거품 CSS 클래스를 적용하고,
자신 이외의 메시지의 경우, 자신 이외의 풍선의 CSS 클래스를 적용하도록 합니다.

message.html.erb

<% messages.each do |m| %>
  <!-- 自分のメッセージの場合 -->
  <% if m.user == current_user %>
    <tr class="row justify-content-center">
      <!-- アイコンを左側に表示する -->
      <td class="col-2">
        <%= link_to attachment_image_tag(m.user, :image, :fill, 80, 80, fallback: "noimage.png", size:'80x80', class:"profile-image align-top"), user_path(m.user) %>
      </td>
      <!-- メッセージを右側に表示する -->
      <td class="col-10">
        <%= m.user.display_name %> <br>
        <!-- 自分用の吹き出しCSSクラスを適用する -->
        <div class="says">
          <p><%= safe_join(m.content.split("\n"),tag(:br)) %></p>
          <span><%= l m.created_at %></span>
        </div>
      </td>
    </tr>

  <!-- 自分以外のメッセージの場合 -->
  <% else %>
    <tr class="row justify-content-center">
      <!-- メッセージを左側に表示する -->
      <td class="col-10">
        <div class="col-11 float-right">
          <%= m.user.display_name %> <br>
        </div>
        <!-- 自分以外用の吹き出しCSSクラスを適用する -->
        <div class="other-user-says">
          <p><%= safe_join(m.content.split("\n"),tag(:br)) %></p>
          <span><%= l m.created_at %></span>
        </div>
      </td>
      <!-- アイコンを右側に表示する -->
      <td class="col-2">
        <%= link_to attachment_image_tag(m.user, :image, :fill, 80, 80, fallback: "noimage.png", size:'80x80', class:"profile-image align-top"), user_path(m.user) %>
      </td>
    </tr>
  <% end %>
<% end %>

끝에

이번에는 개인 앱에서 실제로 구현한 것을 소재로 했기 때문에, 사람에 따라서는 뷰의 작성 방법은 다르다고 생각합니다!

참고가 되면 다행입니다...!

참고 사이트

Rails에서 DM (Direct Message)을 보낼 수 있습니다.