4 : チャットルームの作成②

前の章 : チャットルームの作成①

Coffeecup header4 この章は、前章の「チャットルームの作成①」の続きになります。
前章の内容がまだ終わっていない方は、こちらからお願いします。

2 : チャットルームを作る

チャットルームの作成ができるようにしましょう!
チャットルームを作成は、 Chrome messages users 1 start chatチャットを始める をクリックすると、

  • 新しい「rooms」データベースの作成

  • rooms
    id name explain created_at updated_at
    1 新規チャット 説明を入力 2016-04-12 20:30:21 2016-04-12 20:30:21
     チャットルーム「1」を作成

  • どの会員がどのチャットルームにいるかの情報「entries」データベースの作成

  • entries
    id room_id user_id created_at updated_at
    1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
    id room_id user_id created_at updated_at
    1 1 2 2016-04-12 20:30:21 2016-04-12 20:30:21
     会員「1」と「2」が、チャットルーム「1」に所属している情報を作成

の2つを行い、 Chrome messages rooms 1 no messages の表示をします。

このページは0.0.0.0:3000/rooms/1で、
「rooms」データベースの「id」が「1」のデータを表示させる「show」のページになります。

右側で、messages」データベースのデータの表示
左側で、rooms」データベースの表示と「entries」データベースにある会員の情報の表示

をしています。
このような流れで、
「users」データベースの「show」ページで、
  • 「rooms」データの作成(create)
  • 「entries」データの作成(create)
Chrome messages users 1 start chat を、「rooms」データベースの「show」ページで、
  • 「rooms」データの表示(show)
  • 「entries」データの表示
Chrome messages rooms 1 no messages をします。
この「rooms」データベースの
  • indexページ

  • 「rooms」データの全表示 Chrome messages rooms
  • edit

  • 「rooms」データの変更を記入 Chrome messages rooms 1 edit
  • update

  • 「rooms」データの変更 Chrome messages rooms 1 update
の表示をします。
データベースごとでまとめると、

 「rooms」データベース
  • create(usersページの「show」で行う)
  • show
  • index
  • edit
  • update
 「entries」データベース
  • create(usersページの「show」で行う)
  • show(roomsページの「show」で行う)
をします。

 まずは「rooms」データベースから設定していきましょう!


 ① : 「rooms」データベース


 「rooms」データベースのデータ操作・ページ表示をする前に、まずは前章で作った伝言板を削除しましょう!

伝言板は、
  • データ操作の設定
  • ページ表示の設定
の2つがあるのでそれぞれの設定を消していきます。

 まずデータ操作からやってみます。

app > controllers > users_controller.rbからmessagesデータベースの情報を削除します。
※ 内容はこちらを参考にして下さい

 users_controller.rb(7〜8行目)
7 8 @messages = Message.where(:receiver => @user.id) @message = Message.new

を削除して内容を下のように変更しましょう!

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


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

 次にページ表示をやってみましょう!

app > views > users > show.html.erbからmessages」データの表示・入力欄登録ボタンの作成をしている表示の削除をします。
※ 「messages」データの表示はこちらを、入力欄登録ボタンの表示はこちらを参考 Chrome messages users 1 owner after posts なのでここではapp > views > users > show.html.erb

 show.html.erb(5〜19行目)
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <hr> <h4>伝言板</h4> <% @messages.each do |m| %> <hr> <h5><%= m.id %> : <a href="/users/<%= m.user.id %>"><%= m.user.family_name %><%= m.user.first_name %>さん</a>の投稿</h5> <p><%= m.content %></p> <% end %> <%= form_for @message do |f| %> <%= f.text_area :content, :class => "form-control my-form", :placeholder => "なにか伝言を残そう!" %> <%= f.hidden_field :receiver, :value => @user.id %> <br> <%= f.submit "登録する", :class => "btn btn-warning" %> <% end %>

を削除して、内容を下のように変更しましょう!

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


1 2 3 4 5 6 7 8 9 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <hr> <p><a href="/users" class="btn btn-primary">ユーザー一覧に戻る</a></p> <% if @user.id == current_user.id %> <p><a href="/users/<%= @user.id %>/edit" class="btn btn-success">ユーザー情報を編集する</a> <% end %>

ここまでで、前章で作った設定は全て削除しました!

 ここからチャットルームの設定を始めてみましょう!

ページの作成には、
  • 7つのページの設定(詳細はこちらを参考)
  • データ操作の設定(詳細はこちらを参考)
  • ページ表示の設定(詳細はこちらを参考)
の3つをする必要があります。

今回はrooms」データベースを使ったページ作成を上の手順でやってみます。

まずは7つのページの設定からやってみましょう。


 ⑴ : routes.rb


 「7つのページの設定」やってみましょう!
「7つのページの設定」はconfig > routes.rbに設定します。

今回は「rooms」データベースの
の5つを使ったページを作ってみます

ではconfig > 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」データベースの
  • create
  • show
  • index
  • edit
  • update
の5つのページを使うことを設定できました。

 次は、「データ操作の設定」と「ページ表示の設定」をやってみましょう!

ここではページ毎に設定をするので、まずは「create」から始めてみたいと思います。


 設定した内容はこちらにまとめてあります。


 ⑵ : create


 まずは「rooms」データベースの「create」ページから始めてみたいと思います!
まずはrooms」データベースの「データ操作」を設定するファイルと「ページ表示」をする設定フォルダを作成しましょう!
ターミナルで下の入力をしましょう!

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

この入力でrooms」データベース
  • データ操作の設定ファイル「app > controllers > rooms_controller.rb
  • ページ表示の設定フォルダ「app > views > rooms
の2つを作成しました。
まずは作成したファイル・フォルダの、それぞれに最初のなにもない設定を加えます!

 rooms_controller.rb(3〜18行目を追加)
※ 半角英数字で入力。変更が完了したら「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 class RoomsController < ApplicationController before_action :authenticate_user!, :only => [:create, :show, :index, :edit, :update] def create end def show end def index end def edit end def update end end

この設定で、会員の制限なにもないデータ操作を設定できました。
※ 会員の制限の内容はこちらを参考にして下さい

次はページ設定ファイルを作成します。
app > views > rooms」に、
  • show.html.erb
  • index.html.erb
  • edit.html
を保存しましょう!
※ 保存の方法はこちらを参考にして下さい

「create」は「users」データベースの「show」ページに、「update」は「edit」ページに移動させるので、ファイルを保存する必要はありません。
 では「create」ページの設定をやってみましょう!

createページの設定では、
  • 「users」データベースのデータ操作ファイル「users_controller.rb」に

  • 新しいrooms」データの作成

    1 @room = Room.new

  • 「users」データーベースの表示設定ファイル「show.html.erb

  • 登録ボタン チャットを始める の表示

    1 2 3 <%= form_for @room do |f| %> <%= f.submit "チャットを始める", :class => "btn btn-warning" %> <% end %>
    Chrome messages users 1 start chat
  • 「rooms」データベースのデータ操作設定ファイル「rooms_controller.rb

  • 新しいroomsデータベースの保存

    1 @room = Room.create

の3つの内容を設定します。

一つ一つやってみます。
 まずは「users_controller.rb」に設定を加えます。

app > controllers > users_controller.rbを開いて、内容を下のように変更しましょう!

 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」ページの会員が、ログインしている会員と同じでない時に、
新しいroomsデータベースのデータの標識@roomを作成しています。
※ 「if/else」はこちらを参考にして下さい

この@roomを使って、 チャットを作成する ボタンを作成します。
 次に「users」データベースの「show.html.erb」に設定を加えましょう!

app > views > users > show.html.erbを開いて、下のように設定を変更しましょう!

 show.html.erb
※ 半角英数字で入力。変更が完了したら「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>

内容を説明しましょう!
 まずは、10〜13行目

8 9 10 11 12 13 14 <% 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 %>

ここでは「users」ページの会員情報とログインしている会員が一致するかどうかで、
チャットを始める の表示非表示をしています。
※ 「if/else」の内容はこちらを参考にして下さい

ここでは入力欄はありませんが、これでもデータの作成はできます。
先ほど初期値に設定したので、ボタンを押せば「name」に「新規チャット」「explain」に「説明を入力」が入ったデータが保存されます。
※ 初期値の設定はこちらを参考にして下さい
 次に、1、2、15、16行目

中身だけを取り出すと、

1 2 ... 15 16 <div class="row"> <div class="col-xs-6"> 内容 </div> </div>

のようになっていると思います。
このrow」と「col-xs-6は、画面の横の長さのを決めるBootstrapの設定になります。

rowで囲まれた部分の横の長さを12として、その中身にcol-xs-数字の設定を追加することによって分割して表示をします。
今回はcol-xs-6と、ちょうど12の半分の長さになっているので、 Chrome messages users 1 start chat 半分の長さで内容が表示されます。

ユーザー情報

の下の線が短くなっていることから分かると思います。
同じようにして画面に

内容1(長さ3)

内容2(長さ9)

のような表示をさせたい場合は

1 2 3 4 5 6 7 8 <div class="row"> <div class="col-xs-3"> 内容1 </div> <div class="col-xs-9"> 内容2 </div> </div>

のように設定します。
 最後に「rooms_controller.rb」に「rooms」データを作成する設定を加えます。

app > controllers > rooms_controller.rbを開いて、内容を下のように変更しましょう!

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 end # 以下省略

内容を説明しましょう!
 まずは6行目

6 @room = Room.create

ここでは、id」「created_at」「updated_at」以外のデータが入っていない「rooms」データを作成しています。
※ 内容はこちらを参考にして下さい
 次に7行目

7 redirect_to "/rooms/#{@room.id}"

ここでは、作成した「rooms」データへのページ移動をしています。
作成した@room」の「id」の「rooms」データベースの「show」ページに移動しています。
※ 内容はこちらの「update」ページを参考にして下さい

ここではページの移動をするので、create.html.erb」を作成する必要はありません。
 最後に8行目

8 flash[:notice] = "チャットを作成しました!"

ここでは

チャットを作成しました!

を移動した先のページで表示させています。
※ 内容はこちらを参考にして下さい

ここまでで「rooms」データベースの「create」の設定が完了しました。

 次は「show」ページの設定をしてみましょう!  設定した内容はこちらにまとめてあります。



 rooms」データベースの「show」ページから作ってみます!
showページの設定では、
  • rooms_controller.rb」ファイルでのデータ操作

  •  表示する「rooms」データの選択

    1 @room = Room.find(params[:id])

     表示する「messages」データの選択・新しい「messages」データの作成

    1 2 @messages = @room.messages @message = Message.new

  • 「rooms」データベースの「show」ページの設定

  • ここでは Chrome messages rooms 1 no messages no entry のように

     左側に「rooms」データの表示
     右側に「messages」データの表示

    を設定してみます。

この2つを設定してみましょう!
 まずは「rooms_controller.rb」に設定を加えてみます。

app > controllers > rooms_controller.rbに下の設定を追加しましょう!

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


11 12 13 14 15 def show @room = Room.find(params[:id]) @messages = @room.messages @message = Message.new end

内容についてはあまり問題ないと思うので、13行目だけについて追加の説明します
今回は、一つの「rooms」データに複数の「messages」データを登録されるようになっています。

rooms
id name explain created_at updated_at
1 新規チャット 説明を入力 2016-04-12 20:30:21 2016-04-12 20:30:21
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
id content user_id room_id created_at updated_at
2 宿題やった? 2 1 2016-04-12 20:33:43 2016-04-12 20:33:43
id content user_id room_id created_at updated_at
3 まだやってない 1 1 2016-04-12 20:33:43 2016-04-12 20:33:43

今回は片方のデータが複数の別のデータを持っているときの設定を適用させて、

13 @messages = @room.messages

を使っています。
ここでは、「@room」の「id」と同じ「room_id」を持っている「messages」データベースを選択しています。
※ 詳細はこちらを参考にして下さい
この設定を適用させるために、
  • app > models > message.rb
  • app > models > room.rb
に下の内容を加えます。
※ 詳細はこちらを参考にして下さい

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


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

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


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

これで、

 「room」データにある「messages」データの選択

1 @messages = @room.messages

 「message」データベースの所属する「room」データの選択

1 @room = @message.room

ができるようになりました。

ここまでで、
  • 「rooms」データ「@room
  • ページの「messages」データ「@messages
  • 新しい「messages」データ「@message
の設定できました。次はこれらを表示させてみます!
Chrome messages rooms 1 no messages no entry
 次は、「show」ページの表示を設定してみます

今回は、 Chrome messages rooms 1 no messages no entry のように右左の表示設定になるので、

1 2 3 4 5 6 7 8 <div class="row"> <div class="col-xs-3"> 内容1 </div> <div class="col-xs-9"> 内容2 </div> </div>

を使って

内容1(長さ3)

内容2(長さ9)

の設定を行います。
※ 内容の説明はこちらを参考にして下さい

 まずは左側の「@room」の表示をやってみます。

app > views > rooms > show.html.erbを開いて、内容を変更して下さい。

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


1 2 3 4 5 6 7 8 9 10 11 <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"> </div> </div>

内容の説明をします。
ここでは

1 <div class="col-xs-3 text-center">

に囲まれた

1 2 3 4 <h4><%= @room.name %></h4> <h4><small><%= @room.explain %></small></h4> <hr> <a href="/rooms/<%= @room.id %>/edit" class="btn btn-success">情報を編集する</a>

の部分を「長さ3」として左側に表示させる設定をしています。

中では、
  • 「@room」の「name」「explain」の表示
  • 「rooms」データベースの「edit」ページへの移動
をしています。
 ここまでできたら、実際にできたかを確認しましょう!

まずは会員データを二つ作成して、
「id」が「1」の方の会員で、0.0.0.0:3000/users/2を開いてみましょう!
 Windowsをご利用の方は、localhost:3000/users/2を開いて下さい。
※ ターミナルで「rails s」を入力して、サーバーを立ち上げてからやってみましょう! Chrome messages users 1 start chat 表示されたら チャットを作成する をクリックしてみましょう! Chrome messages rooms 1 left 0.0.0.0:3000/rooms/1が上のように表示されたでしょうか?
 次は右側の表示を設定してみましょう!

 ここでやることは2つあります。 このような感じで、 Chrome messages rooms 1 no messages no entry Chrome messages rooms 1 no image no entries このようなページを表示してみます。
 まずは「@messages」の表示からやってみます。

app > views > rooms > show.html.erbを開いて、下のように内容を変更してみましょう!

 show.html.erb(10〜34行目を追加)
※ 半角英数字で入力。変更が完了したら「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 <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 %> </div> </div>

内容の説明をします。
 ここでは2つの「if」を使った条件分岐があります。

10 <% if @messages.present? %>



12 <% if m.user_id == current_user.id %>

です。
 1つ目の

10 <% if @messages.present? %>

では「@messages」があるかないかを判定しています。
もしなければ、 Chrome messages rooms 1 no messages no entry を表示し、もしあれば、 Chrome messages rooms 1 no image no entries を表示させています。

このようにあるデータがあるかどうかを判定するには、

1 <% if データ.present? %>

を使って判定します。

 では、「@rooms」があるかどうかを判定するにはどのような設定をすればいいでしょうか?


1 <% if @rooms.present? %>

 2つ目の

1 <% if m.user_id == current_user.id %>

では、

11 <% @messages.each do |m| %>

で分解したデータm」の「user_idと、
ログインしている会員current_user」の「idが一致するかを判定しています。

この条件分岐で、
現在ログインしている会員「current_user」が「m」のメッセージを投稿したかどうかを判定しています。

  • 一致していれば(ログインしている会員のメッセージなら)、

  • メッセージ
    名前


  • 一致していなければ(別の会員のメッセージなら)、

  • メッセージ
    名前

を表示させています。

この2つの条件分岐で、 Chrome messages rooms 1 no messages no entry Chrome messages rooms 1 no image no entries を表示させています。
 細かい中身の説明をします。

 まず13〜19行目の設定は、
  • 「@messages」があり
  • 「m.user_id」と「current_user.id」が一致
する場合に表示され、


13 14 15 16 17 18 19 <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>

を表示させています。

Bootstrapの設定にある
  • 文字を右に表示させる「text-right
  • 文字に色をつけて表示する「alert alert-success

  • メッセージ
    名前

を使い、
  • 「メッセージ(content)」
  • 「名字(family_name)」
  • 「名前(first_name)」
を表示させています。

 21〜27行目の設定は、
  • 「@messages」があり
  • 「m.user_id」と「current_user.id」が一致しない
場合に表示され、


1 2 3 4 5 6 7 <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>

を表示させています。

Bootstrapの設定にある
  • 文字を左に表示させる「text-left
  • 文字に色をつけて表示する「alert alert-info

  • メッセージ
    名前

を使い、
  • 「メッセージ(content)」
  • 「名字(family_name)」
  • 「名前(first_name)」
を表示させています。

  31〜33行目の設定は、
  • 「@messages」がない
場合に表示され、


1 2 3 <br> <h3 class="text-center">メッセージはまだありません</h3> <br>

メッセージはまだありません

を表示しています。

ここまでで「@messages」の表示はできました。
次は「@message」を使った入力欄の表示を設定してみます。

 次は「@message」を使った入力欄の表示をしてみます。

app > views > rooms > show.html.erbを開いて、内容を変更してみましょう!

 show.html.erb(35〜43行目を追加)
※ 半角英数字で入力。変更が完了したら「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>

内容は分かりやすいと思います。

1 @message = Message.new

を使って、




を表示させています。
ここでは、

37 38 <%= f.text_field :content, :class => "form-control myform", :placeholder => "メッセージを入力して下さい" %> <%= f.hidden_field :room_id, :value => @room.id %>

のようにcontentroom_idのデータを送信しています。

ページが送信してきたデータをもとにデータを作るmessages_controller.rbは、
※ 変更内容はこちらを参考

 messages_controller.rb
5 6 7 8 def create @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) redirect_to :back end

のように
  • 「content」
  • 「room_id」
  • 「user_id」
の変更ができるようにし、
「user_id」には「current_user」の「id」が入るようになっています。

このような流れで 投稿する をクリックすると、

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
のようなmessagesデータが作成されます。
一回rails sで動かしたサーバーを「Command」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/rooms/1」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/rooms/1」を開いてみて下さい。 Chrome messages rooms 1 no messages no entry 表示されたら、メッセージを投稿してみましょう! Chrome messages rooms 1 no image no entries 上手くいったでしょうか?

 次は「index」ページの設定をやってみましょう!  設定した内容はこちらにまとめてあります。



 rooms」データベースの「index」ページを作ってみます! Chrome messages rooms
ページを作るには、
  • データ操作(rooms_controller.rb)
  • ページ表示
の2つをやりましたね。

 まずはデータ操作からやってみましょう!

app > controllers > rooms_controller.rbを開いて、内容を下のように変更してみましょう!

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


18 19 20 def index @rooms = Room.all end

ここで設定した@roomsのデータを表示させます。
ここでは

19 @rooms = Room.all

で、とりあえずroomsデータを全て選択しましたが、
後でentriesデータベースを使って、current_userが所属しているrooms」データを選択します。

entries
id room_id user_id created_at updated_at
1 1 1 2016-04-12 20:30:21 2016-04-12 20:30:21
1 @entries = current_user.entries

この@entriesからcurrent_userが所属しているrooms」データを選択していきます。
 次にページ表示をしてみます。

app > views > rooms > index.html.erbを開いて、内容を下のように変更してみましょう!

 index.html.erb
※ 半角英数字で入力。変更が完了したら「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>

これで@roomsの繰り返しの表示を設定できました。
一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/rooms」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/rooms」を開いてみて下さい。 Chrome messages rooms このような表示はでてきたでしょうか?

 次は「edit」ページの設定をしてみましょう!  設定した内容はこちらにまとめてあります。



 rooms」データベースの「edit」ページを作ってみます!
ページを作るには、
  • データ操作(rooms_controller.rb)
  • ページ表示
の2つをやります。

 まずはデータ操作からやってみましょう!

app > controllers > rooms_controller.rbを開いて、内容を下のように変更してみましょう!

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


21 22 23 def edit @room = Room.find(params[:id]) end

ここで編集するrooms」データを選択しています。
 次はページ表示をやってみましょう!

app > views > rooms > edit.html.erbを開いて、下のように変更してみましょう!

 edit.html.erb
※ 半角英数字で入力。変更が完了したら「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>

今回は、

8 <%= f.text_area :explain, :class => "form-control my-form", :size => "30x10", :placeholder => "説明を入力して下さい" %>

1 , :size => "30x10"

の設定を加えました。
ここで文字の入力をする「text_area」の大きさをしていしています。

今回は横30文字・縦に10行の設定になります。

これで@roomを使った入力欄変更する の設定ができました。
設定したページを見てみましょう!

これで@roomsの繰り返しの表示を設定できました。
一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/rooms/1/edit」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/rooms/1/edit」を開いてみて下さい。 Chrome messages rooms 1 edit このようなページは表示されたでしょうか?

 次は「update」ページを設定します  設定した内容はこちらにまとめてあります。



 rooms」データベースの「update」ページを作ってみます!
updateページで内容を変更したら、edit」ページにページ移動させます。

1 redirect_to :back

※ 内容はこちらを参考にして下さい

updateページでは、データ操作のみを行います。

app > controllers > rooms_controller.rbを下のように変更してみましょう!

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


25 26 27 28 29 30 def update @room = Room.find(params[:id]) @room.update(params.require(:room).permit(:name, :explain)) flash[:notice] = "チャット情報が変更されました" redirect_to :back end

これで変更は完了しました。
では、ページを表示させてみましょう!

一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


ブラウザで「0.0.0.0:3000/rooms/1/edit」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/rooms/1/edit」を開いてみて下さい。 Chrome messages rooms 1 edit ページを表示できたら、内容を変更して 変更する をクリックしましょう! Chrome messages rooms 1 update のように表示されたでしょうか?  設定した内容はこちらにまとめてあります。


ここまでで「rooms」ページの表示が完了しました。
これでもチャットルームはできたのですが、次に Chrome messages rooms 1 no messages のように、チャットルームに参加している会員のデータを表示させるようにします。

設定した内容はこちらにまとめてあります。