[40] メッセージと会話 | コントローラとビュー << [ホームに戻る] >> [42] リアルタイムメッセージ
会話表示できるようにします。
「app\controllers」フォルダに「conversations_controller.rb」ファイルを新規作成して下さい。
app\controllers\conversations_controller.rb(新規作成したファイル)
class ConversationsController < ApplicationController before_action :get_conversations def list end def show @user = User.find(params[:id]) @conversation = Conversation.where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)", current_user.id, params[:id], params[:id], current_user.id ).first if !@conversation.present? redirect_to conversations_path, alert: "無効です" else @messages = Message.where(conversation_id: @conversation.id) end end private def get_conversations @conversations = Conversation .where("sender_id = ? OR receiver_id = ?", current_user.id, current_user.id) .order(updated_at: :desc) end end
ルートの設定をします。
「config\routes.rb」ファイルに以下の記述を追加します。
記述追加 config\routes.rb(16,17行目)
get '/conversations', to: 'conversations#list', as: "conversations" get '/conversations/:id', to: 'conversations#show', as: "conversation_detail"
config\routes.rb
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: 'users' get '/myprojects' => 'project#list' get 'settings/payment', to: 'users#payment', as: 'settings_payment' get '/conversations', to: 'conversations#list', as: "conversations" get '/conversations/:id', to: 'conversations#show', as: "conversation_detail" post '/users/edit', to: 'users#update' post '/free' => 'charge#free' post '/settings/payment', to: 'users#update_payment', as: "update_payment" post '/reviews', to: 'reviews#create' post 'messages', to: 'messages#create' resources :project do resources :task, only: [:show] resources :reviews, only: [:create, :destroy] end # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
ナビゲーションバーにリンクを追加します。
記述追加 app\views\shared\_navbar.html.erb
57行目に「<%= link_to 'メッセージの確認', conversations_path, class: "navbar-item", data: { turbolinks: false} %>」の記述を追加しています。
<nav class="navbar is-link" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトGakushuu6</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-info" %> <%= link_to "ログイン", new_user_session_path, class: "button is-light" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <a class="navbar-item"><%= current_user.full_name %> <i class="far fa-caret-square-down"></i> </a> <div class="navbar-dropdown"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar has-shadow" style="z-index: 5;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <%= link_to "マイプロジェクト", myprojects_path, class: "navbar-item" %> <%= link_to 'メッセージの確認', conversations_path, class: "navbar-item", data: { turbolinks: false} %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">メニュー</a> <div class="navbar-dropdown"> <%= link_to 'クレジットカード登録', settings_payment_path, class: "navbar-item", data: { turbolinks: false} %> <hr class="navbar-divider"> <%= link_to "プロジェクト", project_index_path, class: "navbar-item" %> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替えます $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
「app\views」フォルダに「conversations」フォルダを新規作成して下さい。
作成した「conversations」フォルダに「list.html.erb」ファイルを新規作成します。
app\views\conversations\list.html.erb(新規作成したファイル)
<section class="section"> <div class="columns"> <div class="column is-4"> <nav class="menu"> <p class="menu-label"> 全ての会話 </p> <ul class="menu-list"> <% @conversations.each do |c| %> <% @client = c.sender_id == current_user.id ? c.receiver : c.sender %> <%= link_to conversation_detail_path(@client.id) do %> <li> <article class="message"> <div class="message-body"> <div class="media"> <div class="media-left"> <figure class="image is-32x32 m-r-5 avatar online"> <%= image_tag avatar_url(@client), class: "is-rounded" %> </figure> </div> <div class="media-content"> <p class="title is-6"><%= @client.full_name %></p> <p class="subtitle is-7"> <%= (c.last_message.user_id == current_user.id ? "あなた: #{c.last_message.content}" : c.last_message.content).truncate(20) %> </p> </div> <div class="media-right"> <p class="subtitle is-7"><%= I18n.l(c.last_message.updated_at, format: :full_date) %></p> </div> </div> </div> </article> </li> <% end %> <% end %> </ul> </nav> </div> <div class="column is-8"> <section class="hero"> <div class="hero-body"> <p class="subtitle has-text-centered"> 会話を選択して下さい </p> </div> </section> </div> </div> </section>
「app\views\conversations」フォルダに「show.html.erb」ファイル新規作成してください。
app\views\conversations\show.html.erb(新規作成したファイル)
<section class="section" data-channel-subscribe="conversation" data-conversation-id="<%= @conversation.id %>" data-user-id="<%= current_user.id %>"> <div class="columns"> <div class="column is-4"> <nav class="menu"> <p class="menu-label"> 全ての会話 </p> <ul class="menu-list"> <% @conversations.each do |c| %> <% @client = c.sender_id == current_user.id ? c.receiver : c.sender %> <%= link_to conversation_detail_path(@client.id) do %> <li> <article class="message <%= 'is-primary' if c.id == @conversation.id %>"> <div class="message-body"> <div class="media"> <div class="media-left"> <figure class="image is-32x32 m-r-5 avatar online"> <%= image_tag avatar_url(@client), class: "is-rounded" %> </figure> </div> <div class="media-content"> <p class="title is-6"><%= @client.full_name %></p> <p class="subtitle is-7"> <%= (c.last_message.user_id == current_user.id ? "あなた: #{c.last_message.content}" : c.last_message.content).truncate(20) %> </p> </div> <div class="media-right"> <p class="subtitle is-7"><%= I18n.l(c.last_message.updated_at, format: :full_date) %></p> </div> </div> </div> </article> </li> <% end %> <% end %> </ul> </nav> </div> <div class="column is-8"> <!-- メッセージを受けた人 --> <article class="media"> <div class="media-left"> <figure class="image is-64x64"> <%= image_tag avatar_url(@user), class: "is-rounded" %> </figure> </div> <div class="media-content"> <div class="content"> <h3><%= @user.full_name %></h3> </div> </div> </article> <hr> <!-- メッセージ --> <div class="columns is-multiline" id="message_list"> <% @messages.each do |m| %> <%= render 'conversations/message', m: m, user: current_user %> <% end %> </div> <!-- メッセージを送る --> <div class="column m-t-25"> <%= form_with model: Message.new, id: "new_message" do |f| %> <%= f.hidden_field :receiver_id, value: @user.id %> <div class="field has-addons"> <div class="control" style="width: 100%"> <%= f.text_field :content, class: "input", placeholder: "メッセージを入力してください" %> </div> <div class="control"> <%= f.submit "メッセージを送る", class: "button is-primary" %> </div> </div> <% end %> </div> </div> </div> </section>
「app\views\conversations」フォルダに「_message.html.erb」ファイル新規作成してください。
app\views\conversations\_message.html.erb(新規作成したファイル)
<% if m.user.id == user.id %> <div class="column is-7 is-offset-5"> <p class="notification is-primary conversation-message"> <%= m.content %> </p> <span class="subtitle is-7"><%= time_ago_in_words(m.created_at) %></span> </div> <% else %> <div class="column is-7"> <article class="media"> <div class="media-left"> <figure class="image is-32x32"> <%= image_tag avatar_url(m.user), class: "is-rounded" %> </figure> </div> <div class="media-content"> <p class="notification conversation-message"> <%= m.content %> </p> <span class="subtitle is-7"><%= time_ago_in_words(m.created_at) %></span> </div> </article> </div> <% end %>
ブラウザ確認
http://localhost:3000/conversations
会話形式でメッセージを送ることができます。
↓↓クリックして頂けると励みになります。
