戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク6-4   メッセージ

このタスクについて


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




コマンド
rails g model Conversation sender_id:bigint recipient_id:bigint


コマンド
rails g model Message context:text user:references conversation:references


コマンド マイグレーション
rails db:migrate


app\models\conversation.rb
 
class Conversation < ApplicationRecord 

  belongs_to :sender, foreign_key: :sender_id, class_name: "User" 
  belongs_to :recipient, foreign_key: :recipient_id, class_name: "User" 

  has_many :messages, dependent: :destroy 

  validates :sender_id, :uniqueness => {:scope => :recipient_id} 

  scope :involving, -> (user) { 
    where("conversations.sender_id = ? OR conversations.recipient_id = ?", user.id, user.id) 
  } 
  scope :between, -> (user_A, user_B) { 
    where("(conversations.sender_id = ? AND conversations.recipient_id = ?) OR (conversations.sender_id = ? AND conversations.recipient_id = ?)", user_A, user_B, user_B, user_A) 
  } 
end 



app\models\message.rb
 
class Message < ApplicationRecord 

  belongs_to :user 
  belongs_to :conversation 

  validates_presence_of :context, :conversation_id, :user_id 

  def message_time 
    self.created_at.strftime('%Y年%-m月%-d日 %-H時%-M分') 
  end 
end 



「app\controllers」フォルダに「conversations_controller.rb」ファイルを新規作成してください。


app\controllers\conversations_controller.rb(新規作成したファイル)
 
class ConversationsController < ApplicationController 

    before_action :authenticate_user! 
  
    def index 
      @conversations = Conversation.involving(current_user) 
    end 
  
    def create 
      if Conversation.between(params[:sender_id], params[:recipient_id]).present? 
        @conversation = Conversation.between(params[:sender_id], params[:recipient_id]).first 
      else 
        @conversation = Conversation.create(conversation_params) 
      end 
  
      redirect_to conversation_messages_path(@conversation) 
    end 
  
    private 
  
      def conversation_params 
        params.permit(:sender_id, :recipient_id) 
      end 
  end   



「app\controllers」フォルダに「messages_controller.rb」ファイルを新規作成してください。


app\controllers\messages_controller.rb(新規作成したファイル)
 
class MessagesController < ApplicationController 

    before_action :authenticate_user! 
    before_action :set_conversation 
  
    def index 
      if current_user == @conversation.sender || current_user == @conversation.recipient 
        @other = current_user == @conversation.sender ? @conversation.recipient : @conversation.sender 
        @messages = @conversation.messages.order("created_at DESC") 
      else 
        redirect_to conversations_path, alert: "権限がありません。" 
      end 
    end 
  
    def create 
      @message = @conversation.messages.new(message_params) 
      @messages = @conversation.messages.order("created_at DESC") 
  
      if @message.save 
          redirect_to conversation_messages_path(@conversation) 
      end 
    end 
  
    private 
  
    def set_conversation 
    @conversation = Conversation.find(params[:conversation_id]) 
    end 

    def message_params 
    params.require(:message).permit(:context, :user_id) 
    end 
end 



記述追加 config\routes.rb(54行目)
   resources :conversations, only: [:index, :create]  do 
    resources :messages, only: [:index, :create] 
  end 



config\routes.rb
 
Rails.application.routes.draw do 

  #ルートをpages#homeに設定 
  root 'pages#home' 

  get 'pages/home' 
  get '/your_trips' => 'reservations#your_trips' 
  get '/your_reservations' => 'reservations#your_reservations' 
  get 'search' => 'pages#search' 
  get 'dashboard' => 'dashboards#index' 
  get '/host_calendar' => "calendars#host" 
  get '/payment_method' => "users#payment" 
  get '/payout_method' => "users#payout" 
  get '/notification_settings' => 'settings#edit' 

  post '/add_card' => "users#add_card" 
  post '/notification_settings' => 'settings#update' 

  resources :users, only: [:show] do 
    member do 
      post '/verify_phone_number' => 'users#verify_phone_number' 
      patch '/update_phone_number' => 'users#update_phone_number' 
    end 
  end 

  resources :rooms, except: [:edit] do 
    member do 
      get 'listing' 
      get 'pricing' 
      get 'description' 
      get 'photo_upload' 
      get 'amenities' 
      get 'location' 
      get 'preload' 
      get 'preview' 
    end 
    resources :photos, only: [:create, :destroy] 
    resources :reservations, only: [:create] 
    resources :calendars 
  end 

  resources :guest_reviews, only: [:create, :destroy] 
  resources :host_reviews, only: [:create, :destroy] 
  resources :revenues, only: [:index] 

  resources :reservations, only: [:approve, :decline] do 
    member do 
      post '/approve' => "reservations#approve" 
      post '/decline' => "reservations#decline" 
    end 
  end 

  resources :conversations, only: [:index, :create]  do 
    resources :messages, only: [:index, :create] 
  end 

  devise_for :users, 
  path: '', 
  path_names: {sign_in: 'login', sign_out: 'logout', edit: 'profile', sign_up: 'registration'}, 
  controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} 

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 

end 



「app\views」フォルダに「conversations」フォルダを新規作成して下さい。
作成した「conversations」フォルダに「index.html.erb」ファイルを新規作成します。



app\views\conversations\index.html.erb(新規作成したファイル)
 
<div class="row"> 
  <div class="col-md-12"> 
    <div class="panel panel-default"> 
      <div class="panel-heading">あなたの会話</div> 
      <div class="panel-body"> 
        <div class="container"> 
          <% @conversations.each do |conversation| %> 
              <% other = current_user == conversation.sender ? conversation.recipient : conversation.sender %> 
              <%= link_to conversation_messages_path(conversation), data: { turbolinks: false} do %> 
                  <div class="row conversation"> 
                    <% if conversation.messages.any? %> 
                        <div class="col-md-2"> 
                          <%= image_tag avatar_url(other), class: "img-circle avatar-medium" %> 
                        </div> 
                        <div class="col-md-3" style="white-space: nowrap"> 
                          <%= other.fullname %><br/> 
                          <%= conversation.messages.last.message_time %> 
                        </div> 
                        <div class="col-md-7"> 
                          <%= conversation.messages.last.context %> 
                        </div> 
                    <% end %> 
                  </div> 
              <% end %> 
          <% end %> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 



「app\views」フォルダに「messages」フォルダを新規作成してください。
作成した「messages」フォルダに「index.html.erb」ファイルを新規作成します。



app\views\messages\index.html.erb(新規作成したファイル)
 
<div class="row"> 
  <div class="col-md-3 text-center"> 
    <%= image_tag avatar_url(@other), class: "img-circle avatar-medium" %> 
    <strong><%= @other.fullname %></strong> 
    <%= link_to "プロフィールを見る", @other, class: "btn btn-default" %> 
  </div> 
  <div class="col-md-9"> 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
         <%= @other.fullname %> さんとの会話内容 
        <input id="conversation_id" type="hidden" value="<%= @conversation.id %>"> 
      </div> 
      <div class="panel-body"> 
        <div class="container text-center"> 
          <%= form_for [@conversation, @conversation.messages.new], remote: true do |f| %> 
              <div class="form-group"> 
                <%= f.text_field :context, placeholder: "メッセージを入力してください。", class: "form-control" %> 
              </div> 
              <%= f.hidden_field :user_id, value: current_user.id %> 
              <div> 
                <%= f.submit "メッセージを送る", class: "btn btn-normal" %> 
              </div> 
          <% end %> 
        </div> 
      </div> 
    </div> 
    <div id="chat"> 
      <%= render @messages %> 
    </div> 
  </div> 
</div> 



「app\views\messages」フォルダに「_message.html.erb」ファイルを新規作成してください。


app\views\messages\_message.html.erb(新規作成したファイル)
 <div class="panel"> 
  <div class="panel-body"> 
    <%= image_tag message.user.gravatar_url, class: "img-circle avatar-medium" %> 
    <strong><%= message.user.fullname %></strong> 
    <span class="pull-right"><%= message.message_time %></span> 
    <br/> 
    <div class="row-space-2"> 
      <%= message.context %> 
    </div> 
  </div> 
</div> 



記述追加 app\views\users\show.html.erb(5行目)
       <% if current_user && current_user != @user %> 
          <%= link_to "メッセージを送る", conversations_path(sender_id: current_user.id, recipient_id: @user.id), method: :post, class: "btn btn-default" %> 
      <% end %> 



app\views\users\show.html.erb
 
<div class="row"> 
  <div class="col-md-3"> 
    <div class="center"> 
      <%= image_tag @user.gravatar_url, class: "avatar-full" %> 
      <% if current_user && current_user != @user %> 
          <%= link_to "メッセージを送る", conversations_path(sender_id: current_user.id, recipient_id: @user.id), method: :post, class: "btn btn-default" %> 
      <% end %> 
    </div> 
    <div class="panel panel-default"> 
      <div class="panel-heading" style="text-align: center;"><%= @user.fullname %></div> 
      <br/> 
      <div class="center"> 
        <%= @user.description %> 
       </div> 
       <hr/> 
      <div class="panel-body"> 
        <ul class="sidebar-list"> 
          <% if @user.confirmation_token %> 
            <li>Emailアドレス<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li> 
          <% end %> 
          <% if @user.phone_verified %> 
            <li>電話番号<span class="pull-right icon-babu"><i class="fa fa-check-circle-o"></i></span></li> 
          <% end %> 
        </ul> 
      </div> 
    </div> 
  </div> 
  <div class="col-md-9"> 
 
    <br/> 
    <h4><%= @user.fullname %>さんが登録しているお部屋(<%= @rooms.length %>)</h4><br/> 
    <div class="row"> 
      <%= render partial: "rooms/rooms_list", locals: {rooms: @rooms} %> 
    </div> 
    <br/> 
    <h4>ゲストからのレビュー (<%= @guest_reviews.count %>)</h4> 
    <div class="row"> 
      <%= render "reviews/guest_list" %> 
    </div> 
    <br/> 
    <h4>ホストからのレビュー (<%= @host_reviews.count %>)</h4> 
    <div class="row"> 
      <%= render "reviews/host_list" %> 
    </div> 
    <br/> 
  </div> 
</div> 



ブラウザ確認
http://localhost:3000/users/4


ユーザプロフィールに「メッセージを送る」ボタンが出ます。


メッセージを送る



メッセージを入力します。


メッセージを入力



メッセージが表示されます。


メッセージが表示される






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

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

民泊サイトの構築 Rails5.0

2,000円

民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約、フルカレンダーによる部屋管理ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装、電話番号認証の実装方法解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 136