6 : チャットルームの作成:まとめ

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

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

3 : まとめ

 この章で新しく説明した内容をまとめます。
この章で新しく説明した内容は、

  • データベース設定ファイルの「default
  • ※ 詳細はこちらを参考

     日時_create_rooms.rb
    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, default: "説明を入力" t.timestamps null: false end end end

    これでname」「explain」の枠組みの初期値を設定しました。

  • 「Bootstrap」の「row」「col-xs-数字
  • ※ 詳細はこちらを参考にして下さい

     show.html.erb
    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>

    このrow」と「col-xs-数字で、画面を12の長さとしてその中身を分けて表示をさせます。

     例えば「12」の画面を「6」「6」で分けるなら、

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

    と設定すれば、

    内容1(長さ6)

    内容2(長さ6)

    と表示できます。

  • データの判定をする「present?
  • ※ 詳細はこちらを参考にして下さい

     show.html.erb
    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> <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> <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>

    ここでは@messagesがあるかどうかを判定しています。
    • あったら場合は、11〜29行目
    • なかった場合は、31〜33行目
    を表示させます。
  • 入力欄の大きさを設定する「:size
  • 詳細はこちらを参考にして下さい

     edit.html.erb
    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行目にある

    1 , :size => "30x10"

    で入力欄の大きさの設定をしています。
    ここでは「横30文字・縦に10行」の設定をしています。
  • 入力欄の中で別のデータを作成する「fields_for
  • ※ 詳細はこちらを参考にして下さい

     show.html.erb
    10 11 12 13 14 15 16 17 <% else %> <%= form_for @room do |f| %> <%= fields_for @entry do |e| %> <%= e.hidden_field :user_id, :value => @user.id %> <% end %> <%= f.submit "チャットを始める", :class => "btn btn-warning" %> <% end %> <% end %>

    「@room」を設定する入力欄の中で@entryを設定しました。
  • データの数を制限する「limit
  • ※ 詳細はこちらを参考にして下さい

     users_controller.rb
    5 6 7 8 9 10 11 12 13 def show @user = User.find(params[:id]) if @user.id == current_user.id @entries = current_user.entries.limit(3) else @room = Room.new @entry = Entry.new end end

    これで@entriesには3つまでしかデータが入らないように設定できました。
  • params
  • ※ 詳細はこちらを参考にして下さい

     messages_controller.rb
    5 6 7 8 9 10 11 12 def create if Entry.where(:user_id => current_user.id, :room_id => params[:message][:room_id]).present? @message = Message.create(params.require(:message).permit(:user_id, :content, :room_id).merge(:user_id => current_user.id)) else flash[:alert] = "無効なユーザー" end redirect_to :back end



    1 :room_id => params[:message][:room_id]

    の部分で、
    送信されてきた「message」データの「room_idを取ってきています。

     ここまでが新しく設定した内容です。

次の章では、ユーザー情報に画像を付け加えてみたいと思います。