チャットルームを作成する②:設定一覧

チャットルームを作成する②

Coffeecup header4

0 : この章の目的

 「チャットルームを作成する②」の設定一覧の確認をする


1 : 設定一覧

チャットルームを作成する②」では、「rooms」データベースのページを作成しました。

具体的な設定内容は、
  • routes.rb(7つのページの設定)
  • createページ
  • Chrome messages users 1 start chat
  • showページ
  • Chrome messages rooms 1 no messages
  • indexページ
  • Chrome messages rooms
  • editページ
  • Chrome messages rooms 1 edit
  • updateページ
  • Chrome messages rooms 1 update
の6つになります。

ここでその内容をまとめます。

  • routes.rb(7つのページの設定)

  • 「rooms」データベースでは上に書いた
    • create
    • show
    • index
    • edit
    • update
    の5つのページを使います。

    なので7つのページの設定を行うconfig > migrate > routes.rbを下のような内容に変更します。

     routes.rb(8行目を追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ... 63 64 Rails.application.routes.draw do devise_for :users resources :welcome, :only => [:index] root "welcome#index" resources :users, :only => [:show, :index, :edit, :update] resources :messages, :only => [:create] resources :rooms, :only => [:create, :show, :index, :edit, :update] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

    ここまでで設定ができました。

  • 「rooms」ページ

  • 次はrooms」ページを作ってみます。

    まずはページを作るための、データ操作とページ表示の設定ファイルを作成します。

     ターミナル
     Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
    1 rails g controller rooms

    これで作成される
    • データ操作のファイル「app > controllers > rooms_controller.rb
    • ページ表示のフォルダ「app > views > rooms
    に内容を設定します。

     ただ「rooms」データの作成だけは、「users」データベースの「show」ページを使用するので、上の2つのファイルに加えて
    • app > controllers > users_controller.rb
    • app > views > users > show.html.erb
    の内容を変更します。
     設定内容は下のようになります。

     まずはデータ操作のファイルの設定から

     rooms_controller.rb
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 class RoomsController < ApplicationController before_action :authenticate_user!, :only => [:create, :show, :index, :edit, :update] def create @room = Room.create redirect_to "/rooms/#{@room.id}" flash[:notice] = "チャットを作成しました!" end def show @room = Room.find(params[:id]) @messages = @room.messages @message = Message.new end def index @rooms = Room.all end def edit @room = Room.find(params[:id]) end def update @room = Room.find(params[:id]) @room.update(params.require(:room).permit(:name, :explain)) flash[:notice] = "チャット情報が変更されました" redirect_to :back end end

     users_controller.rb(7〜10行目を追加)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 class UsersController < ApplicationController before_action :authenticate_user!, :only => [:show, :index, :edit, :update] def show @user = User.find(params[:id]) if @user.id == current_user.id else @room = Room.new end end # 省略

     次にページ設定を見てみます。

     まずは、usersページから

     show.html.erb(「app > views > users」フォルダ)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class="row"> <div class="col-xs-6"> <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <br> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">ユーザー情報を編集する</a></p> <% else %> <%= form_for @room do |f| %> <%= f.submit "チャットを始める", :class => "btn btn-warning" %> <% end %> <% end %> </div> </div> <hr> <p><a href="/users" class="btn btn-primary">ユーザー一覧に戻る</a></p>

     次に、roomsページ

     show.html.erb(「app > views > rooms」フォルダ)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <br> <div class="row"> <div class="col-xs-3 text-center"> <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">情報を編集する</a> </div> <div class="col-xs-9"> <% if @messages.present? %> <% @messages.each do |m| %> <% if m.user_id == current_user.id %> <h4 class="text-right"> <p class="alert alert-success"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %>さん</a></strong></small> </p> </h4> <% else %> <h4 class="text-left"> <p class="alert alert-info"> <%= m.content %> <br><br> <small><strong><a href="/users/<%= m.user_id %>"><%= m.user.family_name %> <%= m.user.first_name %>さん</a></strong></small> </p> </h4> <% end %> <% end %> <% else %> <br> <h3 class="text-center">メッセージはまだありません</h3> <br> <% end %> <hr> <%= form_for @message do |f| %> <%= f.text_field :content, :class => "form-control myform", :placeholder => "メッセージを入力して下さい" %> <%= f.hidden_field :room_id, :value => @room.id %> <br> <div class="text-center"> <%= f.submit "投稿する", :class => "btn btn-primary" %> </div> <% end %> </div> </div>

     index.html.erb(「app > views > rooms」フォルダ) ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 <h1>チャット一覧</h1> <hr> <% @rooms.each do |r| %> <a href="/rooms/<%= r.id %>"><%= r.name %></a> <hr> <% end %> <p><a href="/users/<%= current_user.id %>" class="btn btn-primary"><%= current_user.family_name %> <%= current_user.first_name %>さんの情報に戻る</a></p> <p><a href="/" class="btn btn-info">トップに戻る</a></p>

     edit.html.erb(「app > views > rooms」フォルダ)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h2>チャット情報を編集する</h2> <hr> <%= form_for @room do |f| %> <%= f.label :name %> <%= f.text_field :name, :class => "form-control my-form", :placeholder => "名前を入力して下さい" %> <br> <%= f.label :explain %> <%= f.text_area :explain, :class => "form-control my-form", :size => "30x10", :placeholder => "説明を入力して下さい" %> <br> <%= f.submit "変更する", :class => "btn btn-success" %> <% end %> <hr> <p><a href="/rooms/<%= @room.id %>" class="btn btn-primary">チャット情報に戻る</a></p> <p><a href="/" class="btn btn-info">トップに戻る</a></p>

     最後に「messages」データベース「rooms」データベース間の設定を簡単にするための設定

    ここではmessages」データベース

    messages
    id content user_id room_id created_at updated_at
    1 おはよう! 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43
    のようになっていて、
    rooms」データが複数の「messages」データを持つことができるので、

    1 @messages = @room.messages

    1 @room = @message.room

    のような設定をできるようにします。
    ※ 詳細はこちらを参考

     message.rb(「app > models」フォルダ)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 6 class Message < ActiveRecord::Base belongs_to :user belongs_to :room end

     room.rb(「app > models」フォルダ)
    ※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
     Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


    1 2 3 4 5 class Room < ActiveRecord::Base has_many :messages end

    ここまででrooms」データベースのページの設定が終わりました。