11 : ユーザー管理をする③

前の章:ユーザー管理をする②

Header11 この章は、前章の「ユーザー管理②」の続きになります。
前章の内容がまだ終わっていない方は、こちらからお願いします。

4 : ログインしている会員で投稿する

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

次は、設定した会員の情報で投稿ができるようにしましょう!

例えば、ここまでの投稿のデータは「posts」データベースから「name」の枠組みを取り出して表示させていましたが、
会員制のページで投稿するたびに、自分で名前を打つのは面倒くさいですよね。
そこでここでは自分の名前を打たないで、投稿できるようにします。

この設定のためにここでは投稿をする時に投稿の「posts」データベースの中に会員のidを入れる枠組みを作り、そこに投稿した会員データを入れる設定をします。
流れとしては、
ログインした会員であれば、下のような投稿を記入するページを出し、そこで新しい投稿・変更ができるようにします(名前を入れる入力欄はありません)。 Chrome posts new after devise Chrome posts 1 edit after devise 投稿完了ページ・投稿ページでは、投稿とその投稿をした会員の情報が表示されるようにします。 Chrome posts create after devise Chrome posts all after devise create post Chrome posts 1 after devise create post Chrome posts 1 update after devise Chrome posts 1 destroy after devise このような表示をするためには、「posts」データベースに誰が投稿をしたかの情報を入れる枠組み(例えば投稿した会員のidは1など)を追加し、設定しています。

その後でこの投稿した会員のデータを使って、
自分の投稿以外は内容の変更削除を行えないようにします(そうでなければ、危ないですよね)。
なのでこの章では下の3つの設定をします。
  • 「posts」データベースの変更
  • データ操作ページ表示の設定
  • 投稿の変更・削除をしていいかのチェック
では、やっていきましょう!

 ① : 「posts」データベースの変更


これまでに作った「posts」データベースでは「name」の枠組みがあったので、投稿の作成ページ(0.0.0.0:3000/posts/new)には「name」の入力欄がありました。

ですがここでは、会員情報(id)を使った枠組みを追加して名前を表示させるので、「name」の入力欄はいりません。
 まずは、「name」の入力欄と今残っているデータはいらないので消しちゃいましょう!

 残っているデータ全てを「show」のページの 投稿を削除する で消して下さい。

 データを全て消したら、次は枠組みを削除しましょう。

枠組みの削除は、削除するための設定ファイルを作りそこに削除の設定をします
※ 枠組みの削除の詳細は、こちらを参考にして下さい

 まずはターミナルで「myapp」まで移動して下さい。


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


 ターミナル(半角英数字で入力)
1 2 3 cd Desktop cd rails_project cd myapp

 次に設定ファイルを作るために、ターミナルで下の入力をしましょう

ターミナル(半角英数字で入力)
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails g migration removeColumnFromPost

久々ですが、
rails g migration 設定ファイル名
で枠組みの変更をする設定ファイルを作りました。
名前はなんでも良いのですが、分かりやすい名前にすることをおすすめします。

db > migrate > 日時_remove_column_from_post.rbが作成された設定ファイルになるので、下のように変更しましょう!

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


1 2 3 4 5 class RemoveColumnFromPost < ActiveRecord::Migration def change remove_column :posts, :name, :string end end

この
remove_column :データベース名, :枠組みの名前, :データの種類
で枠組みの削除をします。
※ 詳細はこちらを参考にして下さい

設定ができたら設定を適用させるために、

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

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

ここまでできたら、Sequel Proでデータベースを確認してみましょう!
※ Sequel Proの開き方はこちらを参考にして下さい。
 Windowsをご利用の方は、SqliteBrowserをお使い下さい。


「name」の枠組みは無くなっているでしょうか?
 では、「posts」データベースに会員の情報を入れる枠組みを設定しましょう。

先ほど消した「name」の代わりに会員情報「users」データベースの「id」を入れる会員情報の枠組み「user_id」を、「posts」データベースに追加します。

「users」の「id」と対応させるので、枠組みのデータの種類は「数字」・名前は「user_id」にします。

例えば「idが189」の会員が投稿をしたら、posts」データベースの「user_id」に「189」のデータが入って、この会員番号を使って名前を表示させます。
ではやってみましょう!

まずは設定ファイルを作ってみます!
※ 詳細はこちら

ターミナル(半角英数字で入力)
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails g migration addColumnToPost2

※ 名前がかぶらないように最後に「2」を加えていますが、後で見てなにをしているかが分かれば名前はなんでも大丈夫です。

できたらdb > 日時_add_column_to_post2.rbを下のように設定しましょう。

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


1 2 3 4 5 class AddColumnToPost2 < ActiveRecord::Migration def change add_column :posts, :user_id, :integer end end

この
add_column :データベース名, :名前, :データの種類
で枠組みの追加をします。数字を入れるデータの種類はintegerでした。
※ 詳細はこちらになります
設定ファイルができたら設定を適用させるために、

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

これで枠組みの変更ができました。
 動かない場合は、「bundle exec」を前につけ、「bundle exec rake ...」で入力して下さい。

こちらもSequel Proで内容を確認しましょう
※ Sequel Proはこちらを、SqliteBrowserはこちらを参考にして下さい。

「user_id」は追加されてるでしょうか? Sequel pro add user id
この「user_id」を使って、ページに投稿をした会員の情報を表示させます


 ⑵ : データ操作とページ表示の設定


枠組みの変更をしたので、データ操作とページ表示の内容を変更する必要があります。
「name」の枠組みはデータ操作・ページ表示の両方で使われているので、この両方をuser_idを使った設定に変えていきます。

 ⑴ : データ操作


まずはデータ操作posts_controller.rbの内容を「name」でなく「user_id」を使ったデータに変えていきます。

この変更をするには、2つの設定が必要になります。
  • データ作成時(create)に「user_id」に会員情報を入れる設定
  • ページに会員情報を表示させる標識「@user」の設定
それぞれについてやってみます!

  • データを作成した時「user_id」に会員情報を入れる

  •  まずは復習で、「def create」の部分から、「name」を設定から消して「user_id」を追加する設定をしましょう(マウスを上におけば答えが出ます)
    ※ 分からなければこちらを参考にして下さい


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


    17 18 19 def create @post = Post.create(params.require(:post).permit(:content, :place, :user_id)) end

    データの作成・変更をする時は、
    .require(:データベース名(単数形).permit(:データベースの枠組み...))
    
    で変更をするデータベースを制限していました。
    ※ 詳しい内容はこちらを参考にして下さい
    これで「user_id」をデータに入れる設定はできたのですが、「user_id」に内容を入れる設定はまだできていません。
    次は「user_id」に会員の情報をいれましょう。

    でも、この「user_id」は入力欄には使えません。
    もし会員情報の入力欄があったら、他人の会員情報で投稿ができてしまう危険なサイトになることでしょう・・・

    「user_id」の内容は、ログインしている会員の情報を取得する「current_user」を使って「posts_controller.rb」に設定します。

    posts_controller.rbを下のように変更しましょう。

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


    17 18 19 def create @post = Post.create(params.require(:post).permit(:content, :place, :user_id).merge(:user_id => current_user.id)) end

    18行... , :user_id)の後ろに、

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

    を加えました
    これで「user_id」「current_user」の「id」を入れる設定ができました。
    内容を見ると、
    :user_id => current_user.id
    
    「user_id」に「current_user」の「id」を入れているのが、なんとなく理解できるでしょうか?
    この設定は「rails c」でデータを作成(create)変更(update)した時の設定と同じなので分かりやすいと思います。
    「user_id」「current_user」の「id」を入れています。

    では、
    .merge()
    
    はなにをしているのでしょうか?

    これは、追加の設定を加える時の設定になります。今回のように入力欄から送られてこなかったデータを保存したい時に使います。
  • 「@user」の設定

  • 次はページに会員情報を表示させるための標識@userを設定しましょう。
    「users」ページを作った時と同じように、ページで表示させるための@userposts_controller.rbに設定します。

    ここでは投稿をした会員の情報を表示させるので、
    • 投稿データを表示する「show
    • 作成されたデータを表示する「create
    • 変更されたデータを表示する「update
    • 削除したデータを表示する「destroy

    のデータ操作の部分posts_controller.rb@userを設定します。
    @userには投稿をした会員情報を設定するのですが、これは
    User.find(idの番号)
    
    を使って設定します。

    この後ろに入る「idの番号」に、「posts」データベースの「user_id」を入れます。

     例えば、id」が「890」の会員の情報

    1 @user = User.find(890)

    で選択することができますが、この後ろの「id」の部分を「posts」データベースの「user_id」を使って選択することで投稿をした会員情報を選択します。
    ではまずはshowで設定をしてみます。

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


    5 6 7 8 def show @post = Post.find(params[:id]) @user = User.find(@post.user_id) end

    これで@user」に「@post」の投稿をした会員の情報が入りました。

    「@post」の投稿した会員のid「user_id」の会員を「@user」で選択しています。
    この@user」の「family_name」「first_name」をページで表示させます。
     ページの設定をする前に、残っている「create」「update」「destroy」でも、同じように設定を加えましょう!

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


    18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 def create @post = Post.create(params.require(:post).permit(:content, :place, :user_id).merge(:user_id => current_user.id)) @user = User.find(@post.user_id) end def edit @post = Post.find(params[:id]) end def update @post = Post.find(params[:id]) @post.update(params.require(:post).permit(:content, :place)) @user = User.find(@post.user_id) end def destroy @post = Post.find(params[:id]) @post.destroy @user = User.find(@post.user_id) end end

ここまでで「user_id」とページに表示させる「@user」の設定をすることができました。

次は「name」を消して、設定した「@user」を表示させてみましょう!


 ⑵ : ページ表示


 では、ページ表示を設定しましょう。
「posts」データベースの「name」を表示している部分を、「users」データベースの「family_name」「first_name」に変更していきます。

この表示の変更には
  • 入力欄の変更
  • @user」の情報「family_name」「first_name」の表示
の二つがあります。
まずは入力欄の変更からやってみます。

  • 入力欄の変更

  • 「name」の代わりに「user_id」を使ってposts_controller.rb」でのデータ操作をしたので、今度はページ表示で「name」を設定している入力欄を消しましょう。

    「name」の入力欄の設定をしているページは、new.html.erbになります。

     では「new.html.erb」を変更してみましょう!

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


    4 5 6 <p>名前</p> <%= f.text_field :name, :class => "form-control my-form" %> <br>

    この4〜6行目を消しましょう。

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


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


    これで入力欄も消せたので、
    次は「@post」の「name」の代わりに、「@user」の「family_name」「first_name」を表示させるようにしましょう。
  • @userの表示

  • では、会員の情報を表示させてみましょう。

     ページで「@user」の「family_name」を表示させるにはどのような設定をすればいいでしょうか?


    1 <%= @user.family_name %>

    この設定を使って@userを設定した
    • show.html.erb
    • create.html.erb
    • update.html.erb
    • destroy.html.erb

    に、会員の情報「family_name」「first_nameを表示させます。
    まずは@userfamily_name」「first_nameを、showページに表示させてみましょう!
    app > views > posts > show.html.erbを開いて下のように内容を変更してみましょう。

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


    1 2 3 4 5 6 7 8 <hr> <p><%= @user.family_name %><%= @user.first_name %>さん</p> <h4><%= @post.content %></h4> <small><%= @post.created_at %>:<%= @post.place %></small> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p>

    これで、投稿のページに会員の情報を表示させる設定ができました。

    ついでにページを綺麗にするために3,4行目も変更したので、忘れず変更しましょう。
    同じようにして、
    • create.html.erb
    • update.html.erb
    • destroy.html.erb
    も下のように設定しましょう!


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


    1 2 3 4 5 6 7 <h1>投稿が完了しました</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>様</p> <p>内容:<%= @post.content %></p> <p>場所:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

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


    1 2 3 4 5 6 7 <h1>投稿を変更しました。</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %></p> <p>内容:<%= @post.content %></p> <p>場所:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

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


    1 2 3 4 5 6 7 <h1>投稿を削除しました</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %></p> <p>内容:<%= @post.content %></p> <p>場所:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">トップに戻る</a>

     これで「create」「update」「destroy」のページの設定ができました!
    ここまでで大体終わったんですが、実は「index.html.erb」の設定はまだやっていなかったのでやってみたいと思います。

    「index.html.erb」で設定する「@posts」は複数のデータを表示させるため「@user」を指定できないので、ここまででは説明してきませんでした。
    ※ 詳細はこちらを参考にして下さい

    ですが会員の情報を指定した
    User.find(idの番号)
    
    はhtmlファイルの
    <%= %>
    
    の中でも使うこともできるので、それを使って設定してみます。

     例えば、「id」が「90」の会員の「family_name」を表示させるなら、

    1 <%= User.find(90).family_name %>

    と設定すれば、「id」が「90」の会員の「family_name」を表示させることができます。

    ここでは「id」の部分に「user_id」を入れることで、その設定をしてみたいと思います。
    app > views > posts > index.html.erbを開いて、下のように内容を変更しましょう。

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


    1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @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 %> <a href="/posts/new" class="btn btn-primary">新しく投稿する</a>

    変更をした部分は

    4 <p><a href="/users/<%= p.user_id %>">...



    4 <%= User.find(p.user_id).family_name %><%= User.find(p.user_id).first_name %>様

    になります。
    今回のindexページでは全ての投稿データを選択している
    Post.all
    
    <% @post.each do |p| %>
    
    で、一つ一つの投稿データ「p」に分けています(詳細はこちら)。

    この「p」から「user_id」を取得することで、会員の選択と「family_name」「first_name」の表示を行っています。

    4 <%= User.find(p.user_id).family_name %><%= User.find(p.user_id).first_name %>様


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


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


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

    下のようなページは出てきたでしょうか? Chrome posts new after devise before 出てきたら内容を記入して、 Chrome posts new after devise 登録する」ボタンを押しましょう!
    下のようなページが出てきたでしょうか? Chrome posts create after devise これで投稿の内容は保存されました。
    Sequel Proや「show」ページを開いて保存ができているか確認してみましょう!
     Windowsをご利用の方は、SqliteBrowserで確認しましょう!
    index」ページ「0.0.0.0:3000/posts」や「edit」ページなどを開いてみて内容を確認してみましょう。 Chrome posts all after devise create post Chrome posts 1 after devise create post Chrome posts 1 edit after devise Chrome posts 1 update after devise Chrome posts 1 destroy after devise


最後に内容のまとめをします。


 ⑶ : まとめ


ここでは、
今までは「new」ページ設定していた「name」の入力欄をなくして、ログインしている会員の情報で投稿ができるようにしました。

そのために
  • データ操作
  • 会員情報の表示
の設定をしました。ここでそれぞれの内容をまとめます。

設定した内容はこちらを参考にしてみて下さい

  • データ操作

  • データ操作は
    • データの作成(create)時に「user_id」に内容を追加
    • 表示する「@user」の設定
    の2つがある。
     データ作成をするためには「posts_controller.rb」「create」「user_id」に内容を入れる設定を加える。

     posts_controller.rb
    17 18 19 def create @post = Post.create(params.require(:post).permit(:content, :place, :user_id).merge(:user_id => current_user.id)) end

     表示するページのデータ操作の設定に「@user」の標識を設定する。

     posts_controller.rb
    5 6 7 8 def show @post = Post.find(params[:id]) @user = User.find(@post.user_id) end

  • 会員情報の表示

  • 会員情報はデータ操作の@userからデータを表示させる。

     show.html.erb
    1 2 3 4 5 6 7 8 <hr> <p><%= @user.family_name %><%= @user.first_name %>さん</p> <h4><%= @post.content %></h4> <small><%= @post.created_at %>:<%= @post.place %></small> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p>

    長い設定になるが、@userを使わないで表示をすることもできる。

     index.html.erb
    1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @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 %> <a href="/posts/new" class="btn btn-primary">新しく投稿する</a>

    設定した内容はここにまとめてあるので見てみて下さい
    会員の情報で投稿ができるようになったでしょうか?

    もう結構ページの形にはなりましたが、今のままだとログインさえしていれば自分以外の投稿を変更・削除もできてしまう状態になっています。

    次はこれを直すために「会員のチェック」を設定したいと思います。


 ⑶ : 会員のチェックをする


最後に投稿の変更・削除をできる会員のチェックをする設定を加え、「ユーザー管理」の説明も終わりにしたいと思います。
今の状態だと、他の人の投稿の変更・削除ができてしまうのでそれを直しましょう!
流れとしては、他の人の投稿ページでは「編集する」「削除する」のボタンを表示させず Chrome posts 1 invalid user 他の人が作った投稿の「edit」「update」「destroy」ページに移動しようとした時は、 Chrome posts all invalid user トップページに戻らせて、このような通知の表示をさせたいと思います。

会員のチェックは前に使った
ifelse
if 条件
  内容
else
  内容
end
をデータ操作の設定posts_controller.rbに入れることで設定します。
条件に合っていればifの設定を、合っていなければelseの設定を実行させます。
ではやってみましょう!

 ⑴ : ページで条件分岐する


「正しい会員かどうか」のチェックをするとは言いましたが、正しい会員かどうかはどのようにして判定すればいいのでしょうか?

これは「@post」の「user_idcurrent_user」の「id」が一致するかで判定します。

この一致するかどうかの条件は、
判定されるもの == 判定されるもの
で設定します。イコールが2つあるので注意して下さい。

なので例えば、@user」の「id」が「1」かどうかの条件を「ifで判定するには、

1 2 3 4 5 if @user.id == 1 #内容 else #内容 end

と書いて設定します。
一致しない場合は、elseの方の内容を実行もしくは表示します。
この条件の判定の方法で、「posts」データベースの「user_id」と「current_user」の「id」が一致するかを判定します。

 では、「posts」データベースの「user_id」と「current_user」の「id」が一致するかの条件を「if」で判定しましょう。
(1行目の上にマウスを置けば答えがでます)



1 2 3 4 5 if @post.user_id == current_user.id #内容 else #内容 end

 これを使って「正しいユーザーかどうか」を判定します。
ではまず、「posts」データベースの「show」ページで投稿した会員の場合のみ

投稿を編集する

投稿を削除する


を出すようにしましょう! Chrome posts 1 after devise create post Chrome posts 1 invalid user これはshowページを設定するapp > views > posts > show.html.erbに下の設定を追加して下さい。

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


1 2 3 4 5 6 7 8 9 10 <hr> <p><%= @user.family_name %><%= @user.first_name %>さん</p> <h4><%= @post.content %></h4> <small><%= @post.created_at %>:<%= @post.place %></small> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <% if @post.user_id == current_user.id %> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p> <% end %>

新しい会員を登録してその新しい会員で作ってある投稿ページを見てみましょう。

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


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


ボタンが表示されていなければ大丈夫です。 Chrome posts 1 after devise create post
では上にあるログアウトを押してログアウトをしてから、また投稿のページを開いてみましょう。
下のようなエラーのページは出てきたでしょうか? Chrome posts 1 error after sign out これはユーザーがログアウトしてログインしている会員のデータがないのに、current_user」の中身から「id」を取ろうとして出てくるエラーになります。
これを直すには、ユーザーがログインしているかの判定(user_signed_in?を前に加えて、ユーザーがログインしている時だけにボタンを表示させるようにします。
 では、「showページを設定するapp > views > posts > show.html.erbに下の設定を追加して下さい。

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


1 2 3 4 5 6 7 8 9 10 11 12 <hr> <p><%= @user.family_name %><%= @user.first_name %>さん</p> <h4><%= @post.content %></h4> <small><%= @post.created_at %>:<%= @post.place %></small> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <% if user_signed_in? %> <% if @post.user_id == current_user.id %> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p> <% end %> <% end %>

これで設定できました。「user_signed_in」の条件に合う場合のみ、ボタンを表示させるようにしました。

では表示できるか確認しましょう。好きな投稿のページを開いてみましょう。

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


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


ボタンは表示されたでしょうか? Chrome posts 1 after devise create post

 「users」データベースの「show」ページ「0.0.0.0:3000/users/1」の

ユーザー情報を編集する

にも正しい会員かどうかのチェックを追加しましょう。
※ 「users_controller.rb」の「show」で設定した「@user」の「id」と「current_user」の「id」で一致するかを判定します。
※ 「users_controller.rb」でユーザーがログインしているかの判定をしているので、users_signed_in」を設定する必要はありません



 show.html.erb(8,10行目の上のマウスを置くと答えが出ます)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 <h1>ユーザー情報</h1> <hr> <p>名前:<%= @user.family_name %><%= @user.first_name %>さん</p> <p>自己紹介:<%= @user.self_introduction %></p> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <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 %>

 ここまでで「正しい会員かどうか」でのボタンの表示の変更ができました!
ボタンの変更はできたのですが、今のままだとままだと「users」データベースの「edit」ページ「0.0.0.0:3000/users/1/edit」に誰でもアクセスできます。

もし正しくない会員であれば、 Chrome posts all invalid user のようにposts」データベースの「index」ページ「0.0.0.0:3000/postsに飛ばし、

通知を表示させるようにしましょう!


これも今回取り扱った
if @post.user_id == current_user.id
  #内容
else
  #内容
end
controllerファイルに設定して直してみます!


 ⑵ : データ操作で条件分岐する


正しい会員かどうかの判定が必要になるページは、保存された投稿を変更・削除する
  • edit
  • update
  • destroy
の3つのページになります。

順番は前後しますが、まずは
if @post.user_id == current_user.id
  #内容
else
  #内容
end
を使って、正しい会員でなければupdate」のデータ操作をさせないようにしてみます。
app > controllers > posts_controller.rbを下のように変更してみましょう!

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


28 29 30 31 32 33 34 35 def update @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id @post.update(params.require(:post).permit(:content, :place)) else end end

ここでも同じ条件分岐をしていますね。

31 if @post.user_id == current_user.id

の条件に合う場合だけ、

32 @post.update(params.require(:post).permit(:content, :place))

でデータの更新をするようにしました。
※ @userを設定しているので条件は下のようなものでも大丈夫です
if @user.id == current_user.id
if @user == current_user

  「destroy」のデータの削除も条件分岐で、正しい会員でなければ削除ができないようにしましょう!
(40〜43行目の上にマウスを置けば、答えが出ます)



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


37 38 39 40 41 42 43 44 def destroy @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id @post.destroy else end end

ここまででデータ操作を「正しい会員」のみが行えるようになりました。
データ操作はされなくなったので安心なのですが、「正しい会員」でなくてもページには移動できてしまいます。

次は「else」に内容を入れて、条件に合わない時は「posts」データベースの「index」ページに移動させましょう。
htmlでのページの移動は
<a href="移動先のページ">表示する文字</a>
で設定しました。

ですがこのページの移動は、htmlファイルだけでなく「controller」でも設定することができます。

controllerでのページの移動は
redirect_to "移動先のページ"
と設定して、これで設定されたページでページの移動をします。

これを使って「正しい会員」でなかった場合に、0.0.0.0:3000/postsにページ移動させるようにしましょう。
まずは「update」を設定してみます。

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


28 29 30 31 32 33 34 35 36 37 def update @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id @post.update(params.require(:post).permit(:content, :place)) else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end

ついでに通知を出す

35 flash[:alert] = "無効なユーザー"

も追加しましたが、下の

34 redirect_to "/posts"

で「/posts」つまり0.0.0.0:3000/postsに移動できるようにしました。
これと同じように「destroy」も設定しましょう。

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


39 40 41 42 43 44 45 46 47 48 def destroy @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id @post.destroy else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end

これで設定できました。

 「posts_controller.rb」の「edit」に、「正しい会員」でなければ「0.0.0.0:3000/posts」に移動させ「無効なユーザー」の通知を出す設定を追加しましょう。
※ 正しい会員の場合は何もする必要はありません


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


23 24 25 26 27 28 29 30 31 def edit @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end

ここまでで「posts」データベースの「edit」「update」「destroy」ページには正しい会員しか移動できないように設定できました。

 最後に「users_controller.rb」の「edit」「update」に同じような設定を加えましょう!
(マウスを上に乗せれば、答えがでます)



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


13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 def edit @user = User.find(params[:id]) if @user.id == current_user.id else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end def update @user = User.find(params[:id]) if @user.id == current_user.id @user.update(params.require(:user).permit(:first_name, :family_name, :self_introduction)) else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end

これで「users」ページでも「正しい会員」のチェックを設定することができました。
今回の設定はここにあるので参考にして下さい

 最後にまとめをします。


 ⑶ : まとめ


ここでは、
誰にでもアクセスさせてはいけない「users」「posts」
  • edit
  • update
  • destroy
ページに「正しい会員」かどうかのチェックを入れた。


そのために
  • 条件分岐(if/else)
  • ページ移動(redirect_to)
を使ってそれを設定した。
ここでそれぞれの使い方についてまとめる

今回の設定はここにまとめてあるので、参考にして下さい
  • 条件分岐(if/else)

  • 条件に合うかどうかで、ページの表示・データ操作の方法を変更した。
    ifはここを、elseはここを参考。

    今回は一致するかどうかの条件を設定した。
    一致するかどうかは、
    判定するもの == 判定するもの
    
    で判定する。
    実際の設定は下のようになる。

     show.html.erb
    1 2 3 4 5 6 7 8 9 10 <hr> <p><%= @user.family_name %><%= @user.first_name %>さん</p> <h4><%= @post.content %></h4> <small><%= @post.created_at %>:<%= @post.place %></small> <hr> <p><a href="/posts" class="btn btn-info">トップに戻る</a></p> <% if @post.user_id == current_user.id %> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">投稿を編集する</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">投稿を削除する</a></p> <% end %>

  • ページ移動(redirect_to)

  • 「controller」ファイルでのページ移動は、
    redirect_to "移動先のページ"
    
    で設定する。
    これを使った設定は下のようになる(通知を出すflashも入れた)。

     posts_controller.rb
    28 29 30 31 32 33 34 35 36 37 def update @post = Post.find(params[:id]) @user = User.find(@post.user_id) if @post.user_id == current_user.id @post.update(params.require(:post).permit(:content, :place)) else redirect_to "/posts" flash[:alert] = "無効なユーザー" end end

ここまででユーザー管理も終了です。
なかなかウェブページらしいウェブページになったのではないでしょうか?


ここまでで基礎編は終了です。ここまでお疲れ様でした!

ウェブ上での公開方法(macのみ)と、今後の勉強で参考になる教材もありますので参考にしてみて下さい!
次の応用編では簡単なチャットアプリケーションを作ってみます。ここまでの知識を使って、やってみましょう!