2023年3月

はじめに 今回は既に作ってある簡単なアプリケーションに対してSNSのような機能を追加していこうと思います。具体的には投稿一覧ページで過去一週間にいいね数が多い順に表示、相互フォロー同士でのDM機能、ページの閲覧数のカウントをする機能を作成していきます。 1.過去一週間にいいね数が多い順に表示 ①コントローラへの記述 def index to = Time.current.at_end_of_day from = (to - 6.day).at_beginning_of_day @books = Book.includes(:favorites).sort_by {|x| x.favorites.where(created_at: from...to).size}.reverse @book = Book.new end ハイ。この記述をするだけです。toで今日の日付を獲得し、fromで今日から6日間さかのぼり合計7日間の範囲を作っています。あとはこれでsortをかけてあげれば並び替えが完了します。 2.DM機能 ①モデルの作成 rails g model Chat user_id:integer room_id:integer message:text rails g model Room rails g model UserRoom user_id:integer room_id:integer RoomモデルはDMをするための部屋番号を管理し、ChatモデルはChatの内容を管理します。そしてUserRoomモデルはUserとRoomを結ぶ中間テーブルとなっています。 モデルを作成出来たらいつも通りmigrateしましょう。 ②アソシエーションの設定 まずはuserから。 has_many :user_rooms has_many :chats has_many :rooms, through: :user_rooms 次にRoom class Room &lt; ApplicationRecord has_many :user_rooms has_many :chats end 次はuserroom class UserRoom &lt; ApplicationRecord belongs_to :user belongs_to :room end 最後にchat class Chat &lt; ApplicationRecord belongs_to :user belongs_to :room validates :message, length: { in: 1..140 } end 今回は1~140文字内でないといけないというバリデーションをつけてみました。 ユーザーは多くの部屋に参加することができ、ルームは多くのユーザーを持つことができるため、多対多になります。ユーザーとチャットの関係性はユーザーは多くのチャットを投稿することができますが、一つのチャットにかかわるユーザーは一人なので多対一になります。 ③ルーティングの設定 resources :chats, only: [:show, :create] ④コントローラの作成 rails g controller chats class ChatsController &lt; ApplicationController def show @user = User.find(params[:id]) #チャットする相手は誰？ rooms = current_user.user_rooms.pluck(:room_id) #ログイン中のユーザーの部屋情報を全て取得 user_rooms = UserRoom.find_by(user_id: @user.id, room_id: rooms)#その中にチャットする相手とのルームがあるか確認 unless user_rooms.nil?#ユーザールームがある場合 @room = user_rooms.room#変数@roomにユーザー（自分と相手）と紐づいているroomを代入 else#ユーザールームが無かった場合 @room = Room.new#新しくRoomを作る @room.save#そして保存 UserRoom.create(user_id: current_user.id, room_id: @room.id)#自分の中間テーブルを作成 UserRoom.create(user_id: @user.id, room_id: @room.id)#相手の中間テーブルを作成 end @chats = @room.chats#チャットの一覧 @chat = Chat.new(room_id: @room.id)#チャットの投稿 end def create @chat = current_user.chats.new(chat_params) @room = @chat.room @chats = @room.chats render :validater unless @chat.save end private def chat_params params.require(:chat).permit(:message, :room_id) end end このように作ります。 ⑤viewの作成 今回は非同期なのでチャットの部分テンプレートを作ります。 &lt;div class=&quot;chat-messages&quot;&gt; &lt;% chats.each do |chat| %&gt; &lt;% if chat.user_id == current_user.id %&gt; &lt;div class=&quot;message self&quot;&gt; &lt;div class=&quot;message-body&quot;&gt; &lt;%= chat.message %&gt; &lt;/div&gt; &lt;/div&gt; &lt;% else %&gt; &lt;div class=&quot;message other&quot;&gt; &lt;div class=&quot;message-sender&quot;&gt;&lt;%= chat.user.name %&gt;&lt;/div&gt; &lt;div class=&quot;message-body&quot;&gt; &lt;%= chat.message %&gt; &lt;/div&gt; &lt;/div&gt; &lt;% end %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;div class=&quot;chat-container&quot;&gt; &lt;div class=&quot;chat-topbar&quot;&gt; &lt;h2&gt;&lt;%= @user.name %&gt; さんとのチャット&lt;/h2&gt; &lt;/div&gt; &lt;div class=&quot;message&quot;&gt; &lt;%= render &quot;chats/messages&quot;, chats: @chats %&gt; &lt;/div&gt; &lt;div class=&quot;chat-form&quot;&gt; &lt;%= form_with model: @chat, data: {remote: true} do |f| %&gt; &lt;div class=&quot;errors&quot;&gt; &lt;%= render &quot;layouts/errors&quot;, obj: f.object %&gt; &lt;/div&gt; &lt;%= f.text_field :message, placeholder: &quot;メッセージを入力してください&quot;, autocomplete: &quot;off&quot; %&gt; &lt;%= f.hidden_field :room_id, value: @room.id %&gt; &lt;%= f.submit &quot;送信&quot; %&gt; &lt;% end %&gt; &lt;/div&gt; &lt;/div&gt; $('.message').html(&quot;&lt;%= j(render 'chats/messages', chats: @chats) %&gt;&quot;); $('input[type=text]').val(&quot;&quot;) 次にバリデーション用のjsファイルも作ります。 $('.errors').html(&quot;&lt;%= j(render 'layouts/errors', obj: @chat) %&gt;&quot;); 今回の非同期ではバリデーションに引っかからず、投稿が成功した場合はcreate.jsを探しに行き、成功しなかった場合にはvalidator.jsを探しに行くような仕様となっています。バリデーションのjsファイルではエラー文のテンプレートファイルを呼び出すように設定しています。 &lt;% if current_user != user && current_user.following?(user) && user.following?(current_user) %&gt; &lt;%= link_to 'チャットを始める', chat_path(user.id), class: &quot;ml-3&quot; %&gt; &lt;% end %&gt; 今回は部分テンプレートにDMへのリンクを置いています。 ⑥相互フォローしていないとDMできないようにする linkは相互フォローの時しか出ませんがURLに打ち込むと別のDMに行けてしまうので、それを対策します。 コントローラに以下を追記します。 before_action :reject_non_related, only: [:show] ・ ・ ・ private def reject_non_related user = User.find(params[:id]) unless current_user.following?(user) && user.following?(current_user) redirect_to books_path end end これでurlでの移動もできなくなりました。 ⑦レイアウトを整える せっかくなので、チャットっぽいレイアウトにしてみましょう /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * *= require_tree . *= require_self */ .chat-container { display: flex; flex-direction: column; height: 100%; max-width: 800px; margin: 0 auto; } .chat-topbar { display: flex; align-items: center; justify-content: center; background-color: #29b6f6; color: #fff; height: 50px; padding: 0 20px; } .chat-messages { flex: 1; overflow-y: scroll; padding: 20px; } .message { display: flex; flex-direction: column; margin-bottom: 10px; } .message-sender { margin-bottom: 5px; font-size: 0.8em; color: #666; } .message-body { padding: 10px; border-radius: 10px; max-width: 70%; } .self .message-body { align-self: flex-end; background-color: #29b6f6; color: #fff; } .other .message-body { align-self: flex-start; background-color: #f5f5f5; color: #333; } .chat-form { background-color: #f5f5f5; padding: 20px; } .chat-form form { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .chat-form input[type=&quot;text&quot;] { flex: 1; margin-right: 10px; padding: 10px; font-size: 1em; border: none; border-radius: 5px; background-color: #fff; } .chat-form input[type=&quot;submit&quot;] { flex: 0 0 auto; padding: 10px; font-size: 1em; border: none; border-radius: 5px; background-color: #29b6f6; color: #fff; cursor: pointer; } このcssを適用したチャットの見た目はこんな感じになります。 はい。長かったですがDM機能はこれで完了です。 3.ページの閲覧数をカウント ①モデルの作成 rails g model ViewCount book_id:integer user_id:integer 閲覧数を数えるためのモデルを用意します。このコマンドを打ったらいつも通りmigrate! ②アソシエーション belongs_to :user belongs_to :book has_many :view_counts, dependent: :destroy has_many :view_counts, dependent: :destroy ③コントローラへの記述 閲覧数を表示したい場所のコントローラに記述を加えます。 def show @book = Book.find(params[:id]) unless ViewCount.find_by(user_id: current_user.id, book_id: @book.id) current_user.view_counts.create(book_id: @book.id) end @user = @book.user @new_book = Book.new @book_comment = BookComment.new end 今回は閲覧数のカウントは一人一回のみにしてあります。 ④viewへの記述 あとは閲覧数を出す記述を任意のviewに書くだけで完成です &lt;td&gt;閲覧数: &lt;%= @book.view_counts.count %&gt;&lt;/td&gt; おわり 今回はここまで！いやーすごく長い道のりでしたね。特にレイアウトで試行錯誤しましたwレイアウトにこだわるといくら時間があっても足りませんね。ではまた別の記事で！

【Ruby on rails6】SNSのような機能を作ってみる