Rails – 入力整合性～password_field～bcrypt

2021-04-11 / tau / コメントする

概要

bcryptでhas_secure_passwordを使ったときの整合性チェックの挙動はtext_fieldの整合性チェックと少し挙動が違う。

has_secure_passwordをモデルに書くと、:passwordに対する整合性を外してもpresenceとconfirmationの検証が強制的に行われる。このため意図しないメッセージが重複したり、敢えて空白の入力をスルーしたりしたい場合に、この検証が邪魔になることがある。

この強制的な検証を止めたいときには、has_secure_passwordのオプションにvalidations: falseを指定する(Railsドキュメント)。

手順

設定

Gemのbcryptがインストールされていて、Userモデルにhas_secure_passwordが記述されている
Userモデルではpassword_digestが準備されている
フォームでpasswordの入力欄と再確認用のpassword_confirmationの入力欄の2つを表示する
フォーム送信後、2つの入力欄の値が等しいかどうかをバリデーションで確認する

ルーティング

usersコントローラーのconfirm_passwordアクションで入力フォームを表示
フォームからのPOSTをconfirm_password_processアクションで受け取って処理

Rails.application.routes.draw do
  .....
  get   'users/confirm_password', as: 'confirm_password'
  post  'users/confirm_password_process', as: 'confirm_password_process'
  .....
end

Rails.application.routes.draw do

.....

get 'users/confirm_password', as: 'confirm_password'

post 'users/confirm_password_process', as: 'confirm_password_process'

.....

end

        confirm_password GET  /users/confirm_password(.:format)            users#confirm_password
confirm_password_process POST /users/confirm_password_process(.:format)    users#confirm_password_process

1 2	confirm_password GET /users/confirm_password(.:format) users#confirm_password confirm_password_process POST /users/confirm_password_process(.:format) users#confirm_password_process

モデルの生成

:name属性と:password_digest属性を持つUserモデルを構成する。

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

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :password_digest

t.timestamps

end

マイグレート後

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

mysql> DESCRIBE users;

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

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

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

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

5 rows in set (0.00 sec)

ビュー

名前入力フィールド、パスワード入力フィールドとパスワード確認フィールドを準備する。確認フィールドは入力フィールドの名前に_confirmationポストフィックスを付ける（入力フィールド:passwordに対して:password_confirmation）。

<h1>パスワード整合性</h1>

<%= form_with(model: @user, url: confirm_password_process_path, local: true) do |f| %>
  <%= f.text_field(:name, placeholder: "名前を入力") %>
  <%= f.password_field(:password, placeholder: "パスワードを入力") %>
  <%= f.password_field(:password_confirmation, placeholder: "パスワードを再入力") %>
  <%= f.submit("送信") %>
<% end %>

<%= link_to("Topページに戻る", top_path) %>

<h1>パスワード整合性</h1>

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

<%= f.text_field(:name, placeholder: "名前を入力") %>

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

<%= f.password_field(:password_confirmation, placeholder: "パスワードを再入力") %>

<%= f.submit("送信") %>

<% end %>

<%= link_to("Topページに戻る", top_path) %>

モデル

Userモデルでhas_secure_passwordを設定し、バリデーションではパスワードの整合性のみ検証させる。

class User < ApplicationRecord
  has_secure_password

  validates(:password, confirmation: true)
end

class User < ApplicationRecord

has_secure_password

validates(:password, confirmation: true)

end

コントローラー

confirm_passwordアクションでUserインスタンスを準備してフォームを表示し、confirm_password_processでフォームから受け取ったパラメーターの整合性をチェック。

class UsersController < ApplicationController
  def confirm_password
    @user = User.new
  end

  def confirm_password_process
    puts "----- in confirm password process ----"
    puts "PARAMETER:"
    p user_params_with_confirmation
    @user = User.new(user_params_with_confirmation)
    puts "@USER:"
    p @user
    puts "@USER.VALID?"
    p @user.valid?
    p @user.errors.messages

    redirect_to confirm_password_path and return
  end

  private
  def user_params_with_confirmation
    params.require(:user).permit(:name, :password, :password_confirmation)
  end
end

class UsersController < ApplicationController

def confirm_password

@user = User.new

end

def confirm_password_process

puts "----- in confirm password process ----"

puts "PARAMETER:"

p user_params_with_confirmation

@user = User.new(user_params_with_confirmation)

puts "@USER:"

p @user

puts "@USER.VALID?"

p @user.valid?

p @user.errors.messages

redirect_to confirm_password_path and return

end

private

def user_params_with_confirmation

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

end

実行結果

強制的なバリデーションの実行

:passwordと:password_confirmationが"aaa"と"aaa"のときは、valid? == trueでエラーメッセージは空。

パラメーターにはpasswordとpassword_confirmationの内容が平文で保持されているが、Userインスタンスにあるのはpassword_digestのみ。

----- in confirm password process ----
PARAMETER:
<ActionController::Parameters {"name"=>"", "password"=>"aaa", "password_confirmation"=>"aaa"} permitted: true>
@USER:
#<User id: nil, name: "", password_digest: "$2a$12$kHW538Pg.1ooaUjI0xx.QuGQ.LPdRzsXuXhsrr4z3mP...", created_at: nil, updated_at: nil>
@USER.VALID?
true
{}

----- in confirm password process ----

PARAMETER:

<ActionController::Parameters {"name"=>"", "password"=>"aaa", "password_confirmation"=>"aaa"} permitted: true>

@USER:

#<User id: nil, name: "", password_digest: "$2a$12$kHW538Pg.1ooaUjI0xx.QuGQ.LPdRzsXuXhsrr4z3mP...", created_at: nil, updated_at: nil>

@USER.VALID?

true

{}

:passwordと:password_confirmationの内容が異なる場合はvalid? == falseで、エラーメッセージは同じ"doesn't match ..."が2回現れている。

:passwordに何か入力して:password_confirmationを空欄にしても同じ結果になる。

----- in confirm password process ----
PARAMETER:
<ActionController::Parameters {"name"=>"", "password"=>"aaa", "password_confirmation"=>"bbb"} permitted: true>
@USER:
#<User id: nil, name: "", password_digest: "$2a$12$Tb3RGbBBeAvToWypvwmaFe5bznX2gcMGMZXic8EkqcL...", created_at: nil, updated_at: nil>
@USER.VALID?
false
{:password_confirmation=>["doesn't match Password", "doesn't match Password"]}

----- in confirm password process ----

PARAMETER:

<ActionController::Parameters {"name"=>"", "password"=>"aaa", "password_confirmation"=>"bbb"} permitted: true>

@USER:

#<User id: nil, name: "", password_digest: "$2a$12$Tb3RGbBBeAvToWypvwmaFe5bznX2gcMGMZXic8EkqcL...", created_at: nil, updated_at: nil>

@USER.VALID?

false

{:password_confirmation=>["doesn't match Password", "doesn't match Password"]}

:passwordを空欄にした場合、:password_confirmationの内容の有無に関わらずvalid? == falseで、エラーメッセージは"can't be blank"が2回、"doesn't match ..."が1回発生。

また、:passwordと:password_confirmationの両方を空白のままにした時も同じ結果になる。

----- in confirm password process ----
PARAMETER:
<ActionController::Parameters {"name"=>"", "password"=>"", "password_confirmation"=>"aaa"} permitted: true>
@USER:
#<User id: nil, name: "", password_digest: nil, created_at: nil, updated_at: nil>
@USER.VALID?
false
{:password=>["can't be blank", "can't be blank"], :password_confirmation=>["doesn't match Password"]}

----- in confirm password process ----

PARAMETER:

<ActionController::Parameters {"name"=>"", "password"=>"", "password_confirmation"=>"aaa"} permitted: true>

@USER:

#<User id: nil, name: "", password_digest: nil, created_at: nil, updated_at: nil>

@USER.VALID?

false

{:password=>["can't be blank", "can't be blank"], :password_confirmation=>["doesn't match Password"]}

:passwordと:password_confirmationの内容がそれぞれA、B、空白の組み合わせに対する結果をまとめると以下のようになり、検証結果が不適切な場合の全てでメッセージが2つ出されている。

pass＼conf	A	B	空白
A	true []	false “doesn’t match” “doesn’t match”	false “doesn’t match” “doesn’t match”
B	false “doesn’t match” “doesn’t match”	true []	false “doesn’t match” “doesn’t match”
空白	false “can’t be blank” “doesn’t match”	false “can’t be blank” “doesn’t match”	false “can’t be blank” “doesn’t match”

bcryptによるバリデーションの抑止

ここで、has_secure_passwordのオプションでバリデーションを無効にしてみる。

class User < ApplicationRecord
  has_secure_password(validations: false)

  validates(:password, confirmation: true)
end

class User < ApplicationRecord

has_secure_password(validations: false)

validates(:password, confirmation: true)

end

これで先と同じ票のように実行してみる。

pass＼conf	A	B	空白
A	true []	false “doesn’t match”	false “doesn’t match”
B	false “doesn’t match”	true []	false “doesn’t match”
空白	false “doesn’t match”	false “doesn’t match”	false “doesn’t match”

validatesの方でpresenceのチェックをせずconfirmationだけをチェックしているので、空白の場合でも"can't be blank"は発生していない。

また、bcrypt側の検証を止めているので、"doesn't match ..."のメッセージもvalidatesのconfirmによるものだけになっている。

Rails – 入力整合性～text_field

2021-04-10 / tau / コメントする

概要

Railsのバリデーションには入力の整合性チェックの機能があり、以下のような2つの入力フィールドの内容が同じかどうかをチェックする。

手順

設定

SimpleUserモデルのname属性に対してフォーム入力する
フォームではnameの入力欄と再確認用の入力欄の2つを表示する
フォーム送信後、2つの入力欄の値が等しいかどうかをバリデーションで確認する

ルーティング

simple_usersコントローラーのconfirm_nameアクションで入力フォームを表示
フォームからのPOSTをconfirm_name_processアクションで受け取って処理

Rails.application.routes.draw do
  .....
  get   'simple_users/confirm_name', as: 'confirm_name'
  post  'simple_users/confirm_name_process', as: 'confirm_name_process'
  .....
end

Rails.application.routes.draw do

.....

get 'simple_users/confirm_name', as: 'confirm_name'

post 'simple_users/confirm_name_process', as: 'confirm_name_process'

.....

end

        confirm_name GET  /simple_users/confirm_name(.:format)         simple_users#confirm_name
confirm_name_process POST /simple_users/confirm_name_process(.:format) simple_users#confirm_name_process

1 2	confirm_name GET /simple_users/confirm_name(.:format) simple_users#confirm_name confirm_name_process POST /simple_users/confirm_name_process(.:format) simple_users#confirm_name_process

モデルの生成

:name属性1つだけを持つSimpleUserモデルを構成する

class CreateSimpleUsers < ActiveRecord::Migration[5.1]
  def change
    create_table :simple_users do |t|
      t.string :name

      t.timestamps
    end
  end
end

class CreateSimpleUsers < ActiveRecord::Migration[5.1]

def change

create_table :simple_users do |t|

t.string :name

t.timestamps

end

マイグレート後

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

mysql> DESCRIBE simple_users;

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

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

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

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

4 rows in set (0.00 sec)

ビュー

入力フィールドと確認フィールドを準備する。確認フィールドは入力フィールドの名前に_confirmationポストフィックスを付ける（入力フィールドが:nameの場合、:name_confirmation）。

<%= form_with(model: @user, url: confirm_name_process_path, local: true) do |f| %>
  <%= f.text_field(:name, placeholder: "名前を入力") %>
  <%= f.text_field(:name_confirmation, placeholder: "名前を再入力") %>
  <%= f.submit("送信") %>
<% end %>

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

<%= f.text_field(:name, placeholder: "名前を入力") %>

<%= f.text_field(:name_confirmation, placeholder: "名前を再入力") %>

<%= f.submit("送信") %>

<% end %>

モデル

Userモデルで整合性のみ検証させる。

class SimpleUser < ApplicationRecord
  validates(:name, confirmation: true)
end

class SimpleUser < ApplicationRecord

validates(:name, confirmation: true)

end

コントローラー

confirm_nameアクションでSimpleUserインスタンスを準備してフォームを表示し、confirm_name_processでフォームから受け取ったパラメーターの整合性をチェック。

class SimpleUsersController < ApplicationController
  def confirm_name
    @user = SimpleUser.new
  end

  def confirm_name_process
    puts "----- in confirm process -----"
    puts "USER_PARAMS:"
    p simple_user_params
    @user = SimpleUser.new(simple_user_params)
    puts "@USER:"
    p @user
    puts "@USER.VALID?"
    p @user.valid?
    puts "ERRORS.MESSAGES"
    p @user.errors.messages

    redirect_to confirm_name_path and return
  end

  private
  def simple_user_params
    params.require(:simple_user).permit(:name, :name_confirmation)
  end
end

class SimpleUsersController < ApplicationController

def confirm_name

@user = SimpleUser.new

end

def confirm_name_process

puts "----- in confirm process -----"

puts "USER_PARAMS:"

p simple_user_params

@user = SimpleUser.new(simple_user_params)

puts "@USER:"

p @user

puts "@USER.VALID?"

p @user.valid?

puts "ERRORS.MESSAGES"

p @user.errors.messages

redirect_to confirm_name_path and return

end

private

def simple_user_params

params.require(:simple_user).permit(:name, :name_confirmation)

end

実行結果

:nameと:name_confirmationが"aaa"と"aaa"のときは、valid? == trueでエラーメッセージは空。

----- in confirm process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>"aaa"} permitted: true>
@USER:
#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>
@USER.VALID?
true
ERRORS.MESSAGES
{}

----- in confirm process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>"aaa"} permitted: true>

@USER:

#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>

@USER.VALID?

true

ERRORS.MESSAGES

{}

"aaa"と"bbb"のときは、valid? == falseでエラーメッセージがセットされる。

----- in confirm process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>"bbb"} permitted: true>
@USER:
#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>
@USER.VALID?
false
ERRORS.MESSAGES
{:name_confirmation=>["doesn't match Name"]}

----- in confirm process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>"bbb"} permitted: true>

@USER:

#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>

@USER.VALID?

false

ERRORS.MESSAGES

{:name_confirmation=>["doesn't match Name"]}

"aaa"と""のとき(:name_confirmationに入力しないとき)は、valid? == falseでエラーメッセージがセットされる。

----- in confirm process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>""} permitted: true>
@USER:
#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>
@USER.VALID?
false
ERRORS.MESSAGES
{:name_confirmation=>["doesn't match Name"]}

----- in confirm process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"aaa", "name_confirmation"=>""} permitted: true>

@USER:

#<SimpleUser id: nil, name: "aaa", created_at: nil, updated_at: nil>

@USER.VALID?

false

ERRORS.MESSAGES

{:name_confirmation=>["doesn't match Name"]}

""と""のとき(どちらも入力しないとき)は、valid? == trueでエラーメッセージは空。

----- in confirm process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"", "name_confirmation"=>""} permitted: true>
@USER:
#<SimpleUser id: nil, name: "", created_at: nil, updated_at: nil>
@USER.VALID?
true
ERRORS.MESSAGES
{}

----- in confirm process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"", "name_confirmation"=>""} permitted: true>

@USER:

#<SimpleUser id: nil, name: "", created_at: nil, updated_at: nil>

@USER.VALID?

true

ERRORS.MESSAGES

{}

Rails – パスワードの暗号化～bcrypt

2021-04-10 / tau / コメントする

概要

Gemの1つ、bcryptをインストールすることで、パスワードの暗号化が容易に実装できるようになる。手順の概要は、Userモデルを例にとると以下のようになる。

＜ユーザー登録時＞

bcryptを導入する
usersテーブルのパスワードカラムをpassword_digestとする
Userモデルにhas_secure_passwordメソッドを記述
サインインフォームに:passwordフィールドを置く
フォームからのPOSTに対してUserインスタンスを生成
Userインスタンスをデータベースに保存

＜ユーザー認証時＞

フォームのPOSTに対してユーザーを特定し、Userインスタンスを生成
フォームに入力されたパスワードパラメーターを使って、Userインスタンスのauthenticateメソッドで認証

手順

設定

登録画面でユーザーの名前とパスワードを登録
認証画面でユーザーの名前とパスワードを入力して認証

bcryptの導入

Gemfile中bcryptのコメントを外す。なければ追加。

# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

1 2	# Use ActiveModel has_secure_password gem 'bcrypt', '~> 3.1.7'

Railsサーバー停止状態でインストール。

$ bundle install

1	$ bundle install

ユーザーモデルの準備

マイグレーションファイルのパスワード属性はpassword_digestとする。

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

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :password_digest

t.timestamps

end

マイグレート後。

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

mysql> DESCRIBE users;

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

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

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

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

5 rows in set (0.00 sec)

ルーティング

この例では4つのアクションを以下のようにルーティング

secure_sign_upで登録フォームを表示
secure_sign_up_processで登録処理(パスワードを暗号化)
secure_sign_inで認証フォームを表示
secure_sign_in_processで認証処理

Rails.application.routes.draw do
  .....
  get   'users/secure_sign_up', as: 'secure_sign_up'
  post  'users/secure_sign_up_process', as: 'secure_sign_up_process'
  get   'users/secure_sign_in', as: 'secure_sign_in'
  post  'users/secure_sign_in_process', as: 'secure_sign_in_process'
  .....
end

Rails.application.routes.draw do

.....

get 'users/secure_sign_up', as: 'secure_sign_up'

post 'users/secure_sign_up_process', as: 'secure_sign_up_process'

get 'users/secure_sign_in', as: 'secure_sign_in'

post 'users/secure_sign_in_process', as: 'secure_sign_in_process'

.....

end

        secure_sign_up GET  /users/secure_sign_up(.:format)              users#secure_sign_up
secure_sign_up_process POST /users/secure_sign_up_process(.:format)      users#secure_sign_up_process
        secure_sign_in GET  /users/secure_sign_in(.:format)              users#secure_sign_in
secure_sign_in_process POST /users/secure_sign_in_process(.:format)      users#secure_sign_in_process

secure_sign_up GET /users/secure_sign_up(.:format) users#secure_sign_up

secure_sign_up_process POST /users/secure_sign_up_process(.:format) users#secure_sign_up_process

secure_sign_in GET /users/secure_sign_in(.:format) users#secure_sign_in

secure_sign_in_process POST /users/secure_sign_in_process(.:format) users#secure_sign_in_process

ユーザー登録

登録画面

登録フォームの基本構成はシンプルで、パスワードは:passwordの名前でpassword_formを置くだけでよい。

<h1>パスワード暗号化～サインアップ</h1>

<%= form_with(model: @user, url: secure_sign_up_process_path, local: true) do |f| %>
  <%= f.text_field(:name, placeholder: "名前を入力") %>
  <%= f.password_field(:password, placeholder: "パスワードを入力") %>
  <%= f.submit("送信") %>
<% end %>

<%= link_to("Topページに戻る", top_path) %>

<h1>パスワード暗号化～サインアップ</h1>

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

<%= f.text_field(:name, placeholder: "名前を入力") %>

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

<%= f.submit("送信") %>

<% end %>

<%= link_to("Topページに戻る", top_path) %>

登録処理

フォームからのPOSTに対して、:passwordを含むパラメーターでUserインスタンスを生成し、データベースに保存するだけでパスワードが暗号化される。

class UsersController < ApplicationController
  def secure_sign_up
    @user = User.new
  end

  def secure_sign_up_process
    puts "----- in sign up process -----"
    puts "USER_PARAMS:"
    p user_params
    @user = User.new(user_params)
    puts "@USER:"
    p @user
    @user.save

    redirect_to secure_sign_in_path and return
  end

  .....

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

class UsersController < ApplicationController

def secure_sign_up

@user = User.new

end

def secure_sign_up_process

puts "----- in sign up process -----"

puts "USER_PARAMS:"

p user_params

@user = User.new(user_params)

puts "@USER:"

p @user

@user.save

redirect_to secure_sign_in_path and return

end

.....

private

def user_params

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

end

ユーザー認証

認証画面

認証画面も登録画面と同じで:passwardを拾えばよい。

<h1>パスワード暗号化～サインイン</h1>

<%= form_with(model: @user, url: secure_sign_in_process_path, local: true) do |f| %>
  <%= f.text_field(:name, placeholder: "名前を入力") %>
  <%= f.password_field(:password, placeholder: "パスワードを入力") %>
  <%= f.submit("送信") %>
<% end %>

<%= link_to("Topページに戻る", top_path) %>

<h1>パスワード暗号化～サインイン</h1>

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

<%= f.text_field(:name, placeholder: "名前を入力") %>

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

<%= f.submit("送信") %>

<% end %>

<%= link_to("Topページに戻る", top_path) %>

認証処理

認証手順は以下の通り。

ユーザー名などからデータベース上のユーザーを取り出してUserインスタンスを生成
生成したユーザーインスタンスのauthenticateメソッドにフォームパラメーターの:pasuwordの内容を与えて認証

認証の際に、@user&.authenticate...と「ぼっち演算子」を使っているのは、未登録ユーザーの場合にauthenticateメソッドがエラーとなるのを防ぐため。

class UsersController < ApplicationController

  .....

  def secure_sign_in
    @user = User.new
  end

  def secure_sign_in_process
    puts "----- in sign in process -----"
    puts "USER_PARAMS:"
    p user_params
    @user = User.find_by(name: user_params[:name])
    puts "@USER:"
    p @user
    puts "AUTHENTICATE"
    p @user&.authenticate(user_params[:password])
    if @user&.authenticate(user_params[:password])
      puts "Successfully signed in!"
    else
      puts "Sign in failed..."
    end

    redirect_to secure_sign_in_path and return
  end

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

class UsersController < ApplicationController

.....

def secure_sign_in

@user = User.new

end

def secure_sign_in_process

puts "----- in sign in process -----"

puts "USER_PARAMS:"

p user_params

@user = User.find_by(name: user_params[:name])

puts "@USER:"

p @user

puts "AUTHENTICATE"

p @user&.authenticate(user_params[:password])

if @user&.authenticate(user_params[:password])

puts "Successfully signed in!"

else

puts "Sign in failed..."

end

redirect_to secure_sign_in_path and return

end

private

def user_params

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

end

実行結果

登録時

名前：山田、パスワード：yamadaとして登録した結果が以下の通り。

パラメーターで平文のパスワードが、インスタンス生成後にはダイジェストで保持されていて、この値がデータベースに保存される。

----- in sign up process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"山田", "password"=>"yamada"} permitted: true>
@USER:
#<User id: nil, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: nil, updated_at: nil>

----- in sign up process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"山田", "password"=>"yamada"} permitted: true>

@USER:

#<User id: nil, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: nil, updated_at: nil>

認証時

名前：山田、パスワード：yamadaとしてサインインした場合。

フォーム入力から生成されたUserインスタンスのpassword_digestが上の内容と等しくなっているのが確認できる。

また、authenticateの結果が正しい場合は、Userインスタンスが返されている。

----- in sign in process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"山田", "password"=>"yamada"} permitted: true>
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = '山田' LIMIT 1
@USER:
#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">
AUTHENTICATE
#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">
Successfully signed in!

----- in sign in process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"山田", "password"=>"yamada"} permitted: true>

User Load (0.4ms) SELECT `users`.* FROM `users` WHERE `users`.`name` = '山田' LIMIT 1

@USER:

#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">

AUTHENTICATE

#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">

Successfully signed in!

異なるパスワードを入力した場合。

password_digestの値が異なっていて、authenticateの戻り値はfalse。

----- in sign in process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"山田", "password"=>"aaa"} permitted: true>
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = '山田' LIMIT 1
@USER:
#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">
AUTHENTICATE
false
Sign in failed...

----- in sign in process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"山田", "password"=>"aaa"} permitted: true>

User Load (0.4ms) SELECT `users`.* FROM `users` WHERE `users`.`name` = '山田' LIMIT 1

@USER:

#<User id: 1, name: "山田", password_digest: "$2a$12$x.vfAVdh6k8aaZdVHI6CreLHas8rzd316xNx/yW9Yx6...", created_at: "2021-04-10 05:58:07", updated_at: "2021-04-10 05:58:07">

AUTHENTICATE

false

存在しないユーザーを入力した場合。

----- in sign in process -----
USER_PARAMS:
<ActionController::Parameters {"name"=>"伊藤", "password"=>"itou"} permitted: true>
  User Load (0.3ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = '伊藤' LIMIT 1
@USER:
nil
AUTHENTICATE
nil
Sign in failed...

----- in sign in process -----

USER_PARAMS:

<ActionController::Parameters {"name"=>"伊藤", "password"=>"itou"} permitted: true>

User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`name` = '伊藤' LIMIT 1

@USER:

nil

AUTHENTICATE

nil

Rails – 掲示板 – 投稿の削除

2021-04-02 / tau / コメントする

ルーティング

postsについてはresourcesで設定したため、削除用のルーティングも自動生成されている。

DELETEメソッド
URLは"/posts/:id"
コントローラーとアクションはposts#destroy
Prefixはpost(post_path)

[vagrant@vagrant ex_bbs]$ rails routes
         Prefix Verb   URI Pattern               Controller#Action
         .....
          posts GET    /posts(.:format)          posts#index
                POST   /posts(.:format)          posts#create
       new_post GET    /posts/new(.:format)      posts#new
      edit_post GET    /posts/:id/edit(.:format) posts#edit
           post GET    /posts/:id(.:format)      posts#show
                PATCH  /posts/:id(.:format)      posts#update
                PUT    /posts/:id(.:format)      posts#update
                DELETE /posts/:id(.:format)      posts#destroy

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

.....

posts GET /posts(.:format) posts#index

POST /posts(.:format) posts#create

new_post GET /posts/new(.:format) posts#new

edit_post GET /posts/:id/edit(.:format) posts#edit

post GET /posts/:id(.:format) posts#show

PATCH /posts/:id(.:format) posts#update

PUT /posts/:id(.:format) posts#update

DELETE /posts/:id(.:format) posts#destroy

ビュー

トップの投稿一覧中、削除アイコンのリンク先を設定する。

/posts/:id → post_path(post)

また、メソッドをdeleteで指定する。

top.html.erb

<div class="top_page">
  .....
  <% if @posts.any? %>
    <div class="posts">
      <% @posts.each do |post| %>
        .....
        <ul class="post_menu">
          .....
          <li>
            <%= link_to(post_path(post), method: :delete, class: "#{menu_availability}") do %>
              <i class="fas fa-trash-alt", title="記事削除"></i>
            <% end %>
          </li>
        </ul>
        .....
      <% end %>
    </div>
    .....
  <% end %>
</main>

.....

<% if @posts.any? %>

<% @posts.each do |post| %>

.....

.....

<li>

<%= link_to(post_path(post), method: :delete, class: "#{menu_availability}") do %>

<% end %>

</li>

</ul>

.....

<% end %>

</div>

.....

<% end %>

</main>

posts#destroyアクション

destroyアクションにデータの削除処理を記述。

params[:id]でURLパラメータの:idを取得
このidを使ってデータベースからPostデータを取得
Postデータ→PostImageデータから画像ファイルのパスを取得してファイルを削除
取得したPostデータをdestroy(Postとそれに従属するPostImagesが連動して削除される)

なお、ブラウザー側でpointer-eventsが効かない場合も考慮して、DBから取得したPostのuser_idとセッション中のユーザーのidが一致する場合のみ削除している。

また、画像ファイルのフルパスを得るためのヘルパーを別に準備している。

class PostsController < ApplicationController

  .....

  def destroy
    # SCSSのpointer-events: noneが効かないときの対策
    if post.user_id = user_in_session.id
      # パラメーターのidから削除するpostオブジェクトを取得
      post = Post.find(params[:id])
      # postオブジェクトのpost_idから削除するpost_imageオブジェクトを取得
      post_image = PostImage.find_by(post_id: post.id)
      # post_helper.rbのヘルパーで画像ファイルのフルパスを取得
      file_path = post_image_path(post_image)
      # 画像ファイルの削除
      File.delete(file_path)

      # データベースからpostデータを削除
      post.destroy
    end

    redirect_to top_path and return
  end

  .....

end

class PostsController < ApplicationController

.....

def destroy

# SCSSのpointer-events: noneが効かないときの対策

if post.user_id = user_in_session.id

# パラメーターのidから削除するpostオブジェクトを取得

post = Post.find(params[:id])

# postオブジェクトのpost_idから削除するpost_imageオブジェクトを取得

post_image = PostImage.find_by(post_id: post.id)

# post_helper.rbのヘルパーで画像ファイルのフルパスを取得

file_path = post_image_path(post_image)

# 画像ファイルの削除

File.delete(file_path)

# データベースからpostデータを削除

post.destroy

end

redirect_to top_path and return

end

.....

end

post_image_pathヘルパー

画像ファイルのオブジェクトpost_imageを与えて画像ファイルのフルパスを返すヘルパー。

もう一つのpost_image_urlはビューで使用するもので、それぞれパスの表現が違う。

module PostsHelper

  .....

  # post_imageオブジェクトを与えてファイルのフルパスを返すヘルパー
  # コントローラー用
  def post_image_path(post_image)
    upload_dir = Rails.root.join("public", "post_images")
    file_path = upload_dir + post_image.file_name
  end
end

module PostsHelper

.....

# post_imageオブジェクトを与えてファイルのフルパスを返すヘルパー

# コントローラー用

def post_image_path(post_image)

upload_dir = Rails.root.join("public", "post_images")

file_path = upload_dir + post_image.file_name

end

Rails – 掲示板 – 投稿記事表示

2021-04-02 / tau / コメントする

概要

これまでのトップページは、仮にユーザーの一覧を表示していた。新規投稿機能が実装されたので、投稿記事を表示するようトップページを変更する。

新しい記事から順に表示
投稿ユーザー名を表示
メッセージと画像は存在する場合に表示
プレースホルダーとして”like it”、”設定”、”記事削除”のアイコンメニューを記事ごとに表示
設定と削除については、他ユーザーの記事の場合はリンクが機能しないようにしてグレーアウト

pages#topアクション

topアクションにルーティングされると、すべての投稿記事をデータベースからインスタンス変数@postに読み込む(all)。読み込む順序は降順、すなわち新しい順(order("id desc"))。

app/controllers/pages.controller.rb

class PagesController < ApplicationController
  before_action :authorize

  def top
    @posts = Post.all.order("id desc")
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

@posts = Post.all.order("id desc")

end

post_image_urlヘルパー

topビューで投稿画像を表示するのにpost_image_urlヘルパーを使っている。このヘルパーはPostに関して使うので、PostsHelperモジュールに書いている。

画像ファイルのパスについては画像ファイルの配置とパス指定を参照

app/helpers/posts_helper.rb

module PostsHelper
  # post_imageオブジェクトを与えてファイルのURLを返すヘルパー
  # ビューのimage_tag用
  def post_image_url(post_image)
    "/post_images/#{post_image.file_name}"
  end
end

module PostsHelper

# post_imageオブジェクトを与えてファイルのURLを返すヘルパー

# ビューのimage_tag用

def post_image_url(post_image)

"/post_images/#{post_image.file_name}"

end

ヘルパー関数を含むモジュールをApplicationControllerでインクルードする。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  # 共通で使われるヘルパー
  include ApplicationHelper
  # ユーザーセッションの管理やプロフィール画像のURL取得
  include UsersHelper
  # 投稿画像のURL取得
  include PostsHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# 共通で使われるヘルパー

include ApplicationHelper

# ユーザーセッションの管理やプロフィール画像のURL取得

include UsersHelper

# 投稿画像のURL取得

include PostsHelper

end

topビュー

メニューアイコンにはCDNのFont Awesomeを利用している。サインイン中のユーザーが操作可能なメニュー以外を抑止するため、link_toに動的にクラスを設定している。

app/views/pages/top.html.erb

<div class="top_page">
  <h2>登録記事一覧</h2>

  <!-- 投稿記事が存在する場合 -->
  <% if @posts.any? %>
    <div class="posts">
      <!-- @postsにセットされた記事全てを表示 -->
      <% @posts.each do |post| %>
        <!-- 記事投稿ユーザーのみ操作可能なメニューのクラス設定用 -->
        <% menu_availability = (post.user_id == user_in_session.id ? "enabled" : "disabled") %>
        <!-- 記事の投稿ユーザー名 -->
        <p class="user_name">
          <%= User.find(post.user_id).name %>さんの投稿
        </p>
        <!-- 記事に対するlike it、編集、削除メニュー -->
        <ul class="post_menu">
          <li>
            <%= link_to("#") do %>
              <i class="fas fa-thumbs-up", title="「いいね」ダミー"></i>
            <% end %>
          </li>
          <li>
            <%= link_to("#", class: "#{menu_availability}") do %>
              <i class="fas fa-cog", title="「記事編集」ダミー"></i>
            <% end %>
          </li>
          <li>
            <%= link_to("#", class: "#{menu_availability}") do %>
              <i class="fas fa-trash-alt", title="記事削除"></i>
            <% end %>
          </li>
        </ul>
        <!-- 記事メッセージ -->
        <p class="message">
          <%= post.message %>
        </p>
        <!-- 画像 -->
        <% if post.post_images.any? %>
          <div class="image_frame">
            <%= image_tag post_image_url(post.post_images[0]) %>
          </div>
        <% end %>
      <% end %>
    </div>
  <!-- 記事が投稿されていない場合 -->
  <% else %>
    <p class="no_posts">投稿記事がありません</p>
  <% end %>
</main>

<h2>登録記事一覧</h2>

<% if @posts.any? %>

<% @posts.each do |post| %>

<% menu_availability = (post.user_id == user_in_session.id ? "enabled" : "disabled") %>

<%= User.find(post.user_id).name %>さんの投稿

</p>

<li>

<%= link_to("#") do %>

<% end %>

</li>

<li>

<%= link_to("#", class: "#{menu_availability}") do %>

<% end %>

</li>

<li>

<%= link_to("#", class: "#{menu_availability}") do %>

<% end %>

</li>

</ul>

<%= post.message %>

</p>

<% if post.post_images.any? %>

<%= image_tag post_image_url(post.post_images[0]) %>

</div>

<% end %>

</div>

<% else %>

<p class="no_posts">投稿記事がありません</p>

<% end %>

</main>

スタイル

リストの横並び、画像のフィッティング・センタリング、link_toの動的なスタイル設定などを参照。

.top_page {
  --text-color: #666;
  width: 75%;
  height: auto;
  margin: auto;
  background-color: #f8f8ff;
  h2 {
    padding: 20px 0;
    font-size: 24px;
    color: var(--text-color);
    text-align: center;
  }
  // 投稿記事がある場合
  .posts {
    padding-bottom: 15px;
    .user_name {
      padding-top: 20px;
      border-top: 1px solid #ccc;
      text-align: center;
    }
    .post_menu {
      margin: 0 0 0 auto;
      padding: 5px;
      width: 80px;
      display: flex;
      justify-content: space-between;
      list-style-type: none;
      li {
        font-size: 20px;
        a {
          color: #0085f2;
          &.enabled {
            color: #0085f2;
          }
          &.disabled {
            color: #ccc;
            pointer-events: none;
          }
        }
      }
    }
    .message {
      margin: 0 auto 10px auto;
      width: 400px;
    }
    .image_frame {
      margin: 0 auto 20px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: auto;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
  // 投稿記事がない場合
  .no_posts {
    margin-top: 20px;
    text-align: center;
  }
}

.top_page {

--text-color: #666;

width: 75%;

height: auto;

margin: auto;

background-color: #f8f8ff;

h2 {

padding: 20px 0;

font-size: 24px;

color: var(--text-color);

text-align: center;

}

// 投稿記事がある場合

.posts {

padding-bottom: 15px;

.user_name {

padding-top: 20px;

border-top: 1px solid #ccc;

text-align: center;

}

.post_menu {

margin: 0 0 0 auto;

padding: 5px;

width: 80px;

display: flex;

justify-content: space-between;

list-style-type: none;

li {

font-size: 20px;

a {

color: #0085f2;

&.enabled {

color: #0085f2;

}

&.disabled {

color: #ccc;

pointer-events: none;

}

.message {

margin: 0 auto 10px auto;

width: 400px;

}

.image_frame {

margin: 0 auto 20px auto;

display: flex;

justify-content: center;

align-items: center;

width: 400px;

height: auto;

img {

width: auto;

height: auto;

max-width: 100%;

max-height: 100%;

}

// 投稿記事がない場合

.no_posts {

margin-top: 20px;

text-align: center;

}

Rails – link_toの動的なスタイル

2021-04-02 / tau / コメントする

概要

Railsのヘルパーでクラスを動的に変更する方法。<%...%>を入れ子にすることができないが、文字列内の変数展開を使えば、変数の内容をクラスに設定できる。

コントローラー

コントローラーでインスタンス変数の配列を定義し、その内容によってlink_toのスタイルを変更する。

class PagesController < ApplicationController
  def link_to_style
    @items = ["使用可能", "使用不可", "使用可能"]
  end
end

class PagesController < ApplicationController

def link_to_style

@items = ["使用可能", "使用不可", "使用可能"]

end

ビュー

インスタンス変数の配列の各要素を取り出しながら、

変数availabilityにenabled/disabledを設定
link_toのclass設定で変数availabilityを文字列展開

<main>
  <% @items.each do |item| %>
    <% availability = (item == "使用可能" ? "enabled" : "disabled") %>
    <p>
      <%= item %>：
      <%= link_to "#", class: "#{availability}" do %>
        ◆◆◆
      <% end %>
    </p>
  <% end %>
</main>

<main>

<% @items.each do |item| %>

<% availability = (item == "使用可能" ? "enabled" : "disabled") %>

<p>

<%= item %>：

<%= link_to "#", class: "#{availability}" do %>

◆◆◆

<% end %>

</p>

<% end %>

</main>

この結果、HTMLソースは以下の様になる。

<main>
  <p>
    使用可能：
    <a class="enabled" href="#">◆◆◆</a>
  </p>
  <p>
    使用不可：
    <a class="disabled" href="#">◆◆◆</a>
  </p>
  <p>
    使用可能：
    <a class="enabled" href="#">◆◆◆</a>
  </p>
</main>

<main>

<p>

使用可能：

</p>

<p>

使用不可：

</p>

<p>

使用可能：

</p>

</main>

スタイル

クラスに設定されるenabled/disabledに対してスタイルを設定する

main {
  margin: 20px;
  font-size: 20px;
  p {
    margin-top: 10px;
    .enabled {
      color: #008800;
    }
    .disabled {
      color: #aabbaa;
      pointer-events: none;
    }
  }
}

main {

margin: 20px;

font-size: 20px;

p {

margin-top: 10px;

.enabled {

color: #008800;

}

.disabled {

color: #aabbaa;

pointer-events: none;

}

実行結果

disableを設定したリンクの色が薄くなっている。また、このリンクを無効にしたので、クリックしてもコンソールに反応が出ない。

Rails – 掲示板 – 新規投稿機能

2021-04-02 / tau / コメントする

概要

新規投稿ページの枠組みをつくったので、これに投稿機能を実装する。

掲示板の第2段階へ

準備

投稿画像ディレクトリー

投稿画像ファイル保存用のディレクトリーを作成する。

public/post_images

ビュー

新規投稿のnewビューは再掲。

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

コントローラー

post_paramsヘルパー

ビューのフォームからパラメーターを受け取る際のヘルパーで、コントローラーで扱うパラメーターを許可している。

:upload_fileは直接保存しないので含めていない。

class PostsController < ApplicationController

  .....

  def post_params
    params.require(:post).permit(:message)
  end
end

class PostsController < ApplicationController

.....

def post_params

params.require(:post).permit(:message)

end

createアクション

フォーム入力を受けて投稿記事を生成・保存する本体。ファイルのアップロードについてはこちらを参照。

記事を投稿したユーザーをデータベースから拾っている(L7)
メッセージか画像かどちらかがあれば投稿できる(L10-13)

app/controllers/posts_controllers.rb

class PostsController < ApplicationController

  .....

  def create
    # 記事を投稿したユーザーをDBから取得
    @user = User.find(user_in_session.id)
    # フォーム入力されたアップロードファイルを取得
    upload_file = params[:post][:upload_file]
    # メッセージと画像ファイルの両方がないとエラー
    if post_params[:message].blank? && upload_file.nil?
      flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"
      redirect_to new_post_path and return
    end

    # Postオブジェクトを生成
    @post = Post.new(post_params.merge(user_id: @user.id))

    # 画像ファイルが選択された場合
    if upload_file
      # アップロードファイルのファイルタイプが妥当かどうか検証
      case upload_file.content_type
      when "image/jpeg"
        extention = ".jpg"
      when "image/png"
        extention = ".png"
      else
        flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"
        render new_post_path and return
      end

      # 保存する画像ファイル名をランダム文字列に
      upload_file_name = random_string(20) + extention
      # 投稿画像を保存するディレクトリー
      upload_dir = Rails.root.join("public", "post_images")
      # アップロードする投稿画像ファイルのフルパス
      upload_file_path = upload_dir + upload_file_name
      # アップロードファイルの書き込み
      File.binwrite(upload_file_path, upload_file.read)

      # 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成
      if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)
        flash[:danger] = "投稿画像が保存できませんでした"
        redirect_to new_post_path and return
      end
    end

    # エラーがなければPostオブジェクトをデータベースに保存
    if @post.save
      redirect_to top_path and return
    else
      flash.now[:danger] = "投稿メッセージが保存できませんでした"
      redirect_to new_post_path and return
    end
  end

  .....

end

class PostsController < ApplicationController

.....

def create

# 記事を投稿したユーザーをDBから取得

@user = User.find(user_in_session.id)

# フォーム入力されたアップロードファイルを取得

upload_file = params[:post][:upload_file]

# メッセージと画像ファイルの両方がないとエラー

if post_params[:message].blank? && upload_file.nil?

flash[:danger] = "メッセージか画像か少なくともどちらかを入れてください"

redirect_to new_post_path and return

end

# Postオブジェクトを生成

@post = Post.new(post_params.merge(user_id: @user.id))

# 画像ファイルが選択された場合

if upload_file

# アップロードファイルのファイルタイプが妥当かどうか検証

case upload_file.content_type

when "image/jpeg"

extention = ".jpg"

when "image/png"

extention = ".png"

else

flash.now[:danger] = "JPEGかPINGの画像ファイルを指定してください"

render new_post_path and return

end

# 保存する画像ファイル名をランダム文字列に

upload_file_name = random_string(20) + extention

# 投稿画像を保存するディレクトリー

upload_dir = Rails.root.join("public", "post_images")

# アップロードする投稿画像ファイルのフルパス

upload_file_path = upload_dir + upload_file_name

# アップロードファイルの書き込み

File.binwrite(upload_file_path, upload_file.read)

# 生成済みのPostオブジェクトに従属させてPostImageオブジェクトを生成

if !@post.post_images.build(post_id: @post.id, file_name: upload_file_name)

flash[:danger] = "投稿画像が保存できませんでした"

redirect_to new_post_path and return

end

# エラーがなければPostオブジェクトをデータベースに保存

if @post.save

redirect_to top_path and return

else

flash.now[:danger] = "投稿メッセージが保存できませんでした"

redirect_to new_post_path and return

end

.....

end

メッセージと画像、メッセージのみ、画像のみの投稿後のデータベースの例は以下のとおり。

mysql> SELECT id, user_id, message FROM posts;
+----+---------+-------------------------------------------+
| id | user_id | message                                   |
+----+---------+-------------------------------------------+
|  1 |       1 | こんにちは                                |
|  2 |       2 | よろしく。
メッセージだけ。              |
|  3 |       3 |                                           |
+----+---------+-------------------------------------------+
3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;
+----+---------+--------------------------+
| id | post_id | file_name                |
+----+---------+--------------------------+
|  1 |       1 | Z579R0dXcpxF6BZqqmN8.jpg |
|  2 |       3 | qFpkBIPhopF5JBhLluoY.jpg |
+----+---------+--------------------------+
2 rows in set (0.00 sec)

mysql> SELECT id, user_id, message FROM posts;

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

| id | user_id | message |

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

| 1 | 1 | こんにちは |

| 2 | 2 | よろしく。

メッセージだけ。 |

| 3 | 3 | |

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

3 rows in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | Z579R0dXcpxF6BZqqmN8.jpg |

| 2 | 3 | qFpkBIPhopF5JBhLluoY.jpg |

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

2 rows in set (0.00 sec)

Rails – バリデーターのカスタマイズ

2021-04-01 / tau / コメントする

概要

モデルの検証を行うバリデーターを自作するのにいくつかの方法がある。

バリデーションメソッドをモデルで定義
ActiveModel::Validatorのサブクラスを定義
ActiveModel::EachValidatorのサブクラスを定義

バリデーションメソッド

検証したいモデルの中でカスタムメソッドを定義し、validate(単数形)でメソッドを呼び出す。

以下のコードは、:name属性と:email属性を持つUserモデルをカスタムメソッドにより検証する例。

class User < ApplicationRecord
  validate :name_or_email_presents

  def name_or_email_presents
    message = "Either name or email must present"
    errors.add(:name, message) unless name.present? || email.present?
  end
end

class User < ApplicationRecord

validate :name_or_email_presents

def name_or_email_presents

message = "Either name or email must present"

errors.add(:name, message) unless name.present? || email.present?

end

カスタムメソッドname_or_email_presentsを定義
メソッドでは、:nameと:emailの両方とも空の場合にエラーを追加
モデルでvalidateによってメソッドをコールバックとして追加(validateは単数形)

ActiveModel::Validator

ActiveModel::EachValidator

Rails – 掲示板 – 新規投稿ページ

2021-04-01 / tau / コメントする

概要

サインインユーザーによる新規記事投稿のページを実装していく。

サインインユーザーがメニューアイコンをクリックして新規投稿ページへ
- 新規投稿ページでは、メッセージを入力、画像ファイルを指定
- サインインしていないユーザーに対してはアクセス制限
ここではresourcesによるRails標準のルーティングを使う
コントローラーはPostsController.rb

掲示板の第2段階へ

ルーティング

コントローラーに対応したpostsについてresourcesでルーティングを設定する。

config/routes.rb

Rails.application.routes.draw do

  .....

  resources :posts
end

Rails.application.routes.draw do

.....

resources :posts

end

resourcesにより設定されたルーティングは以下のとおり。

rails routes

[vagrant@vagrant ex_bbs]$ rails routes
         Prefix Verb   URI Pattern               Controller#Action
           root GET    /                         pages#top
            top GET    /top(.:format)            pages#top
        sign_up GET    /sign_up(.:format)        users#sign_up
        sign_in GET    /sign_in(.:format)        users#sign_in
       sign_out GET    /sign_out(.:format)       users#sign_out
sign_up_process POST   /sign_up(.:format)        users#sign_up_process
sign_in_process POST   /sign_in(.:format)        users#sign_in_process
        profile GET    /profile/:id(.:format)    users#show
      edit_user GET    /users/:id/edit(.:format) users#edit
    update_user PATCH  /users/:id/edit(.:format) users#update
          posts GET    /posts(.:format)          posts#index
                POST   /posts(.:format)          posts#create
       new_post GET    /posts/new(.:format)      posts#new
      edit_post GET    /posts/:id/edit(.:format) posts#edit
           post GET    /posts/:id(.:format)      posts#show
                PATCH  /posts/:id(.:format)      posts#update
                PUT    /posts/:id(.:format)      posts#update
                DELETE /posts/:id(.:format)      posts#destroy

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

root GET / pages#top

top GET /top(.:format) pages#top

sign_up GET /sign_up(.:format) users#sign_up

sign_in GET /sign_in(.:format) users#sign_in

sign_out GET /sign_out(.:format) users#sign_out

sign_up_process POST /sign_up(.:format) users#sign_up_process

sign_in_process POST /sign_in(.:format) users#sign_in_process

profile GET /profile/:id(.:format) users#show

edit_user GET /users/:id/edit(.:format) users#edit

update_user PATCH /users/:id/edit(.:format) users#update

posts GET /posts(.:format) posts#index

POST /posts(.:format) posts#create

new_post GET /posts/new(.:format) posts#new

edit_post GET /posts/:id/edit(.:format) posts#edit

post GET /posts/:id(.:format) posts#show

PATCH /posts/:id(.:format) posts#update

PUT /posts/:id(.:format) posts#update

DELETE /posts/:id(.:format) posts#destroy

コントローラー

PostControllerコントローラーを生成する。アクションについては、生成後のコントローラーファイルを編集することとして、ここでは枠組みだけを生成。

rails generate controller posts

[vagrant@vagrant ex_bbs]$ rails generate controller posts
Running via Spring preloader in process 28111
      create  app/controllers/posts_controller.rb
      invoke  erb
      create    app/views/posts
      invoke  test_unit
      create    test/controllers/posts_controller_test.rb
      invoke  helper
      create    app/helpers/posts_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/posts.coffee
      invoke    scss
      create      app/assets/stylesheets/posts.scss

[vagrant@vagrant ex_bbs]$ rails generate controller posts

Running via Spring preloader in process 28111

create app/controllers/posts_controller.rb

invoke erb

create app/views/posts

invoke test_unit

create test/controllers/posts_controller_test.rb

invoke helper

create app/helpers/posts_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/posts.coffee

invoke scss

create app/assets/stylesheets/posts.scss

生成されたコントローラーファイルにアクションを追加。

new
- 他画面から遷移して投稿画面をレンダリング
- ビューで扱うモデルはPostなので、@postにUserのインスタンスをいれておく
create
- 投稿画面からのPOSTにより処理が渡され、投稿記事の新規作成処理を行う

またアクション実行前にauthorizeをコールバック登録し、アクセス制限をかけている。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  before_action :authorize

  def new
    @user = User.new
  end

  def create
  end
end

class PostsController < ApplicationController

before_action :authorize

def new

@user = User.new

end

def create

end

ビュー

newアクションによりレンダリングされるページのコード。

メッセージ入力用のtext_areaとファイル選択用のfile_field、送信用のボタンを配置する。

views/posts/new.html.erb

<div class="new_post">
  <h1>新規記事投稿</h1>
  <div class="contents">
    <%= form_with(model: @post, url: '/posts', local: true) do |f| %>
      <h2>メッセージ入力</h2>
      <div class="field">
        <%= f.text_area(:message, class: "message") %>
      </div>
      <h2>画像アップロード</h2>
      <div class="field">
        <%= f.file_field(:upload_file) %>
      </div>
      <button>登録する</button>
    <% end %>
  </div>
</div>

<h1>新規記事投稿</h1>

<%= form_with(model: @post, url: '/posts', local: true) do |f| %>

<h2>メッセージ入力</h2>

<%= f.text_area(:message, class: "message") %>

</div>

<h2>画像アップロード</h2>

<%= f.file_field(:upload_file) %>

</div>

<% end %>

</div>

スタイル

ビューに対する最低限のスタイルを設定。

app/assests/stylesheets/posts.scss

// new.html.erb
.new_post {
  margin: 0 auto;
  width: 600px;
  height: 100%;
  background-color: white;
  h1 {
    margin: 0 auto;
    padding: 40px 0 30px 0;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    h2 {
      margin: 30px 20px 0 10px;
      font-size: 15px;
    }
    .field {
      margin: 10px 20px 0 auto;
      width: 500px;
    }
    .message {
      background-color: red;
      width: 100%;
      height: 100px;
      background-color: #f8f8f8;
    }
    button {
      display: block;
      margin: 20px auto;
    }
  }
}

// new.html.erb

.new_post {

margin: 0 auto;

width: 600px;

height: 100%;

background-color: white;

h1 {

margin: 0 auto;

padding: 40px 0 30px 0;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

h2 {

margin: 30px 20px 0 10px;

font-size: 15px;

}

.field {

margin: 10px 20px 0 auto;

width: 500px;

}

.message {

background-color: red;

width: 100%;

height: 100px;

background-color: #f8f8f8;

}

button {

display: block;

margin: 20px auto;

}

リンク設定

サインインユーザー用ヘッダーメニューのアイコンから記事投稿ページへのリンクを設定。

app/views/layouts/application.html.erb

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

  <body>
    .....
    <header>
      .....
      <!-- ヘッダーメニュ -->
      <ul class="header_menu">
        .....
        <!-- 記事投稿 -->
        <li>
          <%= link_to(new_post_path) do %>
            <i class="fas fa-arrow-circle-up icon" title="記事投稿"></i>
          <% end %>
        </li>
        .....
      </ul>
    </header>

    .....
  </body>
</html>

<!DOCTYPE html>

<html>

.....

<body>

.....

.....

.....

<li>

<%= link_to(new_post_path) do %>

<% end %>

</li>

.....

</ul>

</header>

.....

</body>

</html>

Rails – 掲示板 – モデルとデータベースの準備

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

概要

第2段階の仕様のうちプロフィールに続いて記事投稿の機能を実装していく。

まず、記事投稿に必要なモデルとデータベースのテーブルを準備する。

Post：投稿記事のモデル
PostImage：投稿記事に付加可能な画像ファイルのモデル

手順の詳細は「モデル生成とマイグレーション」、「アソシエーション～基本」を参照

モデルの生成

Postモデル

以下のRailsコマンドでPostモデルを生成する。Userモデルを参照するため、user:referencesを指定。

$ rails generate model post user:references message:text

1	$ rails generate model post user:references message:text

生成されたモデルの内容を確認。references指定に基づいて、Railsによりbelongs_toが記述されている。

app/models/post.rb

class Post < ApplicationRecord
  belongs_to :user
end

class Post < ApplicationRecord

belongs_to :user

end

モデルと同時に生成されるマイグレーションファイルを確認。ここでもusersテーブルを参照する外部キーが設定されている。

20210331121751_create_posts

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.references :user, foreign_key: true
      t.text :message

      t.timestamps
    end
  end
end

class CreatePosts < ActiveRecord::Migration[5.1]

def change

create_table :posts do |t|

t.references :user, foreign_key: true

t.text :message

t.timestamps

end

PostImageモデル

以下のRailsコマンドでPostモデルを生成する。Postモデルを参照するため、post:referencesを指定。

$ rails generate model post_image post:references file_name:string

1	$ rails generate model post_image post:references file_name:string

生成されたモデルの内容を確認。references指定に基づいて、Railsによりbelongs_toが記述されている。

models/post_image.rb

class PostImage < ApplicationRecord
  belongs_to :post
end

class PostImage < ApplicationRecord

belongs_to :post

end

モデルと同時に生成されるマイグレーションファイルを確認。ここでもpostsテーブルを参照する外部キーが設定されている。

20210331122545_create_post_images.rb

class CreatePostImages < ActiveRecord::Migration[5.1]
  def change
    create_table :post_images do |t|
      t.references :post, foreign_key: true
      t.string :file_name

      t.timestamps
    end
  end
end

class CreatePostImages < ActiveRecord::Migration[5.1]

def change

create_table :post_images do |t|

t.references :post, foreign_key: true

t.string :file_name

t.timestamps

end

アソシエーションの設定

Userは複数の記事(Post)を投稿するため、Userモデルにhas_manyを追加する。

models/User.rb

class User < ApplicationRecord
  has_many :posts

  .....

end

class User < ApplicationRecord

has_many :posts

.....

end

1つの記事(Post)が複数の画像(PostImage)を持つことができるので、Postモデルにhas_manyを設定する。post_imagesと複数形になっている点に注意。

さらに、記事投稿時に画像ファイルも削除するよう、dependentも設定。

models/post.rb

class Post < ApplicationRecord
  belongs_to :user # Railsにより記述済み
  # Postは複数のPostImageを持ち、消去時にPostImageも併せて消去
  has_many :post_images, dependent: :destroy
end

class Post < ApplicationRecord

belongs_to :user # Railsにより記述済み

# Postは複数のPostImageを持ち、消去時にPostImageも併せて消去

has_many :post_images, dependent: :destroy

end

post_image.rbはPostに従属するが、Railsによってbelongs_toが設定済みなので編集不要。

マイグレート

以上の設定に基づいてマイグレーションを実行。その結果、postsテーブルとpost_imagesテーブルが生成される。

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

mysql> show tables;

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

| Tables_in_ex_bbs_development |

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

| ar_internal_metadata |

| post_images |

| posts |

| schema_migrations |

| users |

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

5 rows in set (0.00 sec)

postsテーブル、post_imagesテーブルの構造を確認。

mysql> DESCRIBE posts;
+------------+------------+------+-----+---------+----------------+
| Field      | Type       | Null | Key | Default | Extra          |
+------------+------------+------+-----+---------+----------------+
| id         | bigint(20) | NO   | PRI | NULL    | auto_increment |
| user_id    | bigint(20) | YES  | MUL | NULL    |                |
| message    | text       | YES  |     | NULL    |                |
| created_at | datetime   | NO   |     | NULL    |                |
| updated_at | datetime   | NO   |     | NULL    |                |
+------------+------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> DESCRIBE post_images;
+------------+--------------+------+-----+---------+----------------+
| Field      | Type         | Null | Key | Default | Extra          |
+------------+--------------+------+-----+---------+----------------+
| id         | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| post_id    | bigint(20)   | YES  | MUL | NULL    |                |
| file_name  | varchar(255) | YES  |     | NULL    |                |
| created_at | datetime     | NO   |     | NULL    |                |
| updated_at | datetime     | NO   |     | NULL    |                |
+------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

mysql> DESCRIBE posts;

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

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

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

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

5 rows in set (0.00 sec)

mysql> DESCRIBE post_images;

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

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

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

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

5 rows in set (0.00 sec)

rails consoleでの確認

rails consoleでアソシエーションが機能しているか確認。

まず、Userに属するPostデータとPostに属するPostImageデータを作成。

irb(main):001:0> user = User.find(1)
irb(main):002:0> post = user.posts.create(message: "初投稿")
irb(main):003:0> post.post_images(file_name: "dummy")

irb(main):001:0> user = User.find(1)

irb(main):002:0> post = user.posts.create(message: "初投稿")

irb(main):003:0> post.post_images(file_name: "dummy")

テーブルに登録されたデータを確認。

mysql> SELECT id, user_id, message FROM posts;
+----+---------+-----------+
| id | user_id | message   |
+----+---------+-----------+
|  1 |       1 | 初投稿    |
+----+---------+-----------+
1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name  FROM post_images;
+----+---------+-----------+
| id | post_id | file_name |
+----+---------+-----------+
|  1 |       1 | dummy     |
+----+---------+-----------+
1 row in set (0.00 sec)

mysql> SELECT id, user_id, message FROM posts;

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

| id | user_id | message |

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

| 1 | 1 | 初投稿 |

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

1 row in set (0.00 sec)

mysql> SELECT id, post_id, file_name FROM post_images;

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

| id | post_id | file_name |

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

| 1 | 1 | dummy |

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

1 row in set (0.00 sec)

このあとpost.destroyにより、postデータとPostImageデータが連動して削除される。