戻る

Rails6.0


動画学習サイトの構築 Rails6.0

  (0)
2,000円

タスク7-4   会話

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




会話表示できるようにします。


「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
61行目に「<%= 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> 




この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

動画学習サイトの構築 Rails6.0

2,000円

Rails6.0で作成しています。
動画で学べるサイトを構築するプロジェクトです。
プロジェクトを登録し、そのプロジェクトに動画を登録できます。
プロジェクトはクレジットカードで購入でき、購入後すぐに動画を見ることができます。
写真の複数アップロード、レビュー機能の実装、Google認証、アマゾンS3の利用方法も解説。
管理ダッシュボードtrestleの実装、Gメールの設定、 HEROKUへのデプロイ方法を解説。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
フルコードのダウンロード可能。

タスク数: 128