↓↓クリックして頂けると励みになります。
【36 | 購入確認電子メール】 << 【ホーム】 >> 【38 | 会話表示】
生徒が先生にメッセージを送信できるように実装します。
ジェネレータを使ってメッセージモデルを作成していきます。
次のセクションで解説する会話モデルも一緒に作成しておきます。
まずは会話モデルです。
コマンド
rails g model Conversation sender:references receiver:references
次にメッセージモデルです。
コマンド
rails g model Message content:text user:references conversation:references
「db\migrate\20200728232206_create_conversations.rb」ファイルを編集します。
記述更新 db\migrate\20200728232206_create_conversations.rb
以下のように内容を置き換えて下さい。ユーザーテーブルと関連付けします。
class CreateConversations < ActiveRecord::Migration[7.1] def change create_table :conversations do |t| t.references :sender, foreign_key: { to_table: :users } t.references :receiver, foreign_key: { to_table: :users } t.timestamps end end end
マイグレーションを適用します。
コマンド マイグレーション適用
rails db:migrate
メッセージモデルを編集します。
「app\models\message.rb」ファイルを以下の記述に変更します。
記述追加 app\models\message.rb
5行目に「validates :content, presence: { message: '空白にはできません' }」の記述を追加しています。
class Message < ApplicationRecord belongs_to :user belongs_to :conversation validates :content, presence: { message: '空白にはできません' } end
次に会話モデルを編集します。
「app\models\conversation.rb」ファイルを以下の記述に変更します。
記述変更 app\models\conversation.rb
class Conversation < ApplicationRecord belongs_to :sender, class_name: "User" belongs_to :receiver, class_name: "User" def last_message message = Message.where(conversation_id: self.id).last if message.present? return message else return Message.new updated_at: Time.now end end end
ジェネレーターを使ってメッセージコントローラを作成します。
コマンド
rails g controller messages create
「app\controllers\messages_controller.rb」ファイルを以下のように変更します。
記述変更 app\controllers\messages_controller.rb
class MessagesController < ApplicationController def create if current_user.id == message_params[:receiver_id] redirect_to request.referrer, alert: "自分にメッセージを送ることはできません" end conversation = Conversation.where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)", current_user.id, message_params[:receiver_id], message_params[:receiver_id], current_user.id ).first if !conversation.present? conversation = Conversation.create(sender_id: current_user.id, receiver_id: message_params[:receiver_id]) end @message = Message.new(user_id: current_user.id, conversation_id: conversation.id, content: message_params[:content] ) if @message.save redirect_to request.referrer, notice: "メッセージを送りました。" else redirect_to request.referrer, alert: "メッセージを送ることができません。" end end private def message_params params.require(:message).permit(:content, :receiver_id) end end
ルートの設定をします。
2行目に自動で追加された「get 'messages/create'」の記述は削除して下さい。
記述追加 config\routes.rb
18行目に「post 'messages', to: 'messages#create'」の記述を追加しています。
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' # get get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'user' get '/myprojects', to: 'projects#list' get 'settings/payment', to: 'users#payment', as: 'settings_payment' # post post '/users/edit', to: 'users#update' post '/free', to: 'charges#free' post '/settings/payment', to: 'users#update_payment', as: "update_payment" post '/reviews', to: 'reviews#create' post 'messages', to: 'messages#create' # device devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} resources :projects do member do get 'naming' get 'pricing' get 'description' get 'photo_upload' delete :delete_photo post :upload_photo end resources :tasks, only: [:show, :index] end resources :tasks, except: [:edit] do member do get 'naming' get 'description' get 'video' get 'code' end end resources :reviews, only: [:create, :destroy] # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. # Can be used by load balancers and uptime monitors to verify that the app is live. get "up" => "rails/health#show", as: :rails_health_check # Defines the root path route ("/") # root "posts#index" end
ビューの編集をします。
「app\views\users\show.html.erb」ファイルに以下の記述を追加します。
<!-- メッセージ --> <div class="card"> <div class="card-body"> <!-- メッセージ送信ボタン --> <% if current_user.id != @user.id %> <!-- モダールトリガー --> <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#exampleModal"> <div class="font2">メッセージを送る</div> </button> <!-- モダール --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title font2 fs-5" id="exampleModalLabel">メッセージ送信</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <%= form_with model: Message.new do |f| %> <div class="modal-body"> <div class="container"> <div class="card"> <div class="card-body"> <%= image_tag avatar_url(@user), class: "card-img-top rounded-pill", style: "width: 3rem;" %> <span class="font2"><%= @user.full_name %>へのメッセージ</span> </div> </div> <div class="card mt-2"> <div class="card-body"> <%= f.hidden_field :receiver_id, value: @user.id %> <%= f.text_area :content, class: "w-100", style: "height: 10rem;" %> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <%= f.submit "メッセージを送る", class: "btn btn-outline-primary btn-block" %> </div> <% end %> </div> </div> </div> <% end %> </div> </div>
記述更新 app\views\users\show.html.erb 23行目
<div class="container mt-4 mb-4"> <div class="row"> <!-- 左側 --> <div class="col-md-4 mb-4"> <div class="card"> <div class="card-body"> <!-- ステータス --> <div> <% if @user.status %> <span class="badge bg-success"><i class="fa-regular fa-bell"></i>オンライン</span> <% else %> <span class="btn btn-secondary"><i class="fa-regular fa-bell-slash"></i>オフライン</span> <% end %> </div> <!-- アバター --> <%= image_tag avatar_url(@user), class: "img-fluid img-thumbnail rounded-pill" %> <h4 class="text-center"><%= @user.full_name %></h4> <!-- 自己紹介 --> <div class="h5 text-center"><%= @user.about %></div> <!-- メッセージ --> <div class="card"> <div class="card-body"> <!-- メッセージ送信ボタン --> <% if current_user.id != @user.id %> <!-- モダールトリガー --> <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#exampleModal"> <div class="font2">メッセージを送る</div> </button> <!-- モダール --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title font2 fs-5" id="exampleModalLabel">メッセージ送信</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <%= form_with model: Message.new do |f| %> <div class="modal-body"> <div class="container"> <div class="card"> <div class="card-body"> <%= image_tag avatar_url(@user), class: "card-img-top rounded-pill", style: "width: 3rem;" %> <span class="font2"><%= @user.full_name %>へのメッセージ</span> </div> </div> <div class="card mt-2"> <div class="card-body"> <%= f.hidden_field :receiver_id, value: @user.id %> <%= f.text_area :content, class: "w-100", style: "height: 10rem;" %> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <%= f.submit "メッセージを送る", class: "btn btn-outline-primary btn-block" %> </div> <% end %> </div> </div> </div> <% end %> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="col-md-8"> <!-- 登録しているプロジェクト --> <div class="card mb-4"> <div class="card-body"> <h5 class="card-title"><%= @user.full_name %>さんが登録しているプロジェクト</h5> <div class="row"> <% @projects.each do |project| %> <% if project.active? && project.user == @user %> <div class="col-md-4"> <div class="card mb-2"> <%= link_to project_path(project), data: { turbo: false} do %> <%= image_tag project_cover(project), style: "width: 100%;", class: "card-img-top" %> <% end %> <div class="card-body"> <span class="star-review"> <i class="fa fa-star text-warning"></i> <%= project.average_rating %> <span class="has-text-primary">(<%= project.reviews.count %>)</span> </span> <%= link_to project_path(project), data: { turbo: false} do %> <h5 class="card-title"> <span class="btn btn-light"><%= project.name %></span> </h5> <% end %> <div class="badge bg-danger fs-5 mb-4 mt-2"><%= number_to_currency(project.price) %></div> </div> </div> </div> <% end %> <% end %> </div> </div> </div> <!-- レビュー --> <div class="card"> <div class="card-body"> <h5 class="card-title"><%= @user.full_name %>さんへのレビュー</h5> <%= render "reviews/list" %> </div> </div> </div> </div> </div>
ブラウザ確認
http://localhost:3000/users/2
生徒から先生にメッセージを送ってみます。
Posticoでメッセージテーブルを確認します。
【36 | 購入確認電子メール】 << 【ホーム】 >> 【38 | 会話表示】
↓↓クリックして頂けると励みになります。
