9 : ユーザー管理をする①

前の章:トップページを作ろう!

Header9

0 : この章の目的

 世の中に広くあるウェブサービスのようにユーザー管理ができるようにしましょう。
世の中にある多くのウェブサービスでは、利用者はそのウェブページの会員となってサービスを利用します。
このような会員制のサイトのユーザー管理をこの章で設定してみたいと思います。

Ruby on Railsでは、このユーザー管理をするためのgemdeviseを使って会員制のウェブページを作ります。

deviseで作る会員制のサイトの簡単な概要について説明しましょう。
  • ログイン機能

  • postデータベースのページ(0.0.0.0:3000/postsなど)を見るためには会員登録が必要になり、会員登録をせずページを見ようとすると「ログイン」画面に移動する。 Chrome users sign in nav ログインすれば、 Chrome posts all nav after login のようにページが表示されます。
  • ユーザーの情報の登録

  • 登録された会員情報は「users」データベースデータベースは「devise」が作ってくれます)に保存されます。
    この「users」データベースを使って、会員情報のページを作ることもできます。 Chrome users 1 after
  • 他のデータベースとの紐付け

  • 会員の設定ができれば、他のデータがどの会員のものであるかという情報の紐付けをすることもできます。

    例えば、投稿(posts)で言えば、ある投稿を作るときにどの会員がそれを作ったかを設定でき、会員ごとのタイムラインも作ることができます。

この章では、この3つについてやりますが、その前に「devise」の導入についてやってます。


1 : deviseの導入

deviseの導入は、
  • gem "devise"のインストール
  • usersデータベースの作成
  • deviseの表示・views(登録ログイン画面など)の作成
の3つになります。それぞれやってみましょう!

 ① : gem "devise"をインストール


まずはSublime Textでmyappを開いて下さい。
※ Sublime Textの開き方はこちらを参考にして下さい

「devise」はgemになりますので、Gemfileにその設定を加えます。

 Gemfile(「gem 'sprockets', '3.6.3'」の下に「gem 'devise'」を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


26 27 28 29 30 31 32 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3' gem 'execjs' gem 'devise'

Gemfileへの設定が終わったら、ターミナルでbundle installをして、gemを導入します。
まずはターミナルでmyappまで移動します。


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


 ターミナル
1 2 3 cd Desktop cd rails_project cd myapp

その後でbundle installをします。

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

 動かない場合は、「Gemfile.lock」を削除してから、試してみて下さい。

下のような画面は出てきたでしょうか? Terminal bundle install bootstrap
終わったら「gem」の内容を作っているウェブページに適用させるので、ターミナルで

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

を入力して下さい。下のような表示は出てきたでしょうか? Rails g devise install これでdeviseの導入は終了です。
でも実際に使うには、データベースの作成と表示の設定をする必要があります。
次はまずデータベースの作成をやっていきます。


 ② : usersデータベースの作成


次は会員の情報を保存するためのデータベースを作成します。
データベースの作成とは言っても、0から作るわけではないのでご安心を。メールアドレス・パスワード・ログインした日時などの枠組みは「devise」が作ってくれます。
ここでは「devise」が作ってくれない「名字」「名前」「自己紹介」の枠組みを作ります。
まずはターミナルで、

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

を入力して下さい。下のような画面は出てきたでしょうか? Rails g devise user この入力で「devise」の会員データベースになる「users」の枠組みを設定するファイルを作りました。

データベースの名前を「users」ではなく「customers」にしたいなら、
rails g devise customer
を入力します。
日時_devise_create_users.rbというファイルが画面に表示されているのが分かるでしょうか?
deviseが作ってくれた「users」データベースの枠組みの設定ファイルはこれになります。

この設定ファイルの中に「名字」「名前」「自己紹介」の枠組みを追加しますが、その前に中身を見てみます!
Sublime Textでdb > migrate > 日時_devise_create_users.rbを開いてみましょう!
※ Sublime Textの開き方はこちらを参考にして下さい

 日時_devise_create_users.rb
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 class DeviseCreateUsers < ActiveRecord::Migration def change create_table(:users) do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

このようなファイルは出てきたでしょうか?
では「名字」「名前」「自己紹介」の設定を加えましょう。

 3つの枠組み
  • 短い文字列を入れる「family_name(名字)」
  • 短い文字列を入れる「first_name(名前)」
  • 長い文字列を入れる「self_introduction(自己紹介)」
はどのように設定すればいいでしょうか?

※ 分からなかったらこちらを参考にしてみて下さい。


1 2 3 t.string :first_name t.string :family_name t.text :self_introduction

この3行をt.timestamps null: falseの前の行らへんに追加して下さい。

下のように変更できたでしょうか?

 日時_devise_create_users.rb(33〜35行目を追加)
※ 半角英数字で入力。変更が完了したら「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 class DeviseCreateUsers < ActiveRecord::Migration def change create_table(:users) do |t| ## Database authenticatable t.string :email, null: false, default: "" t.string :encrypted_password, null: false, default: "" ## Recoverable t.string :reset_password_token t.datetime :reset_password_sent_at ## Rememberable t.datetime :remember_created_at ## Trackable t.integer :sign_in_count, default: 0, null: false t.datetime :current_sign_in_at t.datetime :last_sign_in_at t.string :current_sign_in_ip t.string :last_sign_in_ip ## Confirmable # t.string :confirmation_token # t.datetime :confirmed_at # t.datetime :confirmation_sent_at # t.string :unconfirmed_email # Only if using reconfirmable ## Lockable # t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts # t.string :unlock_token # Only if unlock strategy is :email or :both # t.datetime :locked_at t.string :first_name t.string :family_name t.text :self_introduction t.timestamps null: false end add_index :users, :email, unique: true add_index :users, :reset_password_token, unique: true # add_index :users, :confirmation_token, unique: true # add_index :users, :unlock_token, unique: true end end

追加ができたらターミナルで、

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

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

を入力して下さい。 Rake db migrate model users こんな風な表示がでてきたら、Sequel Proでデータベースを確認してみましょう!
※ Sequel / SqliteBrowserを参考にして下さい
「myapp_development」を選択して、「users」データベースがあるか確認してみましょう。 Sequel pro users 「users」があったら中身を確認して「family_name」「first_name」「self_introduction」の枠組みがあるかを確認しましょう。
※ もしなかったらこちらを参考にして枠組みを追加しましょう。

これで会員(user)のデータベースができました。
次はページの導入をやってみましょう。


 ③ : 「devise」のページの導入


次は「devise」で使うページの導入をします。
ページの導入もターミナルへの入力だけで自分で作る必要はないのでご安心を。
ではターミナルで下の入力をして下さい。

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

下のような表示は出てきたでしょうか? Rails g devise views 一応中身ができたかを確認しましょう。
app > views > deviseフォルダはできているでしょうか? Sublime text devise フォルダはたくさんありますが、使うのは「registrations」の「new.html.erb」(登録画面)「sessions」の「new.html.erb」(ログイン画面)になります。
導入はここまでです。最後にまとめをしたいと思います。


 ④ : まとめ


「devise」を導入するには、
  • Gemfileの設定とインストール
  • deviseの導入
  • usersの枠組みの導入
  • 表示するviewsの導入
の4つの準備が必要になります。それぞれについてまとめます。
  • Gemfileの設定とインストール

  • 「devise」のgemは、Gemfileに

     Gemfile
    1 gem 'devise'

    を追加して、ターミナルで

     ターミナル
    1 bundle install

    を入力することで設定する。
  • deviseの導入

  • 「devise」のgemをインストールすることができたらターミナルで

     ターミナル
    1 rails g devise:install

    を入力することで設定する。
  • usersの枠組みの設定

  • 会員データベースの枠組みの設定で

     ターミナル
    1 rails g devise user

    を入力して、「devise」の「users」データベースを作るための設定ファイルを作る。

    内容を自分の好きなように変更したらターミナルで、

     ターミナル
    1 rake db:migrate

    を入力して、「users」データベースを作る。
  • 表示するviewの設定

  • 「devise」のページもターミナルへの入力で作る。

     ターミナル
    1 rails g devise:views

    を入力して、「devise」のページを作る。


2 : ログイン機能

deviseの導入も終わったので、まずはログイン機能から見てみましょう!
rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


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


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

 このページが登録ページになります。 Chrome users sign up before
今度は「0.0.0.0:3000/users/sign_in」を開いてみましょう!
 Windowsをご利用の方は、「localhost:3000/users/sign_in」を開いてみて下さい。

 これがログインページになります。 Chrome users log in before

 ① : 登録ログイン画面を綺麗にしよう!


最初に復習もかねて、登録ログイン画面をBootstrapで綺麗にしてみましょう!

ここでは、 の2つをやってみます。

 ⑴ : btnとform-control


今のページだと入力欄とボタンがすごくダサいですよね。
btnform-controlをそれぞれ加えてページを綺麗にしましょう。

まずは登録ページ(0.0.0.0:3000/users/sign_up)を見てみます。
「app > views > devise > registrations」のフォルダに入っているnew.html.erbを開いてみましょう!
※ Sublime Textの開き方はこちらを参考にして下さい

 new.html.erb(registrationsフォルダ)
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 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off" %> </div> <br> <div class="actions"> <%= f.submit "Sign up" %> </div> <% end %> <%= render "devise/shared/links" %>

このようなファイルが開けたでしょうか?
「form_for」などがあって内容は分かりづらくもないと思います。
f.label :文字
は「文字」を表示して、
f.email_field :email
でメールを入力させるための入力欄を、
f.password_field :password
でパスワードを入力させるための入力欄を設定しています。

 new.html.erbの「f.email_field」に、Bootstrapの入力欄の設定を加えて下さい。
※ 分からなくなったら、こちらを参考


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


8 <%= f.email_field :email, autofocus: true, :class => "form-control" %>

これでもBootstrapの入力欄の設定はできますが、長すぎるので前に作った「my-form」を加えて長さを短くしましょう。

「f.email_field」の設定が終わったら、 を加えましょう。

 new.html.erb(8、16、21、23、25行目を変更)
※ 半角英数字で入力。変更が完了したら「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 <h2>Sign up</h2> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= devise_error_messages! %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %> <% if @minimum_password_length %> <em>(<%= @minimum_password_length %> characters minimum)</em> <% end %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password_confirmation %><br /> <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control my-form" %> </div> <br> <div class="actions"> <%= f.submit "Sign up", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

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


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


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

下のように表示されたでしょうか? Chrome users sign up bootstrap
登録画面の設定が終わったので、今度はログイン画面の設定をやってみましょう。
ログイン画面はapp > views > devise > sessionsフォルダの中にあるnew.html.erbに設定します。

では、
  • 入力欄に「form-control」と「my-form
  • ボタンに「btn」と「btn-primary
を加えてみましょう!

 new.html.erb(sessionsフォルダ)
※ 半角英数字で入力。変更が完了したら「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 <h2>Log in</h2> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <div class="field"> <%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, :class => "form-control my-form" %> </div> <div class="field"> <%= f.label :password %><br /> <%= f.password_field :password, autocomplete: "off", :class => "form-control my-form" %> </div> <% if devise_mapping.rememberable? -%> <div class="field"> <%= f.check_box :remember_me %> <%= f.label :remember_me %> </div> <% end -%> <br> <div class="actions"> <%= f.submit "Log in", :class => "btn btn-primary" %> </div> <% end %> <%= render "devise/shared/links" %>

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


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


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

下のように表示されたでしょうか? Chrome users log in bootstrap ボタンと入力欄の設定ができたので、次はnavigation-barに設定を追加したいと思います。


 ⑵ : navigation-bar


navigation-bar登録するログインするのリンクを作ってみましょう!
今回はnavigation-barの右側にこの二つにリンクを追加します。

 登録画面のページ「0.0.0.0:3000/users/sign_up」へのリンクを設定してみましょう。
※ 「0.0.0.0:3000」へのリンクは「/」と省略することができます。


1 <a href="/users/sign_up">登録する</a>

同じように0.0.0.0:3000/users/sign_inへの「ログインする」のリンクは

1 <a href="/users/sign_in">ログインする</a>

で設定します(マウスを上に載せれば答えがでます)。

このリンクをapplication.html.erbにあるnavigation-barに加えます。
まずSublime Textで、app > views > layoutsフォルダにある「application.html.erb」を開いて、下の内容を加えましょう。
※ Submite Textの開き方はこちらを参考にして下さい

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


10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">登録する</a></li> <li><a href="/users/sign_in">ログインする</a></li> <li><a href="/posts/new">新しく投稿する</a></li> </ul> </div> </div> </nav>

※ navigation-barの使い方はこちらを参考にして下さい
※ 一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


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


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

下のようなページは表示されたでしょうか? Chrome posts nav add log in
装飾も意外と簡単にできたのではなかったでしょうか?

 次から実際のログイン機能を作って、ログインしないと「posts」のページに入れないようにしましょう。


 ② : ログイン機能を設定する


今のままだと会員登録をしてもしなくても投稿ができるという謎の状態になっているので、
  • ログインしている会員にだけ、投稿(posts)のページを見せる設定
  • Chrome posts sign in before alert
  • ログインに成功した時・間違った時に表示させる通知の設定
  • Chrome users log in after Chrome posts fail to sign in
をしたいと思います。

 ⑴ : ログインした会員に「posts」ページを見せる


ではログイン会員以外には「posts」のページを見れないようにしましょう。
方法は簡単で、見せたくないページの「controller」ファイルに下の設定を加えるだけです。

1 before_action :authenticate_user!

ではやってみます。
「posts_controller.rb」を下のように変更してみましょう。

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


1 2 3 4 5 6 7 8 9 10 class PostsController < ApplicationController before_action :authenticate_user! def show @post = Post.find(params[:id]) end def index #以下省略

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


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


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

 まだログインができていないので、ログイン画面がでてきたのではないのでしょうか? Chrome posts sign in before alert 0.0.0.0:3000/posts/1などの他のページでもそうなるかみてみましょう。
 Windowsをご利用の方は、「localhost:3000/posts/1」を開いてみて下さい。


今の状態だと全ての「posts」ページが見れなくなっているのですが、例えば「show」「index」だけは会員でなくても見れるようにすることもできます。

「show」と「index」だけで表示をさせるように設定してみましょう!
さっきの「posts_controller」の設定を少し変更してみます。


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


1 2 3 4 5 6 7 8 9 10 class PostsController < ApplicationController before_action :authenticate_user!, :only => [:new, :create, :edit, :update, :destroy] def show @post = Post.find(params[:id]) end def index #以下省略

後半のonly => [...]の部分を追加しました。
この設定方法はroutes.rbと似ている、というより全く同じですね。

今回は の5つのページで、ログインしているかのチェックをしています。

 「new」と「create」のみでログインしているかをチェックするにはどのような設定を「controller」ファイルに追加すればいいでしょうか?


1 before_action :authenticate_user!, :only => [:new, :create]


 ⑵ : ログインの通知を設定する


ここまでで、ログインしないとページを見れないようになりました。
すぐに登録してみてログインしてみてもいいのですが、その前にログインしたかの通知を設定したいと思います。 Chrome users log in after Chrome posts fail to sign in これも少し設定を加えるだけでできるのでやってみます。
まずは「app > views > layouts > application.html.erb」<div class="container main-page">の中を下のように変更してみて下さい。

 application.html.erb(<div class="container main-page">の後に内容を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


36 37 38 39 40 41 42 43 44 45 46 47 </nav> <div class="container main-page"> <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div>

※ 一回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 fail to sign in
 この設定の内容を説明しましょう。

今回の設定の中で新しく

1 <% if notice %>
1 <% if alert %>

という設定が加わったと思います。これはなにをしているのでしょうか?

これらは

1 <% end %>

とセットで、条件分岐による表示の設定をしています。

条件を
<% if 条件 %>
で指定して、条件にあっていれば
<% end %>
までの内容を表示させています。

今回の条件の

<% if notice %>
は通知が来た時の条件を
<% if alert %>
はエラーの通知が来た時の条件を設定しています。
<% if notice %>」(通知が来た時:notice)は、

1 2 <br> <p class="alert alert-success"><%= notice %></p>

<% if alert %>」(エラーの通知:alert)は、

1 2 <br> <p class="alert alert-danger"><%= alert %></p>

にそれぞれ表示していて、

noticeなら

Signed in successfuly.


alertなら

You need to sign in or sign up before continuing.


のような通知の内容が、
<%= notice %> <%= alert %>
に入って表示されます。
それに加えて、表示された文字列には色がついていますね。
これは、文字のclassに指定された「alert」と「alert-success」「alert-danger」が実は「Bootstrap」の設定で色付きの表示をしているからです。

2 <p class="alert alert-success"><%= notice %></p>

2 <p class="alert alert-danger"><%= alert %></p>


緑色の通知は

<p class="alert alert-success">表示する文字列</p>

赤色の通知は

<p class="alert alert-danger">表示する文字列</p>

で表示させます。

ここまでをまとめると、
  • 「<% if notice %>」と「<% end %>」の間がページに通知が来た時の表示
  • 「<% if alert %>」と「<% end %>」の間がページにエラーの通知が来た時の表示
を設定しています。

その内容はそれぞれ「<%= notice %>」「<%= alert %>」でその通知を表示させています。
ではこの通知はどこから来ているのでしょうか?
実はこの通知は作ることもできるので、試しに一回この通知を作ってみたいと思います。


  • 通知(notice)
  • flash[:notice] = "表示する文字"
    
  • エラーの通知(alert)
  • flash[:alert] = "表示する文字"
    
controller」ファイルに設定することで表示させることができます。

ここで設定された通知がページ内の
<%= notice %>  <%= alert %>
に表示されます。

show」のページの「0.0.0.0:3000/posts/1に自分で作った通知を表示させてみましょう。

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


5 6 7 8 def show @post = Post.find(params[:id]) flash[:notice] = "投稿" end

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


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


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

下のように表示されたでしょうか? Chrome posts 1 flash この通知があまり多すぎても無駄なので、今回設定した通知は消してください。
「devise」の通知でもこれを使っています。
中身は「devise」が自動で作ってくれますが、なんとなく内容を理解してもらえれば幸いです。

 「posts_controller.rb」のedit」ページに、「@post」の「content」の通知を表示させる設定はどのようにすればいいでしょうか?
※ マウスを上に置けば、答えが表示されます。


1 2 3 4 def edit @post = Post.find(params[:id]) flash[:notice] = @post.content end


 ⑶ : ログインする


「posts」ページ表示の制限も通知もできたので、ログインしてみましょう!
登録ページ「0.0.0.0:3000/users/sign_upを開いて登録をしましょう。

 Windowsをご利用の方は、localhost:3000/users/sign_upを開いて登録しましょう! Chrome users sign up bootstrap 登録ができたら下の画面が出てくると思います。 Chrome posts root after sign up これで会員登録ができました。
new」ページ「0.0.0.0:3000/posts/newを開いてみましょう。ログイン画面に戻らなければ大丈夫です。

 Windowsをご利用の方は、localhost:3000/posts/newを開きましょう。
会員登録もできたの「users」データベースにも内容が保存されました。Sequel Proで会員データが保存されたかを確認しましょう。
※ Sequel Proの開き方はこちらを、SqliteBrowserの開き方はこちらを参考にして下さい

下のように保存したデータは追加されているでしょうか? Sequel pro users 1


 ③ : まとめ


これまででログイン機能の設定をしました(とは言ってもほとんど「devise」がやってくれたんですが・・・)。
ここで内容のまとめをしたいと思います。

今回は
  • 登録ログイン画面の設定
  • どのページに会員制限をかけるかの設定
  • 通知の設定
の3つの設定をしました。

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

  • 登録ログイン画面の設定

  • 登録画面(「0.0.0.0:3000/users/sign_up」)

    app > views > devise > registrationsフォルダにあるnew.html.erbファイルに設定を加えます。 Chrome users sign up bootstrap
    ログイン画面(「0.0.0.0:3000/users/sign_in」)

    app > views > devise > sessionsフォルダにあるnew.html.erbファイルに設定を加えます。 Chrome users log in bootstrap
  • どのページに会員制限をするかの制限

  • ページ表示の制限は、制限したいページのデータベースの「controller」ファイルに下の設定を加える。

    1 before_action :authenticate_user!

    これだと全てのページに制限がかかるので、制限をするページを指定することもできる。

    1 before_action :authenticate_user!, :only => [:new, :create, :edit, :update, :destroy]

  • 通知の設定

  • 「devise」では、ログイン登録で通知を表示する設定もできる。
    通知を設定するには下の設定を加える(上の方に表示したほうが見やすくていい)。

    1 2 3 4 5 6 7 8 <% if notice %> <br> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <br> <p class="alert alert-danger"><%= alert %></p> <% end %>

    中身は
    <% if 条件 %>
      内容
    <% end %>
    
    を使って、通知かエラーの通知が来た時にその指定した内容を表示させています。

    設定した内容はここにまとめてあるので見てみて下さい

ここまでお疲れさまでした。ページの内容もなんとなく会員制のページに近づいたのではないでしょうか?
 「users」データベースの中身を詳しく見ればわかると思うのですが、
  • 「family_name」
  • 「first_name」
  • 「self_introduction」
の枠組みにデータは入っていません。入力させていなかったんで当然ですね。

次はここにデータを入れるために、「users」データベースのページを作りましょう。