2 : メッセージを作る

前の章 : Mugcup(基礎編)の復習

Coffeecup header2

0 : この章の目的

  前章で作った「message-app」に実際のメッセージ機能をつける。
基本的にこれまでで習ってきた内容で、 Chrome messages users 1 owner after posts のような、それぞれのユーザーの「show」ページで表示する伝言板を作ってみます。
例えば、「湘南花子」さんでログインした状態で「山田太郎」さん会員の情報を表示するページに移動すると、 Chrome messages users 1 no messages のように伝言板のついたページが表示されます。

このページでメッセージを入力して、 Chrome messages users 1 input message 投稿すると、 Chrome messages users 1 after post message のようにメッセージが表示されるようにします。

今度は「山田太郎」でログインしてみると、 Chrome messages users 1 owner このように投稿されたメッセージが表示されるようにします。

またここで投稿に入力をして、 Chrome messages users 1 owner input 投稿をすると下のような表示がされるようにします。 Chrome messages users 1 owner after posts 「messages」データベースのページはメッセージを作る(create)だけで、他のデータ操作はしません。
この伝言板でもデータベースに保存したデータを表示させているのですが、そのデータベースは下のようなものになります。 Sequel pro messages database content
  • 「user_id」に投稿をした会員の「id」
  • 「receiver」に受け取った会員の「id」
  • 「content」にメッセージの内容
が入っています。

このデータベースから内容を表示させています。

この章で設定する内容は、
  • 「messages」データベースの作成(ここを参考)
  • 「7つのページの内、どれを使うか」の設定(ここを参考)
  • データ操作の設定(ここを参考)
  • ページ表示の設定(ここを参考)
の4つになります。

全て「posts」データベースのページを作った時にやった内容になると思います。
では、始めてみましょう!


1 : データベースを作る

伝言板を作るにあたって、まずは「messages」データベースを作ってみましょう!

 最初に「message」データベースの枠組みを作る設定ファイルはどのようにすれば作れるんでしょうか?
※ 分からなければこちらを参考にして下さい


ターミナル
1 rails g model message

入力をしたでしょうか?
db > migrate > 日時_create_messages.rbがその設定ファイルになります。
次に、作成した設定ファイルに設定を加えてみましょう!
ここでは下のようなデータベースを作ってみます。

messages
id content user_id receiver created_at updated_at
192 おはよう 91 20 2016-03-02 16:13:52 2016-03-02 16:13:52

user_id」に投稿した会員の「id」、「receiver」に受け取った会員の「id」を入れるようにします。
上にあるデータは、「idが91」の会員が「idが20」の会員へ送った「おはよう」というメッセージになります。

メッセージアプリケーションはこのようにしてデータベースにメッセージを保存しているんですね。

Sublime Textでdb > migrate > 日時_create_messages.rbを開いて、下のように内容を変更してみましょう!(Sublime Textの開き方はこちらを参考)
※ 内容はこちらを参考にして下さい

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


1 2 3 4 5 6 7 8 9 10 11 12 class CreateMessages < ActiveRecord::Migration def change create_table :messages do |t| t.text :content t.integer :user_id t.integer :receiver t.timestamps null: false end end end

この設定で、長い文字列を入れる「content」、数字を入れる「user_id」、数字を入れる「receiverを作ります。

設定ができたら、設定内容のデータベースを作成しましょう!
ターミナルで下のように入力して下さい。

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

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

これで「messages」データベースが完成しました!
ここまでできたら、Sequel Proで「messages」データベースができたかを確認してみましょう!
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考にして下さい Sequel pro messages database データベースの設定ができたので、次はページの設定をしましょう!

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


2 : ページを設定する

データベースもできたので、次はページを設定しましょう!
ページの設定には、
  • 7つのページのうちどれを使うかの設定(routes.rb
  • データ操作の設定(controller
  • ページ表示の設定(views
の3つをします。

設定を始める前に、データ操作・ページ表示の設定ファイルをターミナルへの入力で作成しましょう!
※ 内容はこちらを参考にしてみて下さい

ターミナル
1 rails g controller messages

この入力で、
  • データ操作ファイル「app > controllers > messages_controller.rb
  • ページ表示フォルダ「app > views > messages
を作成しました。
では、まずは「7つのページのうちどれを使うかの設定(routes.rb)」から始めてみましょう!

 ① : routes.rb


まずはconfig > routes.rbを設定します。
今回のページは、 Chrome messages users 1 after post message のように、「users」データベースの「show」ページでも「messages」データベースのデータ操作とページ表示をします。

具体的に言えば、


の2つは「users」ページのデータ操作で行います。

加えて、1つのデータの表示・データの更新・削除はしないので、
「messages」データベースで使うページは「create」のみになります。

完全に理解できていなくてもいいので、とりあえず「routes.rb」を下のように設定してみましょう!
※ 分からなかったら、こちらを参考にしてください

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


1 2 3 4 5 6 7 8 9 10 ... 63 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] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # 省略 end

これで「routes.rb」の設定が完了しました。

次はデータ操作の設定をしてみましょう!

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


 ② : データ操作


次に、データ操作をやってみます。
データ操作は、messages_controller.rb」「users_controller.rbの2つのファイルでそれを設定します。

  • messages_controller.rbでは、

  • 「messages」データベースのデータの作成(create)のデータ操作を指定します。
    ※ 内容はこちらを参考にして下さい

    1 @message = Message.create(params.require(:message).permit(:user_id, :receiver, :content).merge(:user_id => current_user.id))

  • users_controller.rbでは、

  • 「users」データベースの「show」ページのデータ操作の設定で、

    「messages」データベースの全てのデータの表示(index)新しいデータの記入(new)のデータ操作を指定します。

    全てのデータの表示(index)でメッセージデータの表示
    新しいデータの記入(new)で投稿の入力欄のデータ操作を行います。 Chrome messages users 1 owner after posts
    メッセージデータの表示は、
    ※ 詳細はこちらを参考にして下さい

    1 @messages = Message.where(指定する条件)

    ※ whereを使って、条件にあったデータを選択を行いました。少し前の内容なんですがこちらを参考

    例:「first_name」が「太郎」のデータを選択
    User.where(:first_name => "太郎")
    


    新しいデータの記入欄のデータ操作は、
    ※ 詳細はこちらを参考にして下さい

    1 @message = Message.new

のような感じで設定します。

ではやってみましょう!

 ⑴ : messsages_controller.rb


まず、「messages_controller.rb」の「データの作成(create)からやってみます。

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

 messages_controller.rb
※ 半角英数字で入力。変更が完了したら「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, :receiver, :content).merge(:user_id => current_user.id)) redirect_to :back end end

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

3 before_action :authenticate_user!, :only => [:create]

これは、ログインしている会員にのみページを見せるための設定でしたね。
※ 詳細はこちらを参考
今回は「messages」データベースの「create」にだけこの制限をかけました。
 次に6行目

6 @message = Message.create(params.require(:message).permit(:user_id, :receiver, :content).merge(:user_id => current_user.id))

この「Message.create(...)」で、データの作成をします。
※ 詳細はこちらを参考にしてください

6 .merge(:user_id => current_user.id)

が後ろについていることで、「user_id」に「current_user」ログインしている会員の「id」を入れる設定をしています。
※ 詳細はこちらを参考にして下さい
 最後に7行目

6 redirect_to :back

ここでは、redirect_toを使ってページの移動をします。
※ 詳細はこちらを参考にして下さい

今回は:backという設定を使っていますが、これは前のページを示す設定になります。
なので、

6 redirect_to :back

は前のページに戻る設定になります。
今回のページは、入力欄にメッセージを入力して、 Chrome messages users 1 input message 登録ボタンを押したら、 Chrome messages users 1 after post message のように元のページに戻るようにしますので、

6 redirect_to :back

のような設定になりました。

次は「users_controller.rb」の設定をしてみます。


 ⑵ : users_controller.rb


ここでは「users_controller.rb」で、 を設定してみます。
ではapp > controllers > users_controller.rbを開いて、下のように内容を変更してみましょう!

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


5 6 7 8 9 def show @user = User.find(params[:id]) @messages = Message.where(:receiver => @user.id) @message = Message.new end

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

7 @messages = Message.where(:receiver => @user.id)

この設定で、
「receiver」が、ページの会員情報「@user」の「id」と一致する「messages」データベースのデータを選択しています。
※ whereの説明はこちらを参考

これで、表示している会員ページに対応する「messages」データベースのデータを選択することができました。

ここで設定した標識「@messages」を、伝言板の部分でページで表示させます。 Chrome messages users 1 owner after posts
 最後に8行目

8 @message = Message.new

この設定で、
入力欄に入れるための、空の「messages」データを作成します。
※ 詳細はこちらを参考にして下さい

ここで設定した「@message」で、投稿の入力欄を作成します。 Chrome messages users 1 owner after posts ここまででデータ操作は設定できました!

最後に今回説明した内容のまとめをします!


 ⑶ : まとめ


今回、新しく設定した内容は2つありました。
  • redirect_to :back
  • Message.where(条件)
の2つになります。
 redirect_to :back

前のページに戻る設定として、

1 redirect_to :back

を今回設定した。
 Message.where(条件)

「messages」データベースからデータを選択する設定として、

1 @messages = Message.where(:receiver => @user.id)

を設定した。

今回の設定は、「receiver」が「@user」の「id」と一致するものを選択する設定になる。
ここまででデータ操作の設定ができました。

次はページ表示の設定をしてみましょう!


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


 ③ : ページ設定


次に、ページ表示をやってみます。
ページ表示は、users」データベースの「show.html.erbに設定内容を追加します。
上で設定したmessages」データベースの「createは、

6 redirect_to :back

で表示されないので、表示の設定はusers」データベースの「show.html.erbのみになります。
ここでは、
  • メッセージの表示

  • データの全表示(index)で説明した、データを繰り返す表示する設定を使って、複数データある「@messages」を表示させてみます。

    1 2 3 4 5 <% @posts.each do |p| %> <p><a href="/users/<%= p.user_id %>"><%= User.find(p.user_id).family_name %><%= User.find(p.user_id).first_name %>様</a>の投稿</p> <h3><a href="/posts/<%= p.id %>"><%= p.content %></a></h3> <hr> <% end %>

  • 入力欄とボタンの作成

  • 新しいデータの記入(new)で説明した、データの記入欄・ボタンの表示をする設定を使います。

    1 2 3 4 5 6 7 8 9 <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content, :class => "form-control my-form" %> <br> <p>場所</p> <%= f.text_field :place, :class => "form-control my-form" %> <hr> <%= f.submit "登録する", :class => "btn btn-primary" %> <% end %>

の2つを、「messages」データベースを使って設定してみたいと思います。


設定を始める前に、まずは上のバー・navigation-barに「users」データベースのページへのリンクを追加したいと思います。
※ 内容の説明はこちらを参考にして下さい
上のバーの設定は、app > views > layouts > application.html.erbに設定しました。

このapp > views > layouts > application.html.erbに設定を追加しましょう!
※ 詳細はこちらを参考にして下さい

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


23 24 25 26 27 28 29 30 31 31 <ul class="nav navbar-nav navbar-right"> <% if user_signed_in? %> <li><a href="/users">会員一覧</a></li> <li><a href="/users/<%= current_user.id %>"><%= current_user.family_name %><%= current_user.first_name %>さん</a></li> <li><%= link_to "ログアウト", destroy_user_session_path, :method => :delete %></li> <% else %> <li><a href="/users/sign_up">登録する</a></li> <li><a href="/users/sign_in">ログインする</a></li> <% end %> </ul>

この2行で、
  • 会員一覧ページへのリンク
  • ログインしている会員ページへのリンク
を設定しました。

今回はログインしている会員ページへのリンクで、ログインしている会員の名前を表示させる設定をしました。 Chrome messages users 1 no messages 次から、「messages」データベースのページ表示を設定してみましょう!



ここではusers」データベースの「show.html.erbで、メッセージの表示をしてみたいと思います。

メッセージの表示はデータの全表示(index)で説明したようなの方法で行います。

まずapp > views > users > show.html.erbをSublime Textで開いて、内容を下のように変更してみましょう!
※ Sublime Textの開き方は、こちらを参考にしてください

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <hr> <h4>伝言板</h4> <% @messages.each do |m| %> <hr> <h5><%= m.id %> : <a href="/users/<%= User.find(m.user_id).id %>"><%= User.find(m.user_id).family_name %><%= User.find(m.user_id).first_name %>さん</a>の投稿</h5> <p><%= m.content %></p> <% end %> <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 %>

では内容の説明をしましょう!
 まずは8行目と12行目の

 show.html.erb(8行目)
1 <% @messages.each do |m| %>



 show.html.erb(12行目)
1 <% end %>

の間で選択した「messages」データベースのデータを表示させます。
※ 内容の詳しい説明はこちらを参考

users_controller.rb」で設定した「@messages

 users_controller.rb(5〜9行目)
5 6 7 8 9 def show @user = User.find(params[:id]) @messages = Message.where(:receiver => @user.id) @message = Message.new end

一つ一つのデータ「m」に分けて、それを12行目までの間で表示させます。
※ 内容の詳しい説明はこちらを参考
 次は、9〜11行目を説明します。

 show.html.erb(9〜11行目)
9 10 11 <h5><%= m.id %> : <a href="/users/<%= User.find(m.user_id).id %>"><%= User.find(m.user_id).family_name %><%= User.find(m.user_id).first_name %>さん</a>の投稿</h5> <p><%= m.content %></p> <hr>

ここでは、
  • 分解したデータ「m」を表示
  • 「m」の「user_id」を使って、投稿をした会員のデータを表示
させています。
※ 内容の詳しい説明はこちらを参考
ですが、この

 show.html.erb(9行目)
9 <h5><%= m.id %> : <a href="/users/<%= User.find(m.user_id).id %>"><%= User.find(m.user_id).family_name %><%= User.find(m.user_id).first_name %>さん</a>の投稿</h5>

は、少し長い設定になって少し面倒臭いです(特に「User.find...」の部分)。

今回のmessages」データベースのように

messages
id content user_id receiver created_at updated_at
192 おはよう 91 20 2016-03-02 16:13:52 2016-03-02 16:13:52
データベースの中にそのデータを持っているデータの枠組みがある時は(ここではmessages」データベースの中の「user_id)、

 show.html.erb(9行目)
9 <h5><%= m.id %> : <a href="/users/<%= m.user.id %>"><%= m.user.family_name %><%= m.user.first_name %>さん</a>の投稿</h5>

のようにもっと短く設定することができます。
分解した「messages」データ「m」の「user」の「idと分かりやすいのではないかと思います。

 今のままでは、まだこの設定は使えないので、ここで追加の設定をしてみます。
この設定を加えるには、app > modelsフォルダにあるファイルに設定を加えます。

まずはapp > modelsフォルダを見てみましょう!
中には、
  • 「concerns」フォルダ
  • user.rb」ファイル
  • message.rb」ファイル
の3つが入っていると思います。

この2つのファイルはそれぞれ、データベース作成の設定ファイルを作った、

 ターミナル
1 rails g devise user

 ターミナル
1 rails g model message

の入力の際に作成されたファイル・フォルダになります。
 では設定を加えてみましょう!

1 <%= m.user.id %>

を適用させるには、user.rb」と「message.rbに下の設定を加えます。

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


1 2 3 4 5 6 7 8 9 class User < ActiveRecord::Base # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable has_many :messages end

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


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

 内容を説明しましょう!

上の設定は、今回のuser」と「messageのように、

あるデータベースのデータ(今回は「users」)が、
他のデータベースのデータ(今回は「messages」)を複数持つことができる時に、データの選択を簡単にするための設定です。

 設定方法は、

  • 枠組みの設定

  • 親の枠組みはそのままで、
    子のそれに「親のデータベース名(単数形)_id」の枠組みを追加します


    messages
    id content user_id receiver created_at updated_at
    192 おはよう 91 20 2016-03-02 16:13:52 2016-03-02 16:13:52
  • 親の方のデータベース(今回は「users」)

  • app > models > データベース名(単数形).rbに下の内容を追加する。

    1 has_many :子のデータベース名(複数形)

  • 子の方のデータベース(今回は「messages」)

  • app > models > データベース名(単数形).rbに下の内容を追加する。

    1 belongs_to :親のデータベース名(単数形)

になります。
上では

1 <%= m.user.id %>

と、「messages」データベースから「users」データベースのデータを選択できるようにしましたが、
逆に「users」データベースから「messages」データベースのデータを選択することもできます。

それには、

1 @messages = @user.messages

のようにして、選択した「users」データベースの後に「.messages」(複数形)を入力することで選択します。
 では「posts」データベースのデータを複数持っている「users」データベースで、

posts
id content user_id created_at updated_at
192 SFCなう 91 2016-03-02 16:13:52 2016-03-02 16:13:52
users
id family_name first_name created_at updated_at
91 山田 太郎 2016-02-02 10:42:18 2016-02-02 16:42:18

 @postから会員情報を選択

1 @user = @post.user

 @userから投稿情報を選択

1 @posts = @user.posts

のような設定をするには、
  • app > models > post.rb
  • app > models > user.rb
をどのように設定すればいいでしょうか?

※ マウスを上に置けば、答えが表示されます。



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


1 2 3 4 5 class Post < ActiveRecord::Base belongs_to :user end

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


1 2 3 4 5 class User < ActiveRecord::Base has_many :posts end

最後に設定した内容を確認してみましょう!

 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 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <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 %> <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 %>

次は、入力欄・ボタンの表示の設定をしてみます。 Chrome messages users 1 owner after posts



ここではusers」データベースの「show.html.erbで、入力欄・ボタンの表示の設定をしてみたいと思います。

入力欄・ボタンの表示の設定は、新しいデータの記入(new)で説明したようなやり方で行います。

app > views > users > show.html.erbをSublime Textで開いて下のように変更してみましょう!
※ Sublime Textの開き方は、こちらを参考にしてください

 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 19 20 21 22 23 24 25 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん(<%= @user.age %>歳)</p> <p>自己紹介:<%= @user.self_introduction %></p> <hr> <h4>伝言板</h4> <% @messages.each do |m| %> <h5><%= m.id %> : <a href="/users/<%= m.user.id %>"><%= m.user.family_name %><%= m.user.first_name %>さん</a>の投稿</h5> <p><%= m.content %></p> <hr> <% 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 %> <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 %>

では内容の説明をしましょう!
 まずは14、19行目から

 show.html.erb(14行目)
14 <%= form_for @message do |f| %>



 show.html.erb(19行目)
19 <% end %>

の間で新しく作成する「@message」のデータの記入欄とデータの送信ボタンを作成します。
※ 内容の詳しい説明はこちらを参考

messages_controller.rb」で設定した「@message」を、

 messages_controller.rb(5〜9行目)
5 6 7 8 9 def show @user = User.find(params[:id]) @messages = Message.where(:receiver => @user.id) @message = Message.new end

一つ一つのデータ「f」に分けて、それを19行目までの間で記入欄と送信ボタンに変えています。
※ 内容の詳しい説明はこちらを参考
 次は15〜18行目を説明します。

 show.html.erb(15〜18行目)
15 16 17 18 <%= f.text_area :content, :class => "form-control my-form", :placeholder => "なにか伝言を残そう!" %> <%= f.hidden_field :receiver, :value => @user.id %> <br> <%= f.submit "登録する", :class => "btn btn-warning" %>

とりあえず15行目で、記入欄を設定しているのは分かると思います。
※ 詳しい説明はこちらを参考にして下さい

15 <%= f.text_area :content, :class => "form-control my-form", :placeholder => "なにか伝言を残そう!" %>

今回は後ろに、

1 :placeholder => "なにか伝言を残そう!"

が追加されたと思います。
この部分で、入力欄になにも入力されていない時に出す文字を設定します。 ここも適当に覚えてください。
次に18行目で、ボタンを設定していることも分かると思います。
※ 詳しい説明はこちらを参考にして下さい

18 <%= f.submit "登録する", :class => "btn btn-warning" %>

今回は「btn-warning」という黄色のボタンを使っています。
最後に16行目を説明しましょう。

16 <%= f.hidden_field :receiver, :value => @user.id %>

ここは今まで説明してこなかった設定ですね。

「:receiver」が入っているので、「:receiver」を設定していることはもしかしたらは予測できると思います。
ただ、ページに記入欄は表示されていませんね。
※ 0.0.0.0:3000/users/1で確認してみて下さい。
 localhost:3000/users/1で確認してみて下さい。 Chrome messages users 1 no messages これは入力欄なしで、「:receiver」の枠組みにページの会員データ「@user」の「id」を入れるための設定になります。

今回の「users」データベースの「show」ページでは、元から送信先の会員の情報が分かっているのでそれを入力させる必要はありません。
このように入力させる必要がないデータを設定するには、
<%= f.hidden_field :枠組みの名前, :value => 入れたい情報 %>
で設定します。

 では、「:place」の枠組みに「@user」の「location」のデータを入れるための「hidden_field」の設定はどのようなものになるでしょうか?


1 <%= f.hidden_field :place, :value => @user.location %>

ウェブサイトでは、例えば今回の「hidden_field」を使って入力させる必要のないデータを送信しています。
これでページの設定もできました。

ここまでできたら、メッセージの作成・表示ができるかを試してみましょう!

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


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


できたら、「0.0.0.0:3000/users/1」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/1」を開いてみて下さい。

下のようなページは表示されたでしょうか? Chrome messages users 1 no messages ここで入力欄に投稿を入力して、登録する を押してみましょう! Chrome messages users 1 input message 下のように投稿が表示されたでしょうか? Chrome messages users 1 after post message Sequel Proで、データベースに内容が保存されたかを確認してみましょう!
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考

ここまででページ表示の設定が完了しました!

最後にまとめをしましょう。



今回新しく、
  • has_many / belongs_to
  • hidden_field

を設定しました。
 has_many / belongs_to

あるデータベースが他のデータベースのデータを複数持っている場合、
データの選択を簡単にするための設定として、has_many」と「belongs_toがある。

これを設定するには、

 子のデータベースの枠組みに

messages
id content user_id receiver created_at updated_at
192 おはよう 91 20 2016-03-02 16:13:52 2016-03-02 16:13:52
のように「親のデータベース名(単数形)_id」の枠組みを追加し、

 app > models > データベース名(単数形).rb

 親のデータベース名(単数形).rb

1 has_many :子のデータベース名(複数形)

 子のデータベース名(単数形).rb

1 belongs_to :親のデータベース名(単数形)

の設定を追加します。

 データの選択で、

  • メッセージデータを作った会員データを選択

  • 1 @user = @message.user

  • 会員が作成したメッセージデータを選択

  • 1 @messages = @user.messages

のようにしてデータの選択をします。
 hidden_field

入力させる必要のない情報を入れるには、

1 <%= f.hidden_field :receiver, :value => @user.id %>

を設定します。

今回は「:receiver」に「@user」の「id」を入れるように設定しました。

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


ここまででメッセージ機能を設定することができました。

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