Rails – ページネーション～kaminari

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

概要

Gemのkaminariを利用してページネーションを実装する手順。最も基本的な手順は以下の通り。

kaminariをインストールする
コントローラーにpageメソッドを記述
ビューにpaginateメソッドを記述

基本手順

kaminariのインストール

Gemfileに以下の1行を追加し、bundle install

gem 'kaminari'

1	gem 'kaminari'

準備

ダミーデータの準備

200個のPostデータをページネートすることとし、seeds.rbで初期データを生成する。

標準の表示

コントローラー

class PostsController < ApplicationController
    def kaminari
      @posts = Post.all.order(id: "desc")
    end
end

class PostsController < ApplicationController

def kaminari

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

end

ビュー

<h1>kaminari test</h1>

<% @posts.each do |post| %>
  <p><%= post.id %> : <%= post.comment %></p>
<% end %>

<h1>kaminari test</h1>

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

<% end %>

この状態だと、200個の投稿データが全て表示され、スクロールしなければならなくなる。

ページネーションの追加

コントローラーで、表示するモデルデータにpageメソッドとperメソッドを追加。

kaminariによってparamsにビューで表示しているページが追加される
pageに引数として表示させるページを渡す
perで1ページあたりの表示数を指定する

class PostsController < ApplicationController
    def kaminari
      @posts = Post.all.order(id: "desc").page(params[:page]).per(20)
    end
end

class PostsController < ApplicationController

def kaminari

@posts = Post.all.order(id: "desc").page(params[:page]).per(20)

end

ビューにpagenateメソッドを追加し、ページ操作の表示をさせる。

<h1>kaminari test</h1>

<%= paginate @posts %>

<% @posts.each do |post| %>
  <p><%= post.id %> : <%= post.comment %></p>
<% end %>

<h1>kaminari test</h1>

<%= paginate @posts %>

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

<% end %>

Rails – データベースの初期データ

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

概要

Railsで準備されているseeds.rbファイルを使って、データベースの初期データを準備する手順。

Railsであらかじめdbディレクトリー下にseeds.rbファイルが準備されている。

# This file should contain all the record creation needed to seed the database with its default values.
# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).
#
# Examples:
#
#   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
#   Character.create(name: 'Luke', movie: movies.first)

# This file should contain all the record creation needed to seed the database with its default values.

# The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup).

# Examples:

# movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])

# Character.create(name: 'Luke', movie: movies.first)

このファイルに初期データをセットするコードを書き、コンソールでrails db:seedを実行すると、そのコードが実行される。

操作例

たとえばPostモデルで200件のダミーデータを準備する場合。

Postモデル

commentフィールドだけを持つPostモデルを準備する。

class CreatePosts < ActiveRecord::Migration[5.1]
  def change
    create_table :posts do |t|
      t.string :comment

      t.timestamps
    end
  end
end

class CreatePosts < ActiveRecord::Migration[5.1]

def change

create_table :posts do |t|

t.string :comment

t.timestamps

end

seeds.rbファイル

seeds.rbファイルに、200個のPostデータを書き込むコードを書く。

db/seeds.rb

200.times do |i|
  Post.create(comment:"#{i}番目の投稿")
end

200.times do |i|

Post.create(comment:"#{i}番目の投稿")

end

Railsコマンド実行

以下のRailsコマンドでseeds.rbファイルを実行し、データベースにデータを書き込む。

[vagrant@vagrant gem_test]$ rails db:seed

1	[vagrant@vagrant gem_test]$ rails db:seed

結果

以下のとおりデータが書き込まれる。

mysql> select * from posts;
+-----+--------------------+---------------------+---------------------+
| id  | comment            | created_at          | updated_at          |
+-----+--------------------+---------------------+---------------------+
|   1 | 0番目の投稿        | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |
|   2 | 1番目の投稿        | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |
|   3 | 2番目の投稿        | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |
|   4 | 3番目の投稿        | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |
|   5 | 4番目の投稿        | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

.....

| 196 | 195番目の投稿      | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |
| 197 | 196番目の投稿      | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |
| 198 | 197番目の投稿      | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |
| 199 | 198番目の投稿      | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |
| 200 | 199番目の投稿      | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |
+-----+--------------------+---------------------+---------------------+
200 rows in set (0.00 sec)

mysql> select * from posts;

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

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

| 1 | 0番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

| 2 | 1番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

| 3 | 2番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

| 4 | 3番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

| 5 | 4番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

.....

| 196 | 195番目の投稿 | 2021-04-17 02:34:36 | 2021-04-17 02:34:36 |

| 197 | 196番目の投稿 | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |

| 198 | 197番目の投稿 | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |

| 199 | 198番目の投稿 | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |

| 200 | 199番目の投稿 | 2021-04-17 02:34:37 | 2021-04-17 02:34:37 |

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

200 rows in set (0.00 sec)

Rails – ファイルのアップロード～Carrierwave

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

概要

ファイルのアップロードをGemのCarrierWaveで簡単にする手順。

CarrierWaveをインストールする
Uploaderを生成する
モデルのファイル名プロパティーとUploaderを関連付ける

あとはfile_fieldから選択されたファイルをパラメーターに含むモデルでsave、uploadなど実行すれば、実体ファイルもそれに連動して操作される。

アップロードファイルのパラメーターが複数でも、1つのアップローダーで対応できる。

手順

要件

name、image1、image2の3つのstring属性を持つUserモデルに画像をアップロードする
データベースのカラムもこれに対応したVARCHARタイプの3つ

CarrierWaveの導入

Gemfileに以下の1行を追加。

gem 'carrierwave'

1	gem 'carrierwave'

Railsサーバーを止めてbundle install後、サーバーを再起動

[vagrant@vagrant gem_test]$ rails g uploader user_image
Running via Spring preloader in process 28455
      create  app/uploaders/user_image_uploader.rb

[vagrant@vagrant gem_test]$ rails g uploader user_image

Running via Spring preloader in process 28455

create app/uploaders/user_image_uploader.rb

Uploaderクラスの生成

Railsコマンドでアップローダークラスを生成する。この例ではUserImageUploaderとしている。

[vagrant@vagrant uploads]$ rails generate uploader user_image
Running via Spring preloader in process 2664
      create  app/uploaders/user_image_uploader.rb

[vagrant@vagrant uploads]$ rails generate uploader user_image

Running via Spring preloader in process 2664

create app/uploaders/user_image_uploader.rb

この操作によって、以下のディレクトリーとファイルが追加される。

app/uploaders/user_image_uploader.rb

モデルとDB

UserモデルとDBを結ぶマイグレーションファイルは以下のとおりで、画像ファイルのファイル名を保持するフィールドを2つ持っている。

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

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :image1

t.string :image2

t.timestamps

end

モデルパラメーターとの関連付け

モデルクラスのファイルにmount_uploaderの1行を追加し、パラメーターとアップローダーを関連付ける。ここではimage1とimage2にUserImageUploaderを関連付けている。

app/models/user.rb

class User < ApplicationRecord
  mount_uploader :image1, UserImageUploader
  mount_uploader :image2, UserImageUploader
end

class User < ApplicationRecord

mount_uploader :image1, UserImageUploader

mount_uploader :image2, UserImageUploader

end

コントローラー

コントローラーではアップローダーを特に意識する必要はない。

今回の例では、既にデータが登録されているusersテーブルの先頭データを取り出し、画像パラメーターを更新している。

class UsersController < ApplicationController
  def carrier_wave
    @user = User.first

    if params[:user].present?
      @user.update(user_params)
    end
  end

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

class UsersController < ApplicationController

def carrier_wave

@user = User.first

if params[:user].present?

@user.update(user_params)

end

private

def user_params

params.require(:user).permit(:name, :image1, :image2)

end

ビュー

ビューでもCarrierWaveを意識する必要はない。ここでは画像更新機能として以下の2つを実行している。

file_fieldで指定されたアップロード画像をコントローラーにPOST
アップロード画像が存在していれば表示

<div class="carrier_wave">
  <main>
    <h1>CarrierWave</h1>

    <%= form_with(model: @user, url: carrier_wave_path, local: true) do |f| %>
      <%= f.text_field(:name) %>
      <%= f.file_field(:image1) %>
      <%= f.file_field(:image2) %>
      <%= submit_tag("登録") %>
    <% end %>

    <p><%= @user.name %></p>
    <% if @user.image1? %>
      <%= image_tag(@user.image1.url) %>
    <% end %>

    <% if @user.image2? %>
      <%= image_tag(@user.image2.url) %>
    <% end %>
  </main>
</div>

<main>

<h1>CarrierWave</h1>

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

<%= f.text_field(:name) %>

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

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

<%= submit_tag("登録") %>

<% end %>

<% if @user.image1? %>

<%= image_tag(@user.image1.url) %>

<% end %>

<% if @user.image2? %>

<%= image_tag(@user.image2.url) %>

<% end %>

</main>

</div>

エラー対応

当初、NameError uninitialized-constantが発生。下記1行をapplication.rbに追加してエラーは出なくなったが、なぜapp下のuploadersが自動で読み込まれないのか不明。

config/application.rb

module GemTest
  class Application < Rails::Application
    .....
    config.autoload_paths += Dir[Rails.root.join('app', 'uploaders')]
  end
endか

module GemTest

class Application < Rails::Application

.....

config.autoload_paths += Dir[Rails.root.join('app', 'uploaders')]

end

endか

ファイルの保存場所

デフォルトでは以下の場所に保存される。

アップロードファイル: public/uplodads/モデル名/属性名/:id
テンポラリーファイル: public/uploads/tmp

たとえば今回の例でid=1のユーザーのファイルは以下の様に保存される。ファイルを更新すると、前のファイルは削除される。

[vagrant@vagrant gem_test]$ ls public/uploads/user/image1/1
highway.jpg
[vagrant@vagrant gem_test]$ ls public/uploads/user/image2/1
illumination.jpg

[vagrant@vagrant gem_test]$ ls public/uploads/user/image1/1

highway.jpg

[vagrant@vagrant gem_test]$ ls public/uploads/user/image2/1

illumination.jpg

各種設定

概要

ファイルの保存場所やファイル名の付け方などの設定は、rails g uploderで生成したアップローダーのファイルに書かれている。

app/uploader/user_image_uploader.rb

class UserImageUploader < CarrierWave::Uploader::Base
  .....
end

class UserImageUploader < CarrierWave::Uploader::Base

.....

end

ファイル保存場所

媒体

storageでローカルファイルへの保存を指定。fogはクラウドサービス用のGem。

パス

def store_dirでファイルを保存するディレクトリーのパスを設定。

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

# Choose what kind of storage to use for this uploader:

storage :file

# storage :fog

# Override the directory where uploaded files will be stored.

# This is a sensible default for uploaders that are meant to be mounted:

def store_dir

"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"

end

ファイル名

デフォルトではここはコメントアウトされていて、アップロード時のオリジナルファイル名が使われる。以下の様にコメントを外すと、ファイル名が全てsomething.jpgに固定される。

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  def filename
    "something.jpg" if original_filename
  end

# Override the filename of the uploaded files:

# Avoid using model.id or version_name here, see uploader/store.rb for details.

def filename

"something.jpg" if original_filename

end

ここでランダム文字列などのUUIDを使うとユーザーごとにディレクトリーを分けなくてもよくなりそうだが、CarrierWave内でファイル種別を取得する必要がある(とりあえず先送り)。

ファイル拡張子

以下の部分のコメントを外すと、指定した拡張子のファイル以外はアップロードされず、データベース処理もロールバックされる。

  # Add an allowlist of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_allowlist
    %w(jpg jpeg gif png)
  end

# Add an allowlist of extensions which are allowed to be uploaded.

# For images you might use something like this:

def extension_allowlist

%w(jpg jpeg gif png)

end

ただし明示的なエラーは発生しなかった。

Processing by UsersController#carrier_wave as HTML
  Parameters: {"utf8"=>"✓", ..., "user"=>{"name"=>"users1", "image2"=>...>}, "commit"=>"登録"}
  User Load (0.3ms)  SELECT  `users`.* FROM `users` ORDER BY `users`.`id` ASC LIMIT 1
   (0.1ms)  BEGIN
   (0.2ms)  ROLLBACK
  Rendering users/carrier_wave.html.erb within layouts/application
  Rendered users/carrier_wave.html.erb within layouts/application (1.2ms)
Completed 200 OK in 17ms (Views: 9.5ms | ActiveRecord: 0.6ms)

Processing by UsersController#carrier_wave as HTML

Parameters: {"utf8"=>"✓", ..., "user"=>{"name"=>"users1", "image2"=>...>}, "commit"=>"登録"}

User Load (0.3ms) SELECT `users`.* FROM `users` ORDER BY `users`.`id` ASC LIMIT 1

(0.1ms) BEGIN

(0.2ms) ROLLBACK

Rendering users/carrier_wave.html.erb within layouts/application

Rendered users/carrier_wave.html.erb within layouts/application (1.2ms)

Completed 200 OK in 17ms (Views: 9.5ms | ActiveRecord: 0.6ms)

Rails – erbファイルでの改行の反映

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

概要

\nなどの改行コードを含む文字列をhtml.erbファイルで表示させると改行が反映されない
改行コードを<br>に置換してhtml_safeで表示させると改行は反映される
しかしながら、この場合は他の特殊文字もそのまま表示されるのでXSSに対して脆弱
そこで以下の手順をとる
1. まず特殊文字をエスケープ
2. 改行コードを<br>に変換
3. html_safeやrawで表示

改行コードは反映されない

改行コードを含む文字列をerbファイル中<%= ... %>で表示させても、HTMLで解釈されないので改行されない。

<% str = "1行目\n2行目<script>alert()</script>" %>
<%= str %>

# 1行目 2行目

<% str = "1行目\n2行目<script>alert()</script>" %>

<%= str %>

# 1行目 2行目

<br>タグに変換してもエスケープされる

erb側のセキュリティー対策のため、HTMLの特殊文字はエンティティ―でエスケープされる。なので改行コードを<br>に変換するとそのままタグが表示される。

<%= str.gsub(/\n|\r|\r\n/, "<br>") %>

# 1行目<br>2行目

<%= str.gsub(/\n|\r|\r\n/, "<br>") %>

# 1行目<br>2行目

html_safeやrawならタグとして機能する

html_safeやrawを使うと、タグをタグとして解釈してくれる。

<%= str.gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 1行目
# 2行目

<%= raw str.gsub(/\n|\r|\r\n/, "<br>") %>

# 1行目
# 2行目

<%= str.gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 1行目

# 2行目

<%= raw str.gsub(/\n|\r|\r\n/, "<br>") %>

# 1行目

# 2行目

この場合XSSに対して脆弱

ただし上記の方法では、<br>以外のタグも機能してしまうので、XSSに対して脆弱。

<% str = "1行目\n2行目<script>alert()</script>" %>

<%= str.gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 表示はされるがスクリプトも実行されてしまう
# 1行目
# 2行目

<% str = "1行目\n2行目<script>alert()</script>" %>

<%= str.gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 表示はされるがスクリプトも実行されてしまう

# 1行目

# 2行目

エスケープしてから改行コードを変換

以下の手順なら、改行コードから変換された<br>以外はエスケープされる。

まずh関数で特殊文字をエスケープ
その後改行コードを<br>タグに置換
その結果をhtml_safeやrawで表示させる

<%= h(str).gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 1行目
# 2行目<script>alert()</script>

<%= h(str).gsub(/\n|\r|\r\n/, "<br>").html_safe %>

# 1行目

# 2行目<script>alert()</script>

ヘルパーにしておくと便利

上記の処理をヘルパーとして定義しておくと汎用的に使える。

def html_safe_newline(str)
  h(str).gsub(/\n|\r|\r\n/, "<br>").html_safe
end

<%= html_safe_newline(str) %>

# 1行目
# 2行目<script>alert()</script>

def html_safe_newline(str)

h(str).gsub(/\n|\r|\r\n/, "<br>").html_safe

end

<%= html_safe_newline(str) %>

# 1行目

# 2行目<script>alert()</script>

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を設定したリンクの色が薄くなっている。また、このリンクを無効にしたので、クリックしてもコンソールに反応が出ない。