[４６]メッセージと会話 | モデル作成<< [ホームに戻る] >> [４８]メッセージと会話 | 会話表示
メッセージコントローラを作成します。
コマンド
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
ビューの編集をします。
「app\views\users\show.html.erb」ファイルを以下のように編集します。
１．24～35行目に以下の記述を追加します。
<% if current_user.id != @user.id %> <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a> <% else %> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> <div class="file"> <label class="button is-primary is-outlined is-fullwidth"> <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> <i class="fas fa-upload"></i> アバター画像アップロード </label> </div> <% end %> <% end %>
２．150行目に以下の記述を追加します。
<div class="modal" id="contact-form"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">メッセージを送る</p> <button class="delete toggle-contact" aria-label="close"></button> </header> <section class="modal-card-body"> <div class="columns"> <div class="column is-one-third"> <div class="card" st> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-128x128"> <%= image_tag avatar_url(@user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <hr> <strong>確認しましょう:</strong> <ul class="is-size-7" style="list-style:initial"> <li>宿泊日時</li> <li>宿泊場所</li> <li>設備</li> <li>キャンセルについて</li> </ul> </div> </div> </div> <div class="column"> <%= form_with model: Message.new do |f| %> <%= f.hidden_field :receiver_id, value: @user.id %> <div class="card-content"> <div class="field"> <div class="control"> <%= f.text_area :content, class: "textarea" %> </div> </div> <%= f.submit "メッセージを送る", class: "button is-danger is-pulled-right" %> </div> <% end %> </div> </div> </section> </div> </div> <script> var toggle_modals = $('.toggle-contact'); if (toggle_modals) { toggle_modals.on('click', function(event) { event.stopPropagation(); event.preventDefault(); var form = document.getElementById('contact-form'); form.classList.toggle('is-active'); }); } </script>
記述更新 app\views\users\show.html.erb
<section class="section"> <div class="container"> <div class="columns"> <!-- 左パネル --> <div class="column is-one-third"> <div class="columns is-multiline"> <!-- 上部 --> <div class="column is-full"> <div class="card"> <!-- アバター --> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-256x256"> <%= image_tag avatar_url(@user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <!-- 画像アップロードボタン --> <div class="content has-text-centered"> <p class="title is-5"> <%= @user.full_name %> </p> <% if current_user.id != @user.id %> <a class="button is-black is-outlined is-fullwidth toggle-contact">メッセージを送る</a> <% else %> <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post do |f| %> <div class="file"> <label class="button is-primary is-outlined is-fullwidth"> <%= f.file_field :avatar, class: "file-input", onchange: "this.form.submit();" %> <i class="fas fa-upload"></i> アバター画像アップロード </label> </div> <% end %> <% end %> </div> <hr class="h-10"> <!-- アカウント情報 --> <article class="media"> <div class="media-content">アカウント登録日</div> <div class="media-right"> <strong><%= I18n.l(@user.created_at, format: :full_date) %></strong> </div> </article> <hr class="h-10"> <!-- オンラインステータス --> <article> <div class="media"> <div class="media-content">ステータス</div> <div class="media-right"> <strong><% if @user.status %> オンライン <% else %> オフライン <% end %></strong> </div> </div> </article> </div> </div> </div> <!-- 下部 --> <div class="column is-full"> <div class="card"> <div class="card-content"> <!-- アカウント詳細 --> <article> <div class="media"> <div class="media-content"> <p> <strong>自己紹介</strong> <br> <%= @user.about %> </p> </div> </div> </article> <hr class="h-10"> <!-- 電話番号 --> <article class="media"> <div class="content"> <% if !@user.phone_number.blank? %> <span class="pull-right icon-babu"><i class="far fa-check-circle" style="color:#528fff;"></i></span> 電話番号 <% end %> </div> </article> </div> </div> </div> </div> </div> <!-- 右側 --> <div class="column"> <h1 class="title is-5"><%= @user.full_name %>さんが登録しているお部屋(<%= @rooms.length %>)</h1> <br/> <div class="columns is-multiline"> <!-- 登録したお部屋 --> <% @user.rooms.each do |room| %> <% if room.active? %> <div class="column is-one-third"> <div class="card"> <div class="card-image"> <%= link_to listing_room_path(room) do %> <figure class="image is-4by3"> <%= image_tag room_cover(room) %> </figure> <% end %> </div> <br/> <div class="card-content p-t-5 p-b-5"> <p class="subtitle is-6 m-b-5"><%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %></p> <p class="subtitle is-6 m-b-5"><%= room.address %></p> <!--レビュー --> </div> <footer class="card-footer"> <a class="has-text-danger is-block card-footer-item has-text-right"> <span class="small-title">１泊の宿泊価格</span> <strong><%= number_to_currency(room.price) %></strong> </a> </footer> </div> </div> <% end %> <% end %> </div> <div class="card"> <div class="card-header"> <div class="card-header-title">レビュー</div> </div> <div class="card-content"> <%= render "reviews/guest_list" %> <%= render "reviews/host_list" %> </div> </div> </div> </div> </div> </section> <div class="modal" id="contact-form"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">メッセージを送る</p> <button class="delete toggle-contact" aria-label="close"></button> </header> <section class="modal-card-body"> <div class="columns"> <div class="column is-one-third"> <div class="card" st> <div class="card-content is-horizontal-center is-flex"> <figure class="image is-128x128"> <%= image_tag avatar_url(@user), class: "is-rounded" %> </figure> </div> <div class="card-content"> <hr> <strong>確認しましょう:</strong> <ul class="is-size-7" style="list-style:initial"> <li>宿泊日時</li> <li>宿泊場所</li> <li>設備</li> <li>キャンセルについて</li> </ul> </div> </div> </div> <div class="column"> <%= form_with model: Message.new do |f| %> <%= f.hidden_field :receiver_id, value: @user.id %> <div class="card-content"> <div class="field"> <div class="control"> <%= f.text_area :content, class: "textarea" %> </div> </div> <%= f.submit "メッセージを送る", class: "button is-danger is-pulled-right" %> </div> <% end %> </div> </div> </section> </div> </div> <script> var toggle_modals = $('.toggle-contact'); if (toggle_modals) { toggle_modals.on('click', function(event) { event.stopPropagation(); event.preventDefault(); var form = document.getElementById('contact-form'); form.classList.toggle('is-active'); }); } </script>
ルートの設定をします。
3行目に自動で追加された「get 'messages/create'」の記述は削除して下さい。
記述追加 config\routes.rb
22行目に「post 'messages', to: 'messages#create'」の記述を追加しています。
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'user' get '/your_trips' => 'reservations#your_trips' get '/your_reservations' => 'reservations#your_reservations' get 'search' => 'pages#search' get 'settings/payment', to: 'users#payment', as: 'settings_payment' get 'settings/payout', to: 'users#payout', as: 'settings_payout' post '/users/edit', to: 'users#update' post '/settings/payment', to: 'users#update_payment', as: "update_payment" post 'messages', to: 'messages#create' resources :rooms, except: [:edit] do member do get 'listing' get 'pricing' get 'description' get 'photo_upload' get 'amenities' get 'location' get 'preload' get 'preview' delete :delete_photo post :upload_photo end resources :reservations, only: [:create] end resources :guest_reviews, only: [:create, :destroy] resources :host_reviews, only: [:create, :destroy] resources :reservations, only: [:approve, :decline] do member do post '/approve' => "reservations#approve" post '/decline' => "reservations#decline" end end # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
ブラウザ確認
http://localhost:3000/users/2
自分自身にはメッセージを送ることはできませんので、他のユーザにメッセージを送って確認します。
メッセージを送ります。
メッセージを送ることができました。
↓↓クリックして頂けると励みになります。
