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

前の章 : メッセージを作る

Coffeecup header3

0 : この章の目的

 前章では、それぞれの会員の「show」ページにメッセージを表示させた。

ここではチャットルームを作成して、そこにメッセージを表示させるようにする。
Chrome messages rooms 1 present messages
 どのようなページを作るかを説明します。

自分の会員の「show」ページ「0.0.0.0:3000/users/1に移動すると、下のように「チャット一覧」の表示が表示され、 Chrome messages users 1 rooms link 他の会員のページ(例えば0.0.0.0:3000/users/2)に移動すると、
チャットを始める
のボタンが表示されます。 Chrome messages users 1 start chat
この チャットを始める をクリックすると、 Chrome messages rooms 1 no messages のようなチャットルームのページが表示されます。

このページでメッセージを入力して、 Chrome messages rooms 1 input word 投稿する を押すと、 Chrome messages rooms 1 show message 1 のように

おはよう!

山田太郎さん

が表示されます。
別のユーザーの投稿したメッセージは、 Chrome messages rooms 1 from users 1 after users 2 post のように

宿題やった?

湘南花子さん

のように青色で表示させるようにします。

 ページの流れを説明したので、ページの作り方を説明します。

ページの作成には、
  • データベースの作成(詳細はこちらを参考)
  • 7つのページの設定(詳細はこちらを参考)
  • データ操作の設定(詳細はこちらを参考)
  • ページ表示の設定(詳細はこちらを参考)
4つをやってみます。

まずはデータベースの作成をやってみましょう!


1 : データベースを作る

チャットルームを作るにあたって、まずはデータベースを作ってみます。
チャットルームのデータベースはどのようになっているのでしょうか?

チャットルームのデータベースを作るには、下の4つのデータベースが必要になります。

  • usersデータベース

  • どの会員がメッセージを投稿したか」と、
    会員がどのチャットルームにいるか」を設定するために必要になります。

  • messagesデータベース

  • 投稿をした会員(user_id)」と、
    投稿されたチャットルームの情報(room_id)」の2つを設定します。

    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
     これはチャットルーム(room_id)「1」に会員(user_id)「1」が投稿した「おはよう!」というメッセージ「1」を示している。

  • roomsデータベース

  • チャットルームの情報(チャット名と説明)」を設定します。

    rooms
    id name explain created_at updated_at
    1 新規チャット 説明を入力 2016-04-12 20:30:21 2016-04-12 20:30:21
     名前(name)が「新規チャット」、説明(explain)が「説明を入力」のチャットルーム(id)「1」を示している

  • entiesデータベース

  • どの会員がどのチャットルームに所属しているかの情報」を設定します。

    entries
    id room_id user_id created_at updated_at
    1 1 2 2016-04-12 20:30:21 2016-04-12 20:30:21
     チャットルーム(room_id)「1」には会員(user_id)「2」が所属していることを示している。

流れとしては、 Chrome messages users 1 start chatチャットを始める をクリックすると、

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

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」に、会員「1」と「2」が所属していることを示すデータ

が作成され、チャットルームのページに移動します。 Chrome messages rooms 1 no messages このページで投稿を入力して、 Chrome messages rooms 1 input word 投稿する をクリックすると、

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
 チャットルーム(room_id)「1」で会員(user_id)「1」が投稿した「おはよう!」のメッセージデータ

が作成され、作成したメッセージが表示されます。 Chrome messages rooms 1 show message 1
ここでは
  • messagesデータベース
  • roomsデータベース
  • entriesデータベース
の3つを変更・作成してみます。早速やってみましょう!


 ① : messagesデータベース


 データベースの変更の前に、まずはすでに保存されているデータを全て削除しましょう!

ターミナルで下の入力をして下さい。

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

1 rake db:reset

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

この入力で、データベースにあるデータをリセットします。

ではSequel Pro / SqliteBrowserで「messages-app_development」を開いて、「messages」データベースが削除されたかを確認しましょう。
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考

 データのリセットが終わったら、登録のページ「0.0.0.0:3000/users/sign_up」で会員のデータを新しく作成しましょう。
 Windowsをご利用の方はlocalhost:3000/users/sign_upを開いて下さい。
 ここまでできたら、「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

データベースの変更は、ターミナルで作成する設定ファイルを使って行います。
まずはターミナルでmessage-appに移動して下さい。


 Windowsでの移動の方法はこちらを参考


 ターミナル
1 2 3 cd Desktop cd rails_project cd message-app

ここでデータベース変更の設定ファイルを作成します。

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

これでdb > migrate」フォルダに「日時_change_column_messages.rbが作成されました。
この日時_change_column_messages.rbの設定を下のように変更してみましょう!
※ 内容の説明はこちらを参考

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


1 2 3 4 5 6 class ChangeColumnMessages < ActiveRecord::Migration def change add_column :messages, :room_id, :integer remove_column :messages, :receiver, :integer end end

これで
  • 「room_id」の枠組みの追加
  • 「receiver」の枠組みの削除
の2つの設定ができました。
終わったら、設定内容を導入します。ターミナルで下の入力をして下さい

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rake db:migrate

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

これで設定内容が適用されました。

最後にSequel Proで内容の確認をしてみましょう。
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考
ここまでで、
  • receiver」の削除
  • room_id」の追加
をしたので、messages_controller.rbの内容もそれに合わせて変更します。

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

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


1 2 3 4 5 6 7 8 9 10 class MessagesController < ApplicationController before_action :authenticate_user!, :only => [:create] def create @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) redirect_to :back end end

6 .permit(:user_id, :content, :room_id)...

の部分でreceiverを削除し、room_idを追加しました。

これでデータベースの変更だけでなく、messages」データベースのデータ操作の設定もできるようになりました。

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


 ② : roomsデータベース


 次に「rooms」データベースの作成をしてみましょう!

rooms
id name explain created_at updated_at
1 新規チャット 説明を入力 2016-04-12 20:30:21 2016-04-12 20:30:21

データベースの作成は、ターミナルで作成する設定ファイルに内容を設定して行います。
ターミナルで下の入力をしましょう!
※ データベースの作成はこちらを参考にして下さい

 ターミナル
1 rails g model room

これで作成されたdb > migrate」フォルダにある「日時_create_rooms.rb」を下のように変更して下さい。
※ 内容はこちらを参考にして下さい

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


1 2 3 4 5 6 7 8 9 10 11 class CreateRooms < ActiveRecord::Migration def change create_table :rooms do |t| t.string :name, default: "新規チャット" t.text :explain t.timestamps null: false end end end

今回はnameには、

1 t.string :name, default: "新規チャット"

のように後ろに

1 , default: "文字"

がついていますね。

これはなにも入力されなかった時に、枠組みに入れる初期値の文字を設定しています。
defaultとも書いてあるので分かりやすいのではないかと思います。

 では「短い文字列(string)」が入る「file」の枠組みの初期値を「新規ファイル」にするには、どのような設定をすればいいでしょうか?


1 t.string :file, default: "新規ファイル"

最後に設定を適用させるために、ターミナルで

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rake db:migrate

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

を入力して下さい。これで設定が適用され、rooms」データベースが作成されました。

最後にSequel Proで内容の確認をしてみましょう!
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考

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


 ③ : entriesデータベース


 最後に、どの会員がどのチャットルームに所属しているかの情報を入れる「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」が「1」のデータは、チャットルーム「1」に会員「1」が所属していることを指定しています。
まずは、データベースの作成をしてみましょう!ターミナルで下の入力をして下さい。

 ターミナル
※ こちらの入力は単数形なので注意して下さい!
1 rails g model entry

この入力ができたら、db > migrate」フォルダに「日時_create_entries.rb」ファイルが作成されるので、このファイルに設定を加えます。
※ 内容はこちらを参考にして下さい

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


1 2 3 4 5 6 7 8 9 10 11 class CreateEntries < ActiveRecord::Migration def change create_table :entries do |t| t.integer :user_id t.integer :room_id t.timestamps null: false end end end

これで
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
のデータベースを作成する設定ができました。

次はこの設定を適用させましょう!ターミナルで下の入力をして下さい!

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rake db:migrate

 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

これで設定が適用され、データベースが作成されました。

最後にSequel Proで内容の確認をしてみましょう!
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考

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


これでデータベースの作成が完了しました!このデータベースを使って、ページを作っていきます。
まずは、 Chrome messages users 1 start chat 他の会員の チャットを始める をクリックすると、 Chrome messages rooms 1 no messages のようなチャットルームの作成ができるようにしましょう!

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