【Rails】자신의 활동 일람을 표시한다【통지 기능의 응용】

안녕하세요!
고양이 조카 (＠고양이 r1234)라고합니다.

요 전날, 처음부터 독학으로 공부하고, 웹 서비스 「Lookmine」를 시작했습니다.

이 서비스는 다음과 같은 알림 기능을 구현합니다.



이 기능을 응용하여 자신이 「좋아요, 코멘트, 팔로우」한 이력을 「액티비티」로서 일람으로 보는 기능을 만들었습니다.



역시, 누구에게 좋네요를 했다든가, 누구에게 무슨 코멘트를 했다든지는 일람으로 볼 수 있는 편이 좋네요.

그런 이유로 구현 방법을 이 기사에서 해설하기로 했습니다.

통지 기능의 구현이 끝나고 있는 전제이므로, 아직 통지 기능이 되어 있지 않은 사람은, 「 알림 기능을 구현하는 방법 」로부터 읽어 주세요.

활동 목록 화면 만들기

액티비티 일람의 화면을 만들어 갑시다.
첫 번째는 액티비티 컨트롤러를 만드는 것입니다.

$ rails g controller activities

통지 일람의 화면은 index 로 만들므로, 라우팅을 추가해 둡시다.
다른 메소드는 불필요하므로 only 를 추가하고 있습니다.

config/routes.rb

  resources :activities, only: :index

index 액션을 구현합니다.

app/controllers/activities_controller.rb

class NotificationsController < ApplicationController
  def index
    @activities = current_user.active_notifications.page(params[:page]).per(20)
  end
end

활동 목록을 표시하기 위해 새 테이블을 만들 필요는 없으며 알림 기능에서 사용한 테이블을 그대로 유용합니다.

이번에는 active_notifications에서 자신이 보낸 알림을 가져옵니다.

통지 기능의 구현으로, 이하의 기술을 한 것을 기억하고 있습니까?

app/models/user.rb

  has_many :active_notifications, class_name: 'Notification', foreign_key: 'visitor_id', dependent: :destroy
  has_many :passive_notifications, class_name: 'Notification', foreign_key: 'visited_id', dependent: :destroy

통지 기능의 때는, passive_notifications (을)를 사용해, 상대에게 보낸 통지를 취득하고 있었습니다.
이번에는 자신이 보낸 알림을 받고 싶으므로 active_notifications를 사용합니다.

다음은 화면 구현입니다.index 화면을 만들어 봅시다.

app/views/activities/index.html.slim

.col-md-6.mx-auto
  - if @activities.exists?
    - @activities.each do |activity|
      = render 'activities/activity', activity: activity
  - else
    p.text-center
      | アクティビティはありません

자신이 보낸 알림만큼 부분 템플릿_activity.html.slim을 호출합니다.

app/views/activities/_activities.html.slim

- visitor = activity.visitor
- visited = activity.visited
.form-inline
  span      
    - case activity.action
    - when 'follow' then
      = link_to user_path(visited) do
        = image_tag avatar_url(visited).to_s, class: "icon_mini" 
        strong
          = visited.name
      = "さんをフォローしました"
    - when 'like' then
      span
        = link_to post_path(activity.post) do
          = image_tag avatar_url(activity.post.user).to_s, class: "icon_mini" 
          strong
            = activity.post.user.name + 'さんの投稿'
      = "にいいねしました"
    - when 'comment' then
      - if activity.post.user_id == visitor.id
        = link_to "あなたの投稿", activity.post, style: "font-weight: bold;"
      - else
        span
          = link_to post_path(activity.post) do
            = image_tag avatar_url(activity.post.user).to_s, class: "icon_mini" 
            strong
              = activity.post.user.name + 'さんの投稿'
      = "にコメントしました"
      p.text-muted.mb-0
        = Comment.find_by(id: activity.comment_id)&.comment

.small.text-muted.text-right
  = time_ago_in_words(activity.created_at).upcase
hr

이를 구현하면 다음 활동 목록이 완성됩니다.



팔로우는 상대방의 프로필을 연결합니다.

코멘트는, 코멘트처의 투고를 링크로 하고 있어, 자신의 투고에 대한 코멘트는 「당신의 투고」라고 하는 표현으로 하고 있습니다.
자신의 투고인데 「〇〇씨의 투고에 코멘트했습니다」라고 하는 표현은, 위화감이 있군요.

이것으로 완성입니다!
수고하셨습니다!

함께 읽고 싶다.

HTML도 모르는 초보자가, 독학으로 「투고형 SNS 서비스」를 만들었다고 진짜? 【193일간의 사투】

웹 프로그래밍 "경험 0"의 내가 "193 일간의 독학"에서 웹 서비스를 시작한 이야기 (외부 링크)

운영하는 PlayFab 전용 블로그
htps : // p p y y f b-s r. 이 m