Rails – 掲示板 – 仮のプロフィールページ

2021-03-25 / tau / コメントする

概要

第1段階でユーザーの登録(サインアップ)や認証(サインイン／サインアウト)ができるようになった。これからはサインインしたユーザーに応じた表示や操作を実装していく。

最初に、サインインしているユーザーのプロフィール画像表示を実装する。

ここでは、サインイン中のユーザーがメニューの「プロフィール」をクリックしたときにプロフィールページへ遷移させる。現段階では、サインイン中のユーザー名を表示し、ダミー画像とプレースホルダーのコメントを表示させる。

掲示板の第2段階へ

枠組み

全体の枠組み

全体の枠組み設定は以下のとおりとする。

プロフィールページのURLは"ドメイン/profile/ユーザーID"
アクションはusers#show(個々のユーザーの情報を表示するためshowを選択)
ビューファイルはapp/views/users/show.html.erb

ユーザーに応じた反応

基本の流れは以下の通り。

ルーティングのURIパターンでユーザーIDを付加
遷移ページのリンク先として、ルーティングの名前でサインイン中のユーザーIDを指定
コントローラーでIDを使ってデータベースからユーザーオブジェクトを取り出す
ビューにおいて、そのユーザーオブジェクトを使う

実装

ルーティング

まず、プロフィールページへのURLがリクエストされたときのルーティングを設定する。

routes.rb

Rails.application.routes.draw do

  .....

  get '/profile/(:id)', to: 'users#show', as: :profile
end

Rails.application.routes.draw do

.....

get '/profile/(:id)', to: 'users#show', as: :profile

end

この書き方がユーザーに応じたページへのルーティングの書き方。

ユーザーを指定するため、データベース中のusers.idの値をURLで指定
- (:id)の括弧がなくても問題なさそう
プロフィールは各ユーザー固有の情報を表示するため、showアクション
Prefixを指定する
- :idを付加した場合、デフォルトのPrefixは設定されないため

指定されたユーザーの取得

ルーティング先のアクションで、:idを使ってデータベースからユーザーオブジェクトを取り出す。オブジェクトがビューでも使えるよう、インスタンス変数に格納する。

また、サインインしていない状態でshowアクションを読んだ場合にアクセス制限をかけるよう、before_actionを設定する。ただしサインアップ／サインインに関するアクションはexcept:で除外しておく。

users_controller.rb

class UsersController < ApplicationController
  before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

  .....

  def show
    @user = User.find(params[:id])
  end

  .....

end

class UsersController < ApplicationController

before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

.....

def show

@user = User.find(params[:id])

end

.....

end

findはモデルのクラスメソッドで、モデルのIDを指定してデータベースからデータを取得する。引数に指定できるのはIDの値のみ。

ユーザーオブジェクトを使った表示

アクションでセットされたユーザーオブジェクトを使って、ユーザーに応じたページ表示をするためのHTMLを書く。

users/show.html.erb

<div class="user_profile">
  <h1><%= @user.name %>さんのプロフィール</h1>
  <div class="contents">
    <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
    <p class="comment">
      ここにプロフィールコメントを表示
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
    </p>
  </div>
</div>

<h1><%= @user.name %>さんのプロフィール</h1>

<%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>

ここにプロフィールコメントを表示

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</p>

</div>

ここでは@userのnameを使ってサインイン中のユーザーの名前を表示させている。画像やコメントはダミーだが、サインイン中のユーザーに応じたページが表示されることが確認できる。

なお4行目で、プロフィール画像のプレースホルダーとしてCDNによるダミー画像を利用している。

サインインユーザーによるページの呼び出し

サインイン中のユーザーがメニューの「プロフィール」をクリックしたときに、そのユーザーのプロフィールが表示されるよう、link_toヘルパーを設定する。

application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <div class="header_logo"></div>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

ルーティングで設定したPrefixを使ったパス名に(ユーザーID)を指定している。

link_to("...", profile_path(user_in_session))

(user_in_session)とユーザーオブジェクトそのものを指定しているが、これはRailsでの省略法で、これで(user_in_session.id)と同じことになる。

パス名ではなく、URIを文字列で指定する方法もある。その場合はルーティングで指定した"/profile/(:id)"の形になるように文字列で指定する。ただしlink_toだと<%= ... %>が入れ子にできないためかエラーになるので、aタグを使うことになる。

<a href="/profile/<%= user_in_session.id %>">プロフィール</a>

スタイル設定

プロフィールページのスタイルを設定する。

users.scss

.....

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      background-color: #f8f8f8;
    }
  }
}

.....

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

background-color: #f8f8f8;

}

トップページへのリンク

プロフィール画面からトップページに戻るリンクをヘッダーメニューに設定する。application.html.erbに更に変更を加える。

application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("トップ", top_path) %></li>
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

</ul>

</header>

<%= yield %>

</body>

</html>

8～10行目は、ヘッダーのロゴにトップページへのリンクをセットしている。他の要素にリンクを設定するには、link_to(...) doとendのブロックにする。

14行目では、メニューに「トップ」という項目を追加し、トップページへのリンクを設定している。

表示結果

追補～サイズの固定とスクロール表示

その後、コメント表示を以下の様に変更した。

p要素の幅と高さを固定
overflow-y: autoを追加し、コメントが長くなった場合にスクロールバーを表示

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      width: 300px;
      height: 100px;
      overflow-y: auto;
      background-color: #f8f8f8;
    }
  }
}

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

width: 300px;

height: 100px;

overflow-y: auto;

background-color: #f8f8f8;

}

Tips – CDN – アイコン・ダミー画像など

2021-03-25 / tau / コメントする

アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

メールアドレスでアカウントを取得する
アイコンを利用するためのキット番号を取得
- アカウント取得後は”Manage Kitのリンク先で確認できる
アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
アイコンを利用する場所にコピーしたタグを張り付ける
必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

1	<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

<i class="fas fa-sign-out-alt"></i>

1	<i class="fas fa-sign-out-alt"></i>

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

<i class="fa fa-sign-out-alt header_icon"></i>

1	<i class="fa fa-sign-out-alt header_icon"></i>

CSS

.header_icon {
  font-size: 30px;
  color: #0af;
}

.header_icon {

font-size: 30px;

color: #0af;

}

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

1	<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

1	<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

また、表示させるテキストも自由に設定できる。

<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

1	<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

Rails – 掲示板 – 第2段階

2021-03-25 / tau / コメントする

概要

第1段階でユーザーの取り扱い全般を実装したが、第2段階ではコンテンツの投稿に関する機能を実装していく。

ここでは以下を含む。

プロフィールや新規投稿などユーザーに応じたページの表示と操作
CDNによるアイコンの導入
データベースへのカラムの追加
リレーションを持ったテーブル構造の操作
画像のアップロードなどを含む。

掲示板の全体ページへ

要件

画面遷移

サインイン中の画面遷移を対象とする。

/top画面で
- ユーザーの投稿記事(名前、コメント、画面、日付)を表示(上限数付き)
- メニューの「プロフィール」からユーザーごとの/profile画面へ
- メニューの「ユーザー設定」からユーザーごとの/edit画面へ
- メニューの「投稿する」から/post画面へ
/profile画面で
- ユーザーの名前、画像、コメントを表示
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ
/edit画面で
- プロフィール画像、プロフィールコメントを選択・編集
- ボタンを押してプロフィールの内容を変更し、/profile画面へ遷移
/post画面で
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- 記事投稿後、ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ

データベース

テーブル

登録ユーザーテーブル：users

userテーブルは、プロフィールに表示する以下の項目について新たにカラムに追加。

プロフィール画像のファイル名
コメントテキスト

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
name	VARCHAR(255)	string	ユーザー名
email	VARCHAR(255)	string	メールアドレス
pasword	VARCHAR(255)	string	パスワード
image_file_name	VARCHAR(255)	string	プロフィール画像ファイル名
comment	TEXT	text	プロフィールコメント
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿記事テーブル：posts

postsテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿ユーザーのid(users.idを参照)
投稿記事のメッセージを保存する。なお画像のみの投稿も認めるため、commentはNULLを許容する。

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
user_id	BIGINT	references	usersテーブルのid
message	TEXT	text	メッセージ本文
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿画像テーブル：post_images

post_imagesテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿記事のid(posts.idを参照)
画像ファイルのファイル名

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
post_id	BIGINT	references	postsテーブルのid
file_name	VARCHAR(255)	string	画像ファイル名
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

リレーション

テーブル間の関係は以下のとおり。

userは0以上複数のpostを持つ
postは必ず1つのuserに属する
postは0以上複数のpost_imageを持つ
post_imagesは必ず1つのpostに属する

検討

コントローラーとアクション

/profile/:id -> users#show

ユーザーごとのプロフィールを表示する
プロフィールの内容はプロフィール画像とコメント

users#edit, users#update

ユーザーごとのプロフィールを編集する
編集内容は、画像の登録／差し替え、コメントの記入／変更

posts_controller.rb

投稿記事を取り扱うコントローラー
投稿記事の新規登録、編集、削除
投稿記事は1つのメッセージと0～複数の画像からなる
メッセージがあれば画像はなくてもよく、画像があればメッセージは空でもよい

ビュー

users

users/profile.html.erb：ユーザーのプロフィールページ
users/edit.html.erb：ユーザー設定ページ
posts/new.html.erb：新規投稿ページ
posts/edit.html.erb：投稿内容編集ページ

スタイルファイル

プロフィールページやユーザー設定ページのスタイル定義を追加。

users.css

投稿関係ページのスタイルは以下のファイルに新規に作成

posts.css

実装手順

プロフィール

記事投稿

Rails – 掲示板 – トップ画面の仮表示

2021-03-25 / tau / コメントする

概要

サインアップ(ユーザー登録)、サインイン・サインアウト(ユーザー認証)、アクセス制御まで実現できたので、トップページを表示したときに登録済みユーザーの情報を表示させるように仮組みする。

掲示板の第1段階へ

コントローラー

pagesコントローラーのtopアクションで、usersテーブルに登録された全ユーザーをオブジェクトとして取り出し、その名前とメールアドレスを一覧として表示させる。

class PagesController < ApplicationController
  before_action :authorize

  def top
    @users = User.all.order("id desc")
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

@users = User.all.order("id desc")

end

処理概要は以下のとおり。

allメソッド：モデルのクラスメソッドで、テーブルの全データをモデルインスタンスの配列として取り出す
orderメソッド：SQLのORDER BY句を適用する
- 引数は1つの文字列として与え、スペースで区切る
- 1つ目は並べ替えの基準とするカラム
- 2つ目は並べ替えの順序(asc：昇順・デフォルト、desc：降順)
取り出した結果は、ビューで利用可能なようにインスタンス変数に格納する

ビュー

コントローラーで得られた@usersの要素を取り出し、テーブルとして出力。

<div class="top_page">
  <h2>登録ユーザー一覧</h2>

  <div class="user_list">
    <table>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
        </tr>
      <% end %>
    </table>
  </div>
</main>

<h2>登録ユーザー一覧</h2>

<table>

<% @users.each do |user| %>

<tr>

</tr>

<% end %>

</table>

</div>

</main>

表示結果

Rails- 掲示板 – アクセス制御

2021-03-24 / tau / コメントする

概要

セッション機能を使って、悪性制御を行う。

サインインしていない状態で登録ユーザー用のページ(今回はトップページ)にアクセスした場合、これを表示せずにサインインページにリダイレクトする。

また、サインイン状態でルートにアクセスした場合はトップページを表示する。

掲示板の第1段階へ

セッション中確認機能の追加

以下のメソッドをUserHelpaerモジュールに追加する。

user_in_session?: アクセスしたユーザーがサインイン中かどうか(そのユーザーのセッションが存在するか)判定するメソッド。
authorize: ユーザーがサインイン状態でなければサインインページにリダイレクトするメソッド。コントローラーのフィルターでコールバックとして登録するのに用いる。

module UsersHelper

  .....

  def user_in_session?
    user_in_session.present?
  end

  .....

  def authorize
    redirect_to :sign_in unless user_in_session?
  end
end

module UsersHelper

.....

def user_in_session?

user_in_session.present?

end

.....

def authorize

redirect_to :sign_in unless user_in_session?

end

アクション実行前の認証

UserHelperで定義したauthorizeメソッドを、トップページを含むpageコントローラーのフィルターで設定する。

class PagesController < ApplicationController
  before_action :authorize

  def top
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

end

ここではpageコントローラーのフィルターとして設定し、コントローラーにはtopアクションが含まれている。

アクセスしたユーザーがサインイン状態であればtopビューがレンダリングされ、サインインしていなければauthorizeの内容に従ってsign_inページに遷移する。

たとえばアクションによって振り分けたい場合はフィルターのonlyやexceptで対象となるアクションを制御する。

Rails – 掲示板 – セッション機能

2021-03-24 / tau / コメントする

概要

ユーザー認証によってサインインしたユーザーの情報を保持し、サインアウト時にそれを破棄する。

サイトのルートはトップページ
- サインインしていなければサインインページへリダイレクト
- サインイン中のユーザーの名前表示
- メニューからサインアウト可能
サインインページ
- サインイン成功後にトップページに遷移
サインアップページ
- サインアップ成功後にトップページに遷移

掲示板の第1段階へ

ヘルパーの追加

ヘルパーモジュールのインクルード

以降、ユーザーセッションの管理に関するメソッドをUserHelperモジュールに書いていく。

プロジェクト内でそれらを共有するため、applicationコントローラーでモジュールをインクルードする。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  # ユーザーセッションの管理に関するメソッドモジュールをインクルード
  include UsersHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# ユーザーセッションの管理に関するメソッドモジュールをインクルード

include UsersHelper

end

ヘルパーモジュールのメソッド定義

ユーザーのサインイン／サインアウト処理、サインイン中のユーザーを取得するメソッドを、UserHelperモジュールに書く。

セッション中のユーザーをインスタンス変数に保持する。

app/helpers/user_helper.rb

module UsersHelper
  # ユーザーIDをセットしてセッション開始(サインイン)
  def user_session_start(user)
    session[:user_id] = user.id
  end

  # セッション中のユーザーインスタンスを取得
  def user_in_session
    # 初めて取得する場合、インスタンス変数に保存
    if @user_in_session.nil?
      @user_in_session = User.find_by(id: session[:user_id])
    # 既に取得済みなら、インスタンス変数で返す
    else
      @user_in_session
    end
  end

  # セッション終了(サインアウト)
  def user_session_end
    session.delete(:user_id)
    @user_in_session = nil
  end
end

module UsersHelper

# ユーザーIDをセットしてセッション開始(サインイン)

def user_session_start(user)

session[:user_id] = user.id

end

# セッション中のユーザーインスタンスを取得

def user_in_session

# 初めて取得する場合、インスタンス変数に保存

if @user_in_session.nil?

@user_in_session = User.find_by(id: session[:user_id])

# 既に取得済みなら、インスタンス変数で返す

else

@user_in_session

end

# セッション終了(サインアウト)

def user_session_end

session.delete(:user_id)

@user_in_session = nil

end

サインイン・サインアウト処理

サインイン処理

サインインに成功した場合、セッションを開始してユーザIDを登録する。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  def sign_in_process
    # フォームに値を残すため、入力内容をセットしたモデルインスタンス使う
    @user = User.new(user_params)
    # パスワードをサインアップ時と同じ方法で暗号化
    encrypted_password = User.generate_digest(user_params[:password])
    # アドレスとパスワードが一致する最初のユーザーを取得
    user = User.find_by(email: user_params[:email], password: encrypted_password)
    # サインイン成功の場合、トップページに遷移
    if user
      user_session_start(user)
      redirect_to top_path and return
    # サインイン失敗の場合、サインインページに戻る
    else
      flash.now[:danger] = "サインインできません"
      render :sign_in, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_in_process

# フォームに値を残すため、入力内容をセットしたモデルインスタンス使う

@user = User.new(user_params)

# パスワードをサインアップ時と同じ方法で暗号化

encrypted_password = User.generate_digest(user_params[:password])

# アドレスとパスワードが一致する最初のユーザーを取得

user = User.find_by(email: user_params[:email], password: encrypted_password)

# サインイン成功の場合、トップページに遷移

if user

user_session_start(user)

redirect_to top_path and return

# サインイン失敗の場合、サインインページに戻る

else

flash.now[:danger] = "サインインできません"

render :sign_in, layout: 'application_signed_out' and return

end

.....

end

サインアップ後の処理

サインアップが成功した場合も、サインイン状態と同様にセッション登録してトップページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_up_process
    # フォームに値を残すため@userを使う
    @user = User.new(user_params)
    # 適正にユーザー登録した場合、セッションを開始しトップページに遷移
    if @user.save
      user_session_start(@user)
      flash.now[:success] = "ユーザー登録しました"
      redirect_to top_path and return
    # 不適正な入力の場合、エラーを表示してサインアップページに戻る
    else
      flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")
      render :sign_up, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

# フォームに値を残すため@userを使う

@user = User.new(user_params)

# 適正にユーザー登録した場合、セッションを開始しトップページに遷移

if @user.save

user_session_start(@user)

flash.now[:success] = "ユーザー登録しました"

redirect_to top_path and return

# 不適正な入力の場合、エラーを表示してサインアップページに戻る

else

flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")

render :sign_up, layout: 'application_signed_out' and return

end

.....

end

サインアウト処理の追加

サインイン中のユーザーがサインアウトを要求した時のアクションを、usersコントローラーに定義する。

サインアウトにあたってセッションを停止し、サインインページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_out
    user_session_end
    redirect_to :sign_in and return
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_out

user_session_end

redirect_to :sign_in and return

end

.....

end

ルーティングの設定

サインアウトのルーティングを追加する。

Rails.application.routes.draw do
  get '/top', to: 'pages#top'

  get '/sign_up', to: 'users#sign_up'
  get '/sign_in', to: 'users#sign_in'
  get '/sign_out', to: 'users#sign_out'

  post 'sign_up', to: 'users#sign_up_process', as: :sign_up_process
  post 'sign_in', to: 'users#sign_in_process', as: :sign_in_process
end

Rails.application.routes.draw do

get '/top', to: 'pages#top'

get '/sign_up', to: 'users#sign_up'

get '/sign_in', to: 'users#sign_in'

get '/sign_out', to: 'users#sign_out'

post 'sign_up', to: 'users#sign_up_process', as: :sign_up_process

post 'sign_in', to: 'users#sign_in_process', as: :sign_in_process

end

ビューの修正・サインアウト

ヘッダー部にサインイン中のユーザー名を表示する。

また、ヘッダーメニューのサインアウトのリンク先をsign_outアクションとする。

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <div class="header_logo"></div>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", "#") %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

Rails – フィルター

2021-03-24 / tau / コメントする

概要

フィルターは、コントローラーのアクションが実行される前や後などに登録した関数が実行されるよう設定する。

特定のアクションのときだけ実行したり、指定したアクション以外のときに実行させるよう指定できる。

フィルターの種類

before_action

before_action :コールバック

アクションの実行前に、指定したコールバックを実行するよう設定する。

after_action

after_action :コールバック

アクションの実行後に、指定したコールバックを実行するよう設定する。

around_action

around_action :コールバック

アクションの実行中に、指定したコールバックを実行するよう設定する。

コールバック中にアクションの実行をyieldするような場合に使うらしい。

only/except

コールバックを実行するアクションを限定したり(only)、除外したり(except)する。

before_action :コールバック, only: [...], except: [...]

only/exceptの指定は、コールバックのシンボルをカンマで区切って並べる。

[:コールバック1, :コールバック2, ...]

Rails – 掲示板 – ユーザー認証機能

2021-03-23 / tau / コメントする

概要

サインアップしたユーザーが、メールアドレスとパスワードでサインインし、サインアウトする機能を実装する。

セッションによるアクセス制限などの管理は後に実装し、ここではユーザー認証とページ遷移だけにとどめる。

掲示板の第1段階へ

サインイン機能

サインイン処理アクション

サインインが要求されたとき、sign_inアクションからサインインのビューがレンダリングされる。ビューのフォームとの間でUserモデルを介してデータをやりとりするので、アクションでUserモデルのインスタンスを生成しておく。

class UsersController < ApplicationController

  .....

  def sign_in
    @user = User.new
    render layout: 'application_signed_out'
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_in

@user = User.new

render layout: 'application_signed_out'

end

.....

end

フォームでのモデルの設定

サインインのビュー、sign_in.html.erbのform_withヘルパーで、コントローラーで生成されたUserモデルのインスタンスを指定する。

app/views/users/sign_in.html.erb

<div class="sign_in_page">
  <h1>EX-BBS</h1>
  <div class="sign_in_form">
    <h2>サインインページ</h2>
    <%= form_with model: @user, url: sign_in_path, local: true do |f| %>
      <%= f.email_field :email, placeholder: "メールアドレスを入力" %>
      <%= f.password_field :password, placeholder: "パスワードを入力" %>
      <button>サインイン</button>
      <p>ユーザー登録したい方は<%= link_to "サインアップへ", sign_up_path %></p>
    <% end %>
  </div>
</div>

<h2>サインインページ</h2>

<%= form_with model: @user, url: sign_in_path, local: true do |f| %>

<%= f.email_field :email, placeholder: "メールアドレスを入力" %>

<%= f.password_field :password, placeholder: "パスワードを入力" %>

<button>サインイン</button>

<p>ユーザー登録したい方は<%= link_to "サインアップへ", sign_up_path %></p>

<% end %>

</div>

サインイン処理

サインインフォームの入力情報は、users_controllerのsign_in_processアクションにPOSTされる(ルーティングは「フォームの入力を確認する」で設定した)。

users_controllerに、以下のsign_in_processメソッドを追加する。

class UsersController < ApplicationController
  def sign_up
  .....

  def sign_in
  .....

  def sign_in_process
    @user = User.new(user_params)
    encrypted_password = User.generate_digest(user_params[:password])
    user = User.find_by(email: user_params[:email], password: encrypted_password)
    if user
      redirect_to top_path and return
    else
      flash.now[:danger] = "サインインできません"
      render :sign_in, layout: 'application_signed_out' and return
    end
  end

  private
  def user_params
    .....
end

class UsersController < ApplicationController

def sign_up

.....

def sign_in

.....

def sign_in_process

@user = User.new(user_params)

encrypted_password = User.generate_digest(user_params[:password])

user = User.find_by(email: user_params[:email], password: encrypted_password)

if user

redirect_to top_path and return

else

flash.now[:danger] = "サインインできません"

render :sign_in, layout: 'application_signed_out' and return

end

private

def user_params

.....

end

処理の流れは以下のとおり。

POSTされたデータをuser_paramsメソッドにより受け取る(user_paramsについてはform_withとモデルの使い方を参照)
user_paramsを使って入力データがセットされたUserインスタンスを生成
ユーザー登録時と同じ方法で暗号化されたパスワード(ダイジェスト)を生成
メールアドレスとパスワードダイジェストで、データベースからユーザーを検索
ユーザーが存在する場合、サインインとしてtopページにリダイレクト
ユーザーが存在しない場合、エラーメッセージをセットして再度サインイン画面をレンダリング(@userに入力データがセットされているので、サインイン画面にメールアドレスが残る)

サインアウト機能

サインインに成功すると、トップ画面に遷移する。

トップ画面を始めサインイン後にアクセス可能な画面は全てヘッダーメニューを持つ。そのメニュー中、サインアウトの項目をサインイン画面へのリンクとする。

<!DOCTYPE html>
<html>
  .....

  <body>
    <header>
      <div class="header_logo"></div>
      <h1>EX-BBS</h1>
      <ul class="header_menu">
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", "#") %></li>
        <li><%= link_to("サインアウト", sign_in_path) %></li>
      </ul>
    </header>

    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

Rails – 掲示板 – サインアップ機能

2021-03-22 / tau / コメントする

概要

サインアップ機能では、フォームで入力されたユーザー情報をデータベースに登録する。

データベースの構築、テーブルのマイグレーション、モデルによるDBの操作を整理する。

掲示板の第1段階へ

データベースの準備

「データベースの準備」の要領でプロジェクトで扱うデータベースを準備する。

database.yml

development用のデータベースのみ準備し、testとproductionではデータベースを作成しない設定とする。

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /var/lib/mysql/mysql.sock

development:
  <<: *default
  database: ex_bbs_development

test:
  <<: *default
#  database: ex_bbs_test

production:
  <<: *default
#  database: ex_bbs_production
#  username: ex_bbs
#  password: <%= ENV['EX_BBS_DATABASE_PASSWORD'] %>

default: &default

adapter: mysql2

encoding: utf8

pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

username: root

password:

socket: /var/lib/mysql/mysql.sock

development:

<<: *default

database: ex_bbs_development

test:

<<: *default

# database: ex_bbs_test

production:

<<: *default

# database: ex_bbs_production

# username: ex_bbs

# password: <%= ENV['EX_BBS_DATABASE_PASSWORD'] %>

DB作成

rails db:createでデータベースを作成し、rails db:consoleでmysqlコンソールに入り、データベースが作成されていることを確認。

[vagrant@vagrant ex_bbs]$ rails db:create
Created database 'ex_bbs_development'
[vagrant@vagrant ex_bbs]$ rails dbconsole;
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 6
Server version: 5.5.62 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+----------------------------+
| Database                   |
+----------------------------+
| information_schema         |
| codecamp_bbs               |
| codecamp_photo_development |
| ex_bbs_development         |
| mysql                      |
| performance_schema         |
| testdb                     |
+----------------------------+
7 rows in set (0.00 sec)

[vagrant@vagrant ex_bbs]$ rails db:create

Created database 'ex_bbs_development'

[vagrant@vagrant ex_bbs]$ rails dbconsole;

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 6

Server version: 5.5.62 MySQL Community Server (GPL)

Oracle is a registered trademark of Oracle Corporation and/or its

affiliates. Other names may be trademarks of their respective

owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;

+----------------------------+

| Database |

+----------------------------+

| information_schema |

| codecamp_bbs |

| codecamp_photo_development |

| ex_bbs_development |

| mysql |

| performance_schema |

| testdb |

+----------------------------+

7 rows in set (0.00 sec)

モデルの生成とマイグレーション

モデルを生成し、これに対応したテーブルをマイグレーションにより生成する(基本的な方法はこちら)。

第1段階の最初で設定したデータベースのカラムを指定してモデルを生成する。id、created_at、updated_atの3つはRailsが自動的に付加するので、以下の3つのみ指定する。

name:string
email:string
password:string

モデル名、モデルファイル名などの対応は以下の通り。

モデル名	`user`
モデルクラス名	`User`
モデルファイル名	`user.rb`
テーブル名	`users`

モデルの生成には、rails generate modelコマンドを使う。

rails generate model model_name col1:type col2:type ...

[vagrant@vagrant ex_bbs]$ rails generate model user name:string email:string password:string
Running via Spring preloader in process 27642
      invoke  active_record
      create    db/migrate/20210320060906_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml

[vagrant@vagrant ex_bbs]$ rails generate model user name:string email:string password:string

Running via Spring preloader in process 27642

invoke active_record

create db/migrate/20210320060906_create_users.rb

create app/models/user.rb

invoke test_unit

create test/models/user_test.rb

create test/fixtures/users.yml

app/modelsディレクトリーにモデルファイルuser.rbが生成される。

app/models/user.rb

class User < ApplicationRecord
end

1 2	class User < ApplicationRecord end

同時に、dbディレクトリーにマイグレーションファイルが生成される。

ファイル名は20210320060906_create_users.rbで、日時がUSTとなっている。

db/20210320060906_create_users.rb

class CreateUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :users do |t|
      t.string :name
      t.string :email
      t.string :password

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :email

t.string :password

t.timestamps

end

rails db:maigrateコマンドを実行すると、マイグレーションファイルの内容に従ってテーブルが作成される。

[vagrant@vagrant ex_bbs]$ rails db:migrate
== 20210320060906 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0032s
== 20210320060906 CreateUsers: migrated (0.0034s) =============================

[vagrant@vagrant ex_bbs]$ rails db:migrate

== 20210320060906 CreateUsers: migrating ======================================

-- create_table(:users)

-> 0.0032s

== 20210320060906 CreateUsers: migrated (0.0034s) =============================

rails dbconsoleコマンドを実行すると既にプロジェクトのデータベースを使う状態になっていて、usersテーブルが作成されているのが確認できる。

mysql> show tables;
+------------------------------+
| Tables_in_ex_bbs_development |
+------------------------------+
| ar_internal_metadata         |
| schema_migrations            |
| users                        |
+------------------------------+
3 rows in set (0.00 sec)

mysql> desc users;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| name       | varchar(255) | YES  |     | NULL    |                |
| email      | varchar(255) | YES  |     | NULL    |                |
| password   | varchar(255) | YES  |     | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
6 rows in set (0.00 sec)

mysql> show tables;

+------------------------------+

| Tables_in_ex_bbs_development |

+------------------------------+

| ar_internal_metadata |

| schema_migrations |

| users |

+------------------------------+

3 rows in set (0.00 sec)

mysql> desc users;

+------------+--------------+------+-----+---------+----------------+

+------------+--------------+------+-----+---------+----------------+

| id | bigint(20) | NO | PRI | NULL | auto_increment |

+------------+--------------+------+-----+---------+----------------+

6 rows in set (0.00 sec)

フォームデータのデータベースへの登録

フォームデータの取得

モデルによるフォーム入力への変更

フォーム入力の確認ではURL(アクション)を指定してデータを送信した。

モデルを使う場合には、モデルのインスタンスを生成して、そのインスタンスを介してデータを扱う。そのために以下の2点を変更する。

まずフォームでモデルを指定するため、その実行前、sign_upで空のUserクラスのインスタンスを準備する。結果はコントローラーのインスタンス変数@userに格納し、フォームがあるビューでも利用可能なようにしておく。

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def sign_up
    @user = User.new
    render layout: 'application_signed_out'
  end

  .....

end

class UsersController < ApplicationController

def sign_up

@user = User.new

render layout: 'application_signed_out'

end

.....

end

次に、フォーム側でモデルに入力データを格納するように変更する。form_withの場合は:modelキーで@userを指定する(form_forを使う場合は単に第1引数に@userを指定する)。

app/views/users/sign_up.html.erb

<div class="sign_up_page">
  <h1>EX-BBS</h1>
  <div class="sign_up_form">
    <h2>サインアップページ</h2>
    <%= form_with model: @user, url: sign_up_process_path, local: true do |f| %>
      <%= f.text_field :name, placeholder: "ユーザー名" %>
      <%= f.email_field :email, placeholder: "メールアドレス" %>
      <%= f.password_field :password, placeholder: "パスワード" %>
      <button>サインアップ</button>
      <p>ユーザー登録済みの方は<%= link_to "サインインへ", sign_in_path %></p>
    <% end %>
  </div>
</div>

<h2>サインアップページ</h2>

<%= form_with model: @user, url: sign_up_process_path, local: true do |f| %>

<%= f.text_field :name, placeholder: "ユーザー名" %>

<%= f.email_field :email, placeholder: "メールアドレス" %>

<%= f.password_field :password, placeholder: "パスワード" %>

<button>サインアップ</button>

<p>ユーザー登録済みの方は<%= link_to "サインインへ", sign_in_path %></p>

<% end %>

</div>

モデルのパラメーターの一括取得

モデルによるフォームデータの取得を参考に、require.permitによるメソッドを準備しておく。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  private
  def user_params
    params.require(:user).permit(:name, :email, :password)
  end
end

class UsersController < ApplicationController

.....

private

def user_params

params.require(:user).permit(:name, :email, :password)

end

データ保存の枠組み

フォームの入力データを単に保存する、というだけの手続きであれば、以下の処理になる。

フォームからデータがPOSTされる
それがsign_up_processにルーティングされる
sign_up_processアクション内で
1. フォームに入力されたパラメーターで新たなUserモデルのインスタンスを生成
2. そのインスタンスの内容でデータベースに書き込み

class UsersController < ApplicationController

  .....

  def sign_up_process
    user = User.new(user_params)
    user.save
  end

  .....

  private
  def user_params
    params.require(:user).permit(:name, :email, :password)
  end
end

class UsersController < ApplicationController

.....

def sign_up_process

user = User.new(user_params)

user.save

end

.....

private

def user_params

params.require(:user).permit(:name, :email, :password)

end

フォームへの入力後、サインアップのボタンを押した後のテーブルの内容を確認すると、データは登録されている。

mysql> select * from users;
+----+--------+----------------------+----------+---------------------+---------------------+
| id | name   | email                | password | created_at          | updated_at          |
+----+--------+----------------------+----------+---------------------+---------------------+
|  1 | 悟空   | monkey@taustation.jp | monkey   | 2021-03-20 21:02:37 | 2021-03-20 21:02:37 |
+----+--------+----------------------+----------+---------------------+---------------------+
1 row in set (0.00 sec)

mysql> select * from users;

+----+--------+----------------------+----------+---------------------+---------------------+

+----+--------+----------------------+----------+---------------------+---------------------+

| 1 | 悟空 | monkey@taustation.jp | monkey | 2021-03-20 21:02:37 | 2021-03-20 21:02:37 |

+----+--------+----------------------+----------+---------------------+---------------------+

1 row in set (0.00 sec)

入力データの検証と書き込み

入力データのバリデーション

入力データのバリデーション処理を記述する。検証内容は以下の通り。

	`:name`	`:email`	`:password`
存在	空ではない	空ではない	空ではない
一意性	一意	一意	一意
長さ	20文字以下	80文字以下	6文字以上
書式制約	なし	あり	なし

モデルのデータのバリデーションは、モデルクラス内で以下を宣言する。実行はsave、create、updateの時に実行される。

validates: 対象カラム, 検証条件, 検証条件, ...

userモデルへのバリデーションの実装は以下の通り。

class User < ApplicationRecord
  VALID_EMAIL_REGEX = /\A([\w+-]+.?[\w+-]+)+@([\w-]+.?[\w-]+)+.[\w-]+\z/i
  validates :name, presence: { message: "名前を入力してください" }, \
                   uniqueness: { message: "名前が既に使われています" }, \
                   length: { maximum: 20, message: "名前の長さは20文字以内です" }
  validates :email, presence: { message: "メールアドレスを入力してください" }, \
                    uniqueness: { message: "メールアドレスが登録済みです" }, \
                    format: { with: VALID_EMAIL_REGEX, message: "メールアドレスが適切ではありません" }
  validates :password, presence: { message: "パスワードを入力してください" }, \
                       uniqueness: { message: "パスワードが使われています" }, \
                       length: { minimum: 6, message: "パスワードを6文字以上にしてください" }
end

class User < ApplicationRecord

VALID_EMAIL_REGEX = /\A([\w+-]+.?[\w+-]+)+@([\w-]+.?[\w-]+)+.[\w-]+\z/i

validates :name, presence: { message: "名前を入力してください" }, \

uniqueness: { message: "名前が既に使われています" }, \

length: { maximum: 20, message: "名前の長さは20文字以内です" }

validates :email, presence: { message: "メールアドレスを入力してください" }, \

uniqueness: { message: "メールアドレスが登録済みです" }, \

format: { with: VALID_EMAIL_REGEX, message: "メールアドレスが適切ではありません" }

validates :password, presence: { message: "パスワードを入力してください" }, \

uniqueness: { message: "パスワードが使われています" }, \

length: { minimum: 6, message: "パスワードを6文字以上にしてください" }

end

メールアドレスについては正規表現によりパターンチェックしている。

ローカル部は単語形成文字(a-z, _)2文字以上で間に連続しないドットをはさんでよい
ドメインは単語形成文字で間に連続しないドットをはさんでよく、最後にTLD(top level domain)が必要

エラー表示

モデルにvalidatesを定義すると、user.saveでデータベースに登録する前にバリデーションが実行される。

検証結果が適正であればデータは登録され、user.saveの戻り値はtrue。不適正であればデータは登録されず、user.saveの戻り値はfalseになる。

適正に登録された場合はトップページに遷移し、登録成功した旨のメッセージを一定時間表示する。一方不適正な場合は再度サインアップページを表示し、入力が不適正な旨のメッセージを一定時間表示する。

ページ遷移の際に一定時間メッセージを表示して消す機能についてはflushの使い方を参照。

コントローラーでの処理

フォームからPOSTされたデータをで受け取り、user_paramsメソッドを介してモデルを生成
テストのため、valid?メソッドでバリデーション実行
検証の結果が適正か不適正かによってflash.nowに保存
共通レイアウトを指定し、適正ならsign_inを、不適正ならsign_upをレンダリング

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def sign_up
    @user = User.new
    render layout: 'application_signed_out'
  end

  def sign_in
    render layout: 'application_signed_out'
  end

  def sign_up_process
    @user = User.new(user_params)
    if @user.valid?
      flash.now[:success] = "ユーザー登録しました"
      render :sign_in, layout: 'application_signed_out'
    else
      flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")
      render :sign_up, layout: 'application_signed_out'
    end
  end

  .....

end

class UsersController < ApplicationController

def sign_up

@user = User.new

render layout: 'application_signed_out'

end

def sign_in

render layout: 'application_signed_out'

end

def sign_up_process

@user = User.new(user_params)

if @user.valid?

flash.now[:success] = "ユーザー登録しました"

render :sign_in, layout: 'application_signed_out'

else

flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")

render :sign_up, layout: 'application_signed_out'

end

.....

end

flash.nowを使っている理由は以下の通り。

エラー後の再入力で、直前に入力した値をフォームに入れておきたい
そのためにはインスタンス変数@userを使う必要がある
ただしredirect_toでアクションから実行すると@userがnilに初期化されてしまう
そこでrenderで@userの内容を保持したい
そうすると、flashではその次のアクションまで内容が保持されて余計な表示がされることがある
そこで適正・不適正ともflash.nowとrenderを使った

また、17行目の処理は以下の通り。

@user.errors.messagesはメッセージタイプをキーとするハッシュ
ハッシュの値は検証結果のメッセージの配列
まずvaluesでmessagesの全てのメッセージタイプの値を取り出す(メッセージ配列を要素とする配列)
flattenで1次元のメッセージの配列にする
joinで配列要素を文字列に結合(区切りは<br>タグ)

レイアウトでの表示

JQueryを使うのでCDNから読み込み(9行目)
flash.nowが設定されていればメッセージを表示
- 表示するp要素のクラスをタイプごとに設定
- メッセージ中の<br>タグを有効にするため、html_safeを適用
3秒後にメッセージをスライドアップするJavaScriptを記述

app/views/layouts/application_signed_out.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ExBbs</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.0.min.js' %>
  </head>

  <body>
    <% if flash.now.present? %>
      <% flash.each do |type, message| %>
        <p class="flash_message flash_message_<%= type %>"><%= message.html_safe %></p>
      <% end %>
    <% end %>

    <%= yield %>

    <script>
      window.setTimeout(() => {
        $(".flash_message").slideUp();
      }, 3000);
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.0.min.js' %>

</head>

<body>

<% if flash.now.present? %>

<% flash.each do |type, message| %>

<% end %>

<%= yield %>

window.setTimeout(() => {

$(".flash_message").slideUp();

}, 3000);

</script>

</body>

</html>

スタイルの設定

.flash_messageで共通のスタイルを定義
success/dangerに応じて設定されたクラスごとに色を変える

app/assets/stylesheets/common.scss

.flash_message {
  margin-bottom: 10px;
  padding: 10px;
  border: 2px solid;
  text-align: center;
  font-size: 16px;
  &_success {
    background-color: #9df;
    color: #00f;
  }
  &_danger {
    background-color: #fcc;
    color: #f00;
  }
}

.flash_message {

margin-bottom: 10px;

padding: 10px;

border: 2px solid;

text-align: center;

font-size: 16px;

&_success {

background-color: #9df;

color: #00f;

}

&_danger {

background-color: #fcc;

color: #f00;

}

DB書き込み処理

@user.valid?でメッセージの内容や挙動を確認したら、ここを@user.saveに書き換える。

class UsersController < ApplicationController

  .....

  def sign_up_process
    @user = User.new(user_params)
    if @user.save
      flash.now[:success] = "ユーザー登録しました"
      render :sign_in, layout: 'application_signed_out'
    else
      flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")
      render :sign_up, layout: 'application_signed_out'
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

@user = User.new(user_params)

if @user.save

flash.now[:success] = "ユーザー登録しました"

render :sign_in, layout: 'application_signed_out'

else

flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")

render :sign_up, layout: 'application_signed_out'

end

.....

end

データを1つ登録した結果。

mysql> SELECT * FROM users;
+----+--------+-----------------------+----------+---------------------+---------------------+
| id | name   | email                 | password | created_at          | updated_at          |
+----+--------+-----------------------+----------+---------------------+---------------------+
|  3 | 悟空   | monkey@taustation.com | monkey   | 2021-03-22 21:33:59 | 2021-03-22 21:33:59 |
+----+--------+-----------------------+----------+---------------------+---------------------+
1 row in set (0.00 sec)

mysql> SELECT * FROM users;

+----+--------+-----------------------+----------+---------------------+---------------------+

+----+--------+-----------------------+----------+---------------------+---------------------+

| 3 | 悟空 | monkey@taustation.com | monkey | 2021-03-22 21:33:59 | 2021-03-22 21:33:59 |

+----+--------+-----------------------+----------+---------------------+---------------------+

1 row in set (0.00 sec)

以降、重複する内容のデータで登録しようとするとuniquenessで弾かれる。

パスワードの暗号化

パスワードの暗号化はDigest::MD5を使う。userモデルに以下を追記する。

class User < ApplicationRecord
  before_create :encrypt_password

  .....

  def encrypt_password
    self.password = User.password_digest(password)
  end

  def self.password_digest(password)
    salt = "Qc7XGCLIRTzAG7r3Wo7H7Ui++jr0"
    pass_digest = Digest::MD5.hexdigest(password)
    salt_digest = Digest::MD5.hexdigest(salt)
    Digest::MD5.hexdigest(pass_digest + salt_digest)
  end
end

class User < ApplicationRecord

before_create :encrypt_password

.....

def encrypt_password

self.password = User.password_digest(password)

end

def self.password_digest(password)

salt = "Qc7XGCLIRTzAG7r3Wo7H7Ui++jr0"

pass_digest = Digest::MD5.hexdigest(password)

salt_digest = Digest::MD5.hexdigest(salt)

Digest::MD5.hexdigest(pass_digest + salt_digest)

end

~~before_saveでコールバックを設定していて、モデルの内容がデータベースに書き込まれるときにパスワードが暗号化される~~。

当初これをbefore_saveとしていたが、これだと後述のデータ更新のときにもコールバックが実行され、既にハッシュ化されているパスワードが更にハッシュ化されて登録されていまう。このため、これをbefore_createに変更。

before_createでコールバックを設定していて、モデルの内容でデータベースのレコードが新規作成されるときにパスワードが暗号化される。

以下はテストデータを登録した結果。

mysql> SELECT * FROM users;
+----+--------+-----------------------+----------------------------------+---------------------+---------------------+
| id | name   | email                 | password                         | created_at          | updated_at          |
+----+--------+-----------------------+----------------------------------+---------------------+---------------------+
|  3 | 悟空   | monkey@taustation.com | monkey                           | 2021-03-22 21:33:59 | 2021-03-22 21:33:59 |
|  4 | 八戒   | piglet@taustation.com | 96131de181864ba18294e01a88c39318 | 2021-03-22 23:05:18 | 2021-03-22 23:05:18 |
+----+--------+-----------------------+----------------------------------+---------------------+---------------------+

mysql> SELECT * FROM users;

+----+--------+-----------------------+----------------------------------+---------------------+---------------------+

+----+--------+-----------------------+----------------------------------+---------------------+---------------------+

| 3 | 悟空 | monkey@taustation.com | monkey | 2021-03-22 21:33:59 | 2021-03-22 21:33:59 |

| 4 | 八戒 | piglet@taustation.com | 96131de181864ba18294e01a88c39318 | 2021-03-22 23:05:18 | 2021-03-22 23:05:18 |

+----+--------+-----------------------+----------------------------------+---------------------+---------------------+

Rails – コールバック

2021-03-22 / tau / コメントする

概要

コールバックは、validationやsaveなどの処理の前後に登録した関数を実行させるよう設定する。

コールバックの種類

オブジェクトの生成

before_validation
after_validation
before_save
around_save
before_create
around_create
after_create
after_save
after_commit/after_rollback

オブジェクトの更新

before_validation
after_validation
before_save
around_save
before_update
around_update
after_update
after_save
after_commit/after_rollback

オブジェクトの消去

before_destroy
around_destroy
after_destroy
after_commit/after_rollback