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

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

概要

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

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

掲示板の第1段階へ

データベースの準備

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

database.yml

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

config/database.yml

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

development:
  <<: *default
  database: ex_bbs_development

test:
  <<: *default
#  database: ex_bbs_test

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

default: &default

adapter: mysql2

encoding: utf8

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

username: root

password:

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

development:

<<: *default

database: ex_bbs_development

test:

<<: *default

# database: ex_bbs_test

production:

<<: *default

# database: ex_bbs_production

# username: ex_bbs

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

DB作成

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

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

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

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

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

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

[vagrant@vagrant ex_bbs]$ rails db:create

Created database 'ex_bbs_development'

[vagrant@vagrant ex_bbs]$ rails dbconsole;

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

Your MySQL connection id is 6

Server version: 5.5.62 MySQL Community Server (GPL)

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

affiliates. Other names may be trademarks of their respective

owners.

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

mysql> show databases;

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

| Database |

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

| information_schema |

| codecamp_bbs |

| codecamp_photo_development |

| ex_bbs_development |

| mysql |

| performance_schema |

| testdb |

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

7 rows in set (0.00 sec)

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

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

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

name:string
email:string
password:string

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

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

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

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

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

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

Running via Spring preloader in process 27642

invoke active_record

create db/migrate/20210320060906_create_users.rb

create app/models/user.rb

invoke test_unit

create test/models/user_test.rb

create test/fixtures/users.yml

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

app/models/user.rb

class User < ApplicationRecord
end

1 2	class User < ApplicationRecord end

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

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

db/20210320060906_create_users.rb

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

      t.timestamps
    end
  end
end

class CreateUsers < ActiveRecord::Migration[5.1]

def change

create_table :users do |t|

t.string :name

t.string :email

t.string :password

t.timestamps

end

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

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

[vagrant@vagrant ex_bbs]$ rails db:migrate

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

-- create_table(:users)

-> 0.0032s

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

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

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

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

mysql> show tables;

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

| Tables_in_ex_bbs_development |

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

| ar_internal_metadata |

| schema_migrations |

| users |

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

3 rows in set (0.00 sec)

mysql> desc users;

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

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

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

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

6 rows in set (0.00 sec)

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

フォームデータの取得

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

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

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

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

app/controllers/users_controller.rb

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

  .....

end

class UsersController < ApplicationController

def sign_up

@user = User.new

render layout: 'application_signed_out'

end

.....

end

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

app/views/users/sign_up.html.erb

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

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

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

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

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

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

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

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

<% end %>

</div>

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

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

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

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

class UsersController < ApplicationController

.....

private

def user_params

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

end

データ保存の枠組み

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

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

class UsersController < ApplicationController

  .....

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

  .....

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

class UsersController < ApplicationController

.....

def sign_up_process

user = User.new(user_params)

user.save

end

.....

private

def user_params

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

end

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

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

mysql> select * from users;

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

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

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

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

1 row in set (0.00 sec)

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

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

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

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

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

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

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

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

class User < ApplicationRecord

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

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

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

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

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

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

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

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

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

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

end

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

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

エラー表示

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

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

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

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

コントローラーでの処理

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

app/controllers/users_controller.rb

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

  def sign_in
    render layout: 'application_signed_out'
  end

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

  .....

end

class UsersController < ApplicationController

def sign_up

@user = User.new

render layout: 'application_signed_out'

end

def sign_in

render layout: 'application_signed_out'

end

def sign_up_process

@user = User.new(user_params)

if @user.valid?

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

render :sign_in, layout: 'application_signed_out'

else

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

render :sign_up, layout: 'application_signed_out'

end

.....

end

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

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

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

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

レイアウトでの表示

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

app/views/layouts/application_signed_out.html.erb

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

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

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

    <%= yield %>

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

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

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

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

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

</head>

<body>

<% if flash.now.present? %>

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

<% end %>

<%= yield %>

window.setTimeout(() => {

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

}, 3000);

</script>

</body>

</html>

スタイルの設定

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

app/assets/stylesheets/common.scss

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

.flash_message {

margin-bottom: 10px;

padding: 10px;

border: 2px solid;

text-align: center;

font-size: 16px;

&_success {

background-color: #9df;

color: #00f;

}

&_danger {

background-color: #fcc;

color: #f00;

}

DB書き込み処理

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

class UsersController < ApplicationController

  .....

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

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

@user = User.new(user_params)

if @user.save

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

render :sign_in, layout: 'application_signed_out'

else

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

render :sign_up, layout: 'application_signed_out'

end

.....

end

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

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

mysql> SELECT * FROM users;

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

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

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

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

1 row in set (0.00 sec)

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

パスワードの暗号化

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

class User < ApplicationRecord
  before_create :encrypt_password

  .....

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

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

class User < ApplicationRecord

before_create :encrypt_password

.....

def encrypt_password

self.password = User.password_digest(password)

end

def self.password_digest(password)

salt = "Qc7XGCLIRTzAG7r3Wo7H7Ui++jr0"

pass_digest = Digest::MD5.hexdigest(password)

salt_digest = Digest::MD5.hexdigest(salt)

Digest::MD5.hexdigest(pass_digest + salt_digest)

end

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

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

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

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

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

mysql> SELECT * FROM users;

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

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

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

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

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

Rails – コールバック

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

概要

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

コールバックの種類

オブジェクトの生成

before_validation
after_validation
before_save
around_save
before_create
around_create
after_create
after_save
after_commit/after_rollback

オブジェクトの更新

before_validation
after_validation
before_save
around_save
before_update
around_update
after_update
after_save
after_commit/after_rollback

オブジェクトの消去

before_destroy
around_destroy
after_destroy
after_commit/after_rollback

Rails – パスワードの暗号化～ゼロから

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

概要

パスワードをデータベースに保存する際に暗号化して、万一流出した際のリスクを減らす方法。ここではハッシュ化してメッセージダイジェストにすることを「暗号化」とする。

暗号化されたパスワードを保存しておき、サインインの際に入力されたパスワードを同じ手順で暗号化し、得られたメッセージダイジェストが一致すれば符合しているとする。

以下の方法で順次リスクを減らしていく。

パスワードをハッシュ化
パスワードにソルトを連結してハッシュ化
パスワードとソルトをそれぞれハッシュ化したものを連結してハッシュ化
より安全性の高いハッシュ化を適用

ここでは3つ目の方法でRailsのDigest::MD5を使った手順を整理。

手順

パスワードを与える。

password = "pass"

ソルトを準備する。

salt = "SdvLigVDW3iDtHGAYvccBSbDn+jl"

パスワードとソルトを連結した文字列を暗号化する。

Digest::MD5.hexdigest(pass_digest + salt_digest)

この結果、以下のメッセージダイジェストが得られる。

"d1d7bd4a8d1e0a3be09d701db50ec038"

パスワードをpass→sassにしたときのメッセージダイジェストは以下の通り。

"82035cbcc496621133b8773709285313"

モデルへの実装

Railsでモデルを介してデータベースに登録する場合、モデルに暗号化の処理を書く。たとえばUserモデルのpasswordを暗号化する場合の例は以下の通り。

class User < ApplicationRecord
  before_create :encrypt_password
                       
  def encrypt_password
    self.password = User.password_digest(password)
  end

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

class User < ApplicationRecord

before_create :encrypt_password

def encrypt_password

self.password = User.password_digest(password)

end

def self.password_digest(password)

salt = "Qc7XGCLIRTzAG7r3Wo7H7Ui++jr0"

pass_digest = Digest::MD5.hexdigest(password)

salt_digest = Digest::MD5.hexdigest(salt)

Digest::MD5.hexdigest(pass_digest + salt_digest)

end

before_createでコールバックを設定していて、データベースへの書き込み前にencrypt_passwordメソッドが呼ばれる。

これをbefore_saveで呼ぶとデータ更新のときにもパスワードがハッシュ化されてしまうので、データの新規作成のときだけ呼ばれるようbefore_createで呼ばなければんならない。

encrypt_passwordはクラスメソッドのpassword_digestでpasswordをメッセージダイジェストに変換し、その値でpasswordを書き換える。

password_digestメソッドは、パスワードとソルトからメッセージダイジェストを返す。

その結果、データベースへの書き込み時には暗号化されたパスワードが保存される。

Rails – flash

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

概要

flashはFlashHashクラスのインスタンスで、エラーなどのメッセージを遷移後の画面に表示するときに使う。ハッシュの様に状態キーに対するメッセージを登録するが、リクエストごとにクリアされる(Railsガイド)。

たとえばエラーメッセージの表示に使う手順は以下のとおり。

バリデーションや保存処理などの結果に応じて、flashをセット
- flash[状態キー] = "メッセージ"
リダイレクト後の画面でflashを参照し、状態キーに応じたメッセージを表示

基本動作

前提

たとえば以下の例ではform_withで@userの名前(:name)を入力して、ユーザー名が英数6文字以内であることを要求している。

app/views/flash_test.html.erb

<h1>flashテスト</h1>

<%= form_with model: @user, url: flash_test_process_path, local: true do |f| %>
  <%= f.text_field :name, placeholder: "英数で6文字以内" %>
  <button>送信</button>
<% end %>

<h1>flashテスト</h1>

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

<%= f.text_field :name, placeholder: "英数で6文字以内" %>

<% end %>

モデルのバリデーションで、ユーザー名の長さと構成文字の検証を行う。

ユーザー名は6文字以上
ユーザー名に使える文字は英数字のみ

app/models/user.rb

class User < ApplicationRecord
  validates :name, length: { minimum: 6 }, format: { with: /\A\w+\z/i }
end

class User < ApplicationRecord

validates :name, length: { minimum: 6 }, format: { with: /\A\w+\z/i }

end

flashへの登録

通常はバリデーションはデータベースへの書き込み時に行われるが、ここではvalid?でバリデーションを強制している。

検証の結果が適正であればflashに:successのキーで「適正な入力」、不適正であれば:dangerのキーで「不適正な入力」のメッセージを登録している。

その後、結果によらず最初のページを表示するアクションへリダイレクト(リダイレクト先のページは任意だが、ここでは最初のページにしている)。

app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def flash_test
    @user = User.new
  end

  def flash_test_process
    user = User.new(params.require(:user).permit(:name))
    if user.valid?
      flash[:success] = "適正な入力"
      redirect_to flash_test_path and return
    else
      flash[:danger] = "不適正な入力"
      redirect_to flash_test_path and return
    end
  end

class PagesController < ApplicationController

def flash_test

@user = User.new

end

def flash_test_process

user = User.new(params.require(:user).permit(:name))

if user.valid?

flash[:success] = "適正な入力"

redirect_to flash_test_path and return

else

flash[:danger] = "不適正な入力"

redirect_to flash_test_path and return

end

flashに対応した表示

リダイレクト／レンダリング後のビューに、flashの結果に応じた表示を行うコードを追加する。

app/views/flash_test.html.erb

<h1>flashテスト</h1>

<%= form_with model: @user, url: flash_test_process_path, local: true do |f| %>
  <%= f.text_field :name, placeholder: "英数で6文字以内" %>
  <button>送信</button>
<% end %>

<% flash.each do |type, message| %>
  <p class="notice notice-<%= type %>"><%= message %></p>
<% end %>

<h1>flashテスト</h1>

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

<%= f.text_field :name, placeholder: "英数で6文字以内" %>

<% end %>

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

<% end %>

flashのキー・値のセットの分だけeachで取り出して表示するが、その際にキーに応じたクラスを設定している。

そのレンダリング結果を確認してみよう。

遷移前のページでの入力が適正だった場合は、コントローラーでflashに:successをキーとして「適正な入力」のメッセージ文字列が渡される。このとき、キーの内容(:success)を使ってクラス設定が行われる。

  <p class="notice notice-success">適正な入力</p>

1	<p class="notice notice-success">適正な入力</p>

一方、入力が不適正だった場合にはコントローラーでflashに:dangerをキーとするメッセージが渡され、それがレンダリングされた結果は以下のとおり。

  <p class="notice notice-danger">不適正な入力</p>

1	<p class="notice notice-danger">不適正な入力</p>

この結果、遷移前のページでのバリデーション結果に応じた表示が行われる。

スタイルの変化

動的なクラス設定に対するスタイル

先のコードで、入力の結果に応じてメッセージのクラスが動的に設定された。スタイルファイルでそれらのクラスに応じたスタイルを定義することで、結果に応じた変化をつけることができる。

以下のスタイルファイルは、flashの結果セットされたクラスに応じてメッセージの色に変化をつけている。

// for flash_test

.notice {
  border: 2px solid;
  text-align: center;
  &-success {
    background-color: #9df;
    color: #00f;
  }
  &-danger {
    background-color: #fcc;
    color: #f00;
  }
}

// for flash_test

.notice {

border: 2px solid;

text-align: center;

&-success {

background-color: #9df;

color: #00f;

}

&-danger {

background-color: #fcc;

color: #f00;

}

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

flashによる通知全般のスタイル設定
→.notice
flashのキー(:success/:danger)に応じてセットされたクラスによって色を変化させる
→&_success/&_danger

＜実行結果＞

以下はバリデーションエラーの場合で、適正な場合は「適正な入力」と表示される。

ダイアログ表示

flashの内容を遷移後のページの表示前にダイアログで表示する場合、application.html.erbのhead部分にJavaScriptを記述。

app/views/layouts/application.html.erb

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

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script>
      <% if flash.present? %>
        alert("<%= flash.to_hash.values.join('\n') %>");
      <% end %>
    </script>
  </head>

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

<!DOCTYPE html>

<html>

<head>

<title>Testapp</title>

<%= csrf_meta_tags %>

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

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

<% if flash.present? %>

alert("<%= flash.to_hash.values.join('\n') %>");

<% end %>

</script>

</head>

<body>

<%= yield %>

</body>

</html>

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

headブロックでダイアログ表示のスクリプトを定義
flashがセットされている場合にダイアログを表示
ダイアログのメッセージに、flashのすべてのメッセージを改行で結合して表示

＜実行結果＞

:dangerのときだけダイアログを表示する場合は以下の様になる。

    <script>
      <% if flash.present? && flash.to_hash.has_key?('danger') %>
        alert("<%= flash[:danger] %>");
      <% end %>
    </script>

<% if flash.present? && flash.to_hash.has_key?('danger') %>

alert("<%= flash[:danger] %>");

<% end %>

</script>

has_key?を使うため、to_hashでflashをハッシュに変換している。ただし、to_hashでハッシュに変換するとキーがシンボルではなく文字列になる点に注意。

一定時間後に表示を消す

flashに応じて表示されたメッセージを一定時間後に消すには、JavaScriptを使う。application.html.erbに以下の様に書く。

app/views/layouts/application.html.erb

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

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'https://code.jquery.com/jquery-3.5.0.min.js' %>
    <script>
      <% if flash.present? && flash.to_hash.has_key?('danger') %>
        alert("<%= flash[:danger] %>");
      <% end %>
    </script>
  </head>

  <body>
    <% flash.each do |type, message| %>
      <p class="notice notice-<%= type %>"><%= message %></p>
    <% end %>

    <%= yield %>

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

<!DOCTYPE html>

<html>

<head>

<title>Testapp</title>

<%= csrf_meta_tags %>

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

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

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

<% if flash.present? && flash.to_hash.has_key?('danger') %>

alert("<%= flash[:danger] %>");

<% end %>

</script>

</head>

<body>

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

<% end %>

<%= yield %>

window.setTimeout(() => {

$(".notice").slideUp();

}, 1500);

</script>

</body>

</html>

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

必要に応じてJQueryを読み込む
bodyの最初(最上部)にメッセージ表示エリアを定義
一定時間表示させた後にスライドアップで表示を消すスクリプトを定義
1. $(".notice").slideUp()でメッセージをスライドアップ消去
2. 1.5秒後に消去を実行するよう、window.setTimeoutにコールバックとして渡す

なお、:successと:dangerによって表示の色を変える設定をCSSに書いている。

.flash_test {
  h1 {
    font-size: 24px;
    margin: 10px;
  }

  input {
    margin: 10px;
  }

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

.flash_test {

h1 {

font-size: 24px;

margin: 10px;

}

input {

margin: 10px;

}

.notice {

margin-bottom: 10px;

padding: 5px;

border: 2px solid;

text-align: center;

font-size: 20px;

&_success {

background-color: #9df;

color: #00f;

}

&_danger {

background-color: #fcc;

color: #f00;

}

＜実行結果＞

以下、danger/successに応じた表示で、1.5秒後にこれらの表示がスライドアップされて消去される。

Rails – バリデーション

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

概要

Railsでモデルを介してフォーム入力を扱う場合、入力データが適正かどうか条件を設定して検証できる。

検証の条件はvalidatesをモデルクラス内で定義し、saveやvalid?などのメソッド実行に際して検証が行われる。これらのメソッドは検証結果の適正／不適正によってtrue/falseの戻り値を持つので、その結果に応じてflashによるエラー表示などの処理を行うことができる。

バリデーションの記述

モデルクラスの定義で以下を記述。

validates:(:対象カラム , 検証内容1, 検証内容2, ...)

たとえばUserモデルのnameの存在と長さを検証する場合は以下のように書く。

app/models/user.rb

class User < ApplicationRecord
  validates :name, presence: true, length: { maximum: 10 }
end

class User < ApplicationRecord

validates :name, presence: true, length: { maximum: 10 }

end

バリデーションの確認

通常、モデル内にvalidatesを書くと、モデルのsave実行前に検証が行われる。

モデルインスタンスのvalid?を実行すると、その時点でモデルの内容が妥当かどうかが検証され、検証結果が妥当であればtrue、妥当でなければfalseが返される。

また、妥当でない場合のエラーの内容は、モデルのerrors.messagesで確認できる。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  def sign_up_process
    user = User.new(user_params)
    p user.name
    p user.valid?
    p user.errors.messages
  end

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

class UsersController < ApplicationController

.....

def sign_up_process

user = User.new(user_params)

p user.name

p user.valid?

p user.errors.messages

end

private

def user_params

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

end

たとえば検証結果が妥当な場合のRailsサーバーのログは、

"0123456789"
true
{}

"0123456789"

true

{}

何も入力しなかった場合は、

""
false
{:name=>["can't be blank"]}

false

{:name=>["can't be blank"]}

長さが制限を超えた場合は、

"01234567890"
false
{:name=>["is too long (maximum is 10 characters)"]}

"01234567890"

false

{:name=>["is too long (maximum is 10 characters)"]}

バリデーションの種類

presence～存在確認

＜書式＞

presence: true

入力内容がnil、空文字列、スペースでないことを検証する。全角スペースも検証の対象となる。内部でblank?メソッドを使っている。

＜実行例＞

モデル

  validates :name, presence: true

1	validates :name, presence: true

errors.messages

{:name=>["can't be blank"]}

1	{:name=>["can't be blank"]}

逆にnil、空文字列、スペースのみであることを検証する場合はabscenceを使う。

length～長さの検証

＜書式＞

length: { 制限オプション: 制限値 }

長さを検証する。制限オプションと制限値のパターンは以下の通り。

:minimum：長さの最小値
- 例：{ minimum: 10 }
:maximum：長さの最大値
- 例：{ maximum: 20 }
:is：長さがこの値に一致しなければならない
- 例：{ is: 10 }
:in/:witnin：長さの範囲
- 例：{ in: 10..20 }

＜実行例＞

モデル

validates :name, length: { is: 6 }
validates :password, length: { in: 6..20 }

1 2	validates :name, length: { is: 6 } validates :password, length: { in: 6..20 }

errors.messages

{:name=>["is too short (minimum is 6 characters)"]}
{:name=>["is the wrong length (should be 6 characters)"]}

1 2	{:name=>["is too short (minimum is 6 characters)"]} {:name=>["is the wrong length (should be 6 characters)"]}

numericality～数値の検証

＜書式＞

numericality: true

numericality: { 制限オプション: 制限値 }

入力内容が数値形式であることを検証する。デフォルトでは整数・実数にマッチするが、制限オプションでいろいろなパターンを検証できる。

:only_integer：整数
:even/:odd：偶数／奇数
:equal_to：与えた数に等しい
:other_than：与えた数以外
:greater_than：与えた数より大きい
:greater_than_or_equal_to：与えた数より大きい
:less_than：与えた数より大きい
:less_than_or_equal_to：与えた数より大きい

＜実行例＞

class User < ApplicationRecord
  validates :number, numericality: { greater_than: 3.5 }
end

class User < ApplicationRecord

validates :number, numericality: { greater_than: 3.5 }

end

errors.messages

{:name=>["must be greater than 3.5"]}

1	{:name=>["must be greater than 3.5"]}

format～パターンマッチング

＜書式＞

format: { with: 正規表現 }

入力のパターンが正規表現にマッチするかどうか検証する。正規表現を定数に設定しておく書き方が使われる。

＜実行例＞

モデル

class User < ApplicationRecord
  VALID_EMAIL_REGEX = /\A([\w+-]+.?[\w+-]+)+@([\w-]+.?[\w-]+)+.[\w-]+\z/i
  validates :email, format: { with: VALID_EMAIL_REGEX }
end

class User < ApplicationRecord

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

validates :email, format: { with: VALID_EMAIL_REGEX }

end

errors.messages

"a..a@aa.aa"
{:email=>["is invalid"]}

1 2	"a..a@aa.aa" {:email=>["is invalid"]}

検証結果のメッセージ

メッセージの構造

検証結果のエラーが1つの場合の、バリデーションのメッセージを確認する。

class User < ApplicationRecord
  validates :name, length: { maximum: 20 }
end

class User < ApplicationRecord

validates :name, length: { maximum: 20 }

end

入力値とメッセージの内容は以下の通り。

"012345678901234567890"
false
{:name=>["is too long (maximum is 20 characters)"]}
"is too long (maximum is 20 characters)"

"012345678901234567890"

false

{:name=>["is too long (maximum is 20 characters)"]}

"is too long (maximum is 20 characters)"

この出力は以下のコードで表示させている。出力結果から、errors.messagesの内容は以下のようであることがわかる。

errors.messagesはハッシュ
ハッシュのキーはモデル名
ハッシュの値は配列で、配列の要素はメッセージ文

これを踏まえて、以下のコードの10行目のように取り出している。

class UsersController < ApplicationController

  .....

  def sign_up_process
    user = User.new(user_params)
    p user.name
    p user.valid?
    p user.errors.messages
    p user.errors.messages[:name][0]
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

user = User.new(user_params)

p user.name

p user.valid?

p user.errors.messages

p user.errors.messages[:name][0]

end

.....

end

複数の検証を設定した場合

1つの要素に複数の検証を設定し、それらがエラーになった場合を考える。

class User < ApplicationRecord
  validates :name, length: { maximum: 20 }, format: { with: /\A[a-z0-9]\z/i }
end

class User < ApplicationRecord

validates :name, length: { maximum: 20 }, format: { with: /\A[a-z0-9]\z/i }

end

errors.messagesがハッシュなので、eachでキーと値を取り出し、その値が配列なのでeachで各メッセージを取り出す。

class UsersController < ApplicationController

  .....

  def sign_up_process
    user = User.new(user_params)
    p user.name
    p user.email
    p user.password
    p user.valid?
    p user.errors.messages
    user.errors.messages.each do |key, messages|
      p key
      messages.each do |message|
        p message
      end
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

user = User.new(user_params)

p user.name

p user.email

p user.password

p user.valid?

p user.errors.messages

user.errors.messages.each do |key, messages|

p key

messages.each do |message|

p message

end

.....

end

表示結果は以下の通り。

"012345678901234567890"
false
{:name=>["is too long (maximum is 20 characters)", "is invalid"]}
:name
"is too long (maximum is 20 characters)"
"is invalid"

"012345678901234567890"

false

{:name=>["is too long (maximum is 20 characters)", "is invalid"]}

:name

"is too long (maximum is 20 characters)"

"is invalid"

message:～メッセージの定義

メッセージは英語の文字列だが、message:で検証項目ごとのメッセージを定義できる。たとえば上の例で長さとパターンのそれぞれにメッセージを追加した例。

class User < ApplicationRecord
  validates :name, length: { maximum: 20, message: "名前は20文字以内にしてください" }, \
                   format: { with: /\A[a-z0-9]\z/i, message: "名前に使える文字は英数字のみです"}
end

class User < ApplicationRecord

validates :name, length: { maximum: 20, message: "名前は20文字以内にしてください" }, \

format: { with: /\A[a-z0-9]\z/i, message: "名前に使える文字は英数字のみです"}

end

実行結果は以下の通り。

"012345678901234567890"
false
{:name=>["名前は20文字以内にしてください", "名前に使える文字は英数字のみです"]}
:name
"名前は20文字以内にしてください"
"名前に使える文字は英数字のみです"

"012345678901234567890"

false

{:name=>["名前は20文字以内にしてください", "名前に使える文字は英数字のみです"]}

:name

"名前は20文字以内にしてください"

"名前に使える文字は英数字のみです"

presenceやuniquenessの場合は以下のように定義する。

presence: { message: "未入力の場合のメッセージ" }

uniqueness: { message: "重複したの場合のメッセージ" }

Rails – モデルによるフォームデータの取得

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

前提

例題として以下のようなモデルを使う。

モデル名はuser
モデルのフィールドはnameとpasswordの2つで、いずれもstring

手順

モデルインスタンスとフォームの準備

フォームを呼び出すコントローラーで、モデルインスタンスを準備する。

app/controllers/pages_controller

class PagesController < ApplicationController
  def params_check
    @user = User.new
  end
end

class PagesController < ApplicationController

def params_check

@user = User.new

end

フォーム側で、そのインスタンスを引数にとる。

app/views/pages/params_check.html.erb

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

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

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

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

<%= form.submit("登録") %>

<% end %>

フォームデータの取得

パラメーター取得の考え方

モデルを介してフォームデータを取得する考え方は以下の通り。

paramsのrequireメソッドでモデルを指定してパラメーターを取得
Railsの慣習として、上記の処理をprivateメソッドとする

params.require

以下のメソッドチェーンで、パラメーターのハッシュが得られる。

params.require(モデル名).permit(キー1, キー2, ...)

今回の例の場合は以下の通り。

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

メソッド化

コントローラーにprivateで以下のメソッドを定義。

class PagesController < ApplicationController

  .....

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

class PagesController < ApplicationController

.....

private

def user_params

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

end

データの利用

パラメーターが必要な場合はこのメソッドを呼び出す。たとえばフォーム入力データをコンソールに出力する例として、

  def params_check_process
    p user_params[:name]
    p user_params[:password]
  end

def params_check_process

p user_params[:name]

p user_params[:password]

end

以下はフォーム入力のコンソールへの出力例。

"yamada"
"passyamada"

1 2	"yamada" "passyamada"

permitの意味～ストロングパラメーター

モデルに寄らないフォーム入力の場合paramsは単純なハッシュだが、モデルを介した場合は、paramsにモデル名をキーとするパラメーターのハッシュが含まれる。

今回の例の場合のparamsの内容は以下の通り。

<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"tTwbM.....", "user"=>{"name"=>"yamada", "password"=>"passyamada"}, "commit"=>"登録", "controller"=>"pages", "action"=>"params_check_process"} permitted: false>

1	<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"tTwbM.....", "user"=>{"name"=>"yamada", "password"=>"passyamada"}, "commit"=>"登録", "controller"=>"pages", "action"=>"params_check_process"} permitted: false>

params[:user]をキーとしたハッシュを取り出すと、フォーム入力が得られる。

<ActionController::Parameters {"name"=>"yamada", "password"=>"passyamada"} permitted: false>

1	<ActionController::Parameters {"name"=>"yamada", "password"=>"passyamada"} permitted: false>

そして、この結果はrequire.permitを通した結果とほぼ同じ。

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

1	<ActionController::Parameters {"name"=>"yamada", "password"=>"passyamada"} permitted: true>

ただし最後のpermittedが異なり、paramsの場合はfalseでpermit.requireを通した場合はtrueになっている。

permitted: falseの場合はデータを一度に保存するマスアサインメントが使用できない。これを許すと、悪意のあるユーザーが不適切なデータを追加して送信し、データベースに書き込まれてしまう恐れがある。

require.permitによる場合はあらかじめ取り扱い可能なデータが限定されているので、permitted: trueに設定され、マスアサインメントが可能となる。

Rails – 掲示板 – フォーム入力の確認

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

概要

仮作成したページで、フォームからPOSTされたデータが取得できることを確認する。

掲示板の第1段階へ

アクションの追加

フォームからのデータはPOSTメソッドで送られてくるので、これを受信してサインアップ／サインインの処理を行うアクションをコントローラーに追加する。

class UsersController < ApplicationController
  def sign_up
    render layout: 'application_signed_out'
  end

  def sign_in
    render layout: 'application_signed_out'
  end

  def sign_up_process
  end

  def sign_in_process
  end
end

class UsersController < ApplicationController

def sign_up

render layout: 'application_signed_out'

end

def sign_in

render layout: 'application_signed_out'

end

def sign_up_process

end

def sign_in_process

end

ルーティング

追加したアクションに対するルーティングを設定する。

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

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

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

Rails.application.routes.draw do

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

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

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

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

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

end

ルーティングの設定状況を確認すると、POSTメソッドに対するPrefixが設定されていない。

[vagrant@vagrant ex_bbs]$ rails routes
 Prefix Verb URI Pattern        Controller#Action
    top GET  /top(.:format)     pages#top
sign_up GET  /sign_up(.:format) users#sign_up
sign_in GET  /sign_in(.:format) users#sign_in
        POST /sign_up(.:format) users#sign_up_process
        POST /sign_in(.:format) users#sign_in_process

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

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

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

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

POST /sign_up(.:format) users#sign_up_process

POST /sign_in(.:format) users#sign_in_process

そこで、ルーティングにas:でPrefixを設定する。

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

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

その結果POSTメソッドのルーティングにもPrefixが設定され、Prefix_pathの定型句でのURL指定が可能になった。

[vagrant@vagrant ex_bbs]$ rails routes
         Prefix Verb URI Pattern        Controller#Action
            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_up_process POST /sign_up(.:format) users#sign_up_process
sign_in_process POST /sign_in(.:format) users#sign_in_process

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

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_up_process POST /sign_up(.:format) users#sign_up_process

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

フォームのURL指定

サインアップ／サインインを扱うアクションへのルーティングが決まったので、フォームのアクションを設定する。

sign_up.html.erbについては以下の通り。

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

1	<%= form_with url: sign_up_process_path, local: true do \|f\| %>

sign_in.html.erbの方は以下の通り。

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

1	<%= form_with url: sign_in_path, local: true do \|f\| %>

アクションのURL指定では、Prefix_pathの定型句を使っている。

パラメーターの確認

この状態でRailsサーバーを起動させて、サインアップページで何も入力せずにサインアップボタンを押す。

その処理結果をRailsサーバーのコンソールで確認すると、:name、:email、:passwordが送られてきているのがわかる(:passwprdはフィルタリングされている)。

Started POST "/sign_up" for 10.0.2.2 at 2021-03-20 08:55:09 +0900
Processing by UsersController#sign_up_process as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"p7+MDA.....", "name"=>"", "email"=>"", "password"=>"[FILTERED]"}

Started POST "/sign_up" for 10.0.2.2 at 2021-03-20 08:55:09 +0900

Processing by UsersController#sign_up_process as HTML

Parameters: {"utf8"=>"✓", "authenticity_token"=>"p7+MDA.....", "name"=>"", "email"=>"", "password"=>"[FILTERED]"}

これらの値はparams変数でキーを指定して参照することができる。PHPの$_POSTと同じように、paramsもグローバル・スコープを持っている。

  def sign_up_process
    puts params[:name]
    puts params[:email]
    puts params[:password]
  end

def sign_up_process

puts params[:name]

puts params[:email]

puts params[:password]

end

ここでフォームに何か入力してサインアップボタンを押すと、以下のようにコンソールに入力内容が表示される。

params[:password]を直接表示させるとパスワードが平文で見られることに注意。

Started POST "/sign_up" for 10.0.2.2 at 2021-03-20 08:56:41 +0900
Processing by UsersController#sign_up_process as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"p7+MDAkzfG7WRDlYjW/FG2JqLXwq76eCULpRZO1MO07rjaH6zEJeiQDeQPgdMS4wZO+Y6hGXsFHgiaoXih2FlA==", "name"=>"悟空", "email"=>"monkey@taustation.jp", "password"=>"[FILTERED]"}
悟空
monkey@taustation.jp
monkey

Started POST "/sign_up" for 10.0.2.2 at 2021-03-20 08:56:41 +0900

Processing by UsersController#sign_up_process as HTML

Parameters: {"utf8"=>"✓", "authenticity_token"=>"p7+MDAkzfG7WRDlYjW/FG2JqLXwq76eCULpRZO1MO07rjaH6zEJeiQDeQPgdMS4wZO+Y6hGXsFHgiaoXih2FlA==", "name"=>"悟空", "email"=>"monkey@taustation.jp", "password"=>"[FILTERED]"}

悟空

monkey@taustation.jp

monkey

Rails – 掲示板 – 仮ページの作成

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

概要

コントローラーとビューの準備によって、プロジェクトの枠組みをつくった。

ここでは、仮置きのページとして3つのhtml.erbファイルの内容を書いていき、それらにスタイルを定義する。

掲示板の第1段階へ

ルーティング

第1段階では、それぞれのページのURLを指定して表示させる設定。

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

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

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

Rails.application.routes.draw do

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

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

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

end

ルーティングの状況を確認する。後でヘルパーのリンク先URLを指定するとき、Prefix_pathという定型句で指定することができる。

[vagrant@vagrant ex_bbs]$ rails routes
 Prefix Verb URI Pattern        Controller#Action
    top GET  /top(.:format)     pages#top
sign_up GET  /sign_up(.:format) users#sign_up
sign_in GET  /sign_in(.:format) users#sign_in

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

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

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

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

共通レイアウト

サインアウト中ページ用

application_signed_out.html.erb

サインアウト中のページには特にヘッダーメニューなどを表示しないので、デフォルトで生成されたapplication.html.erbの内容通り。

ただしこちらを利用するのがsign_in、sign_upの2つのアクションだけと限定的なので、ファイル名を変更する。

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

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

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

</head>

<body>

<%= yield %>

</body>

</html>

users_controller.rb

デフォルトのapplication.html.erb以外を共通レイアウトとして使う場合は、コントローラーから明示的に呼び出す。

class UsersController < ApplicationController
  def sign_up
    render layout: 'application_signed_out'
  end

  def sign_in
    render layout: 'application_signed_out'
  end
end

class UsersController < ApplicationController

def sign_up

render layout: 'application_signed_out'

end

def sign_in

render layout: 'application_signed_out'

end

サインイン済みページ用

application.html.erb

サイン済みユーザーに対しては、第1段階ではtopページのみ表示させるが、今後いろいろな機能をつけていく。こちらの方が主になるので、ファイル名をデフォルトのapplication.html.erbとし、ヘッダーメニューを加える。

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>ExBbs</title>

<%= csrf_meta_tags %>

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

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

</head>

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

header.scss

ヘッダーに対するスタイル定義(HTML/CSSのヘッダーメニューを参照)。

:root {
  --header-height: 50px;
  --foreground-color: #00008b;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #cff;

  .header_logo {
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--header-height) * 2);
    height: var(--header-height);
  }

  h1 {
    font-size: 32px;
    color: var(--foreground-color);
  }

  .header_menu {
    display: flex;
    list-style: none;

    & li {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0px 10px 5px;
      width: 100px;
      font-size: 14px;
      color: var(--foreground-color);

      & a {
        text-decoration: none;
        color: var(--foreground-color);
      }

      & + li {
        border-left: 1px solid var(--foreground-color);
      }
    }
  }
}

:root {

--header-height: 50px;

--foreground-color: #00008b;

}

header {

display: flex;

align-items: center;

justify-content: space-between;

height: var(--header-height);

background-color: #cff;

.header_logo {

background-repeat: no-repeat;

background-size: contain;

width: calc(var(--header-height) * 2);

height: var(--header-height);

}

h1 {

font-size: 32px;

color: var(--foreground-color);

}

.header_menu {

display: flex;

list-style: none;

& li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 100px;

font-size: 14px;

color: var(--foreground-color);

& a {

text-decoration: none;

color: var(--foreground-color);

}

& + li {

border-left: 1px solid var(--foreground-color);

}

個別ページ

topページ

top.html

第1段階では、仮置きとしてユーザー一覧を表示させる。

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

  <div class="user_list">
    <table>
      <tr>
        <td>悟空</td>
        <td>mmonkey@taustation.jp</td>
      </tr>
      <tr>
        <td>八戒</td>
        <td>pig@taustation.jp</td>
      </tr>
      <tr>
        <td>沙悟浄</td>
        <td>kappa@taustation.jp</td>
      </tr>
    </table>
  </div>
</main>

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

<table>

<tr>

<td>mmonkey@taustation.jp</td>

</tr>

<tr>

<td>pig@taustation.jp</td>

</tr>

<tr>

<td>kappa@taustation.jp</td>

</tr>

</table>

</div>

</main>

pages.scss

topページに対するスタイル定義は、topアクションを持つpagesコントローラーと同名のscssに書く。

メイン部分の領域が縦一杯に広がるようにするために、htmlとbodyのheightに100%を指定している。

html {
  height: 100%;
}

body {
  background: #eee;
  height: 100%;
}

.top_page {
  --text-color: #666;
  width: 75%;
  height: 100%;
  margin: auto;
  background-color: #f8f8ff;
  text-align: center;

  h2 {
    padding: 20px 0;
    font-size: 24px;
    color: var(--text-color);
  }

  .user_list {
    display: inline-block;
    color: #666;

    td {
      border: 1px solid var(--text-color);
      align: center;
      padding: 10px;
      color: var(--text-color);
    }
  }
}

html {

height: 100%;

}

body {

background: #eee;

height: 100%;

}

.top_page {

--text-color: #666;

width: 75%;

height: 100%;

margin: auto;

background-color: #f8f8ff;

text-align: center;

h2 {

padding: 20px 0;

font-size: 24px;

color: var(--text-color);

}

.user_list {

display: inline-block;

color: #666;

td {

border: 1px solid var(--text-color);

align: center;

padding: 10px;

color: var(--text-color);

}

sign_upページ・sign_inページ

sign_up.html.erb

sign_upとsign_inは殆ど似たような内容・デザイン。モデルなしのform_withヘルパーを使い、URLは仮置きしている。

また、link_toヘルパーのリンク先に、ルーティングのPrefixを使った名前でURLを指定している。

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

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

<%= form_with url: "#", local: true do |f| %>

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

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

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

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

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

<% end %>

</div>

sign_in.thml.erb

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

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

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

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

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

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

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

<% end %>

</div>

users.scss

sign_upとsign_inの2つのビューのスタイルは、それらのアクションを持つusersコントローラーと同名のusers.scssに書く。

body {
  background-color: #fffff0;
}

.sign_in_page, .sign_up_page {
  overflow-y: hidden;
  // サインイン／サインアップページの表題スタイル
  h1 {
    width: 300px;
    margin: 50px auto 0 auto;
    font-size: 32px;
    text-align: center;
    color: var(--title-color)
  }
  // フォームブロックのスタイル
  .sign_in_form, .sign_up_form {
    margin: 40px auto 0 auto;
    width: 400px;
    padding: 20px;
    background-color: #cdf;
    // フォームブロックの表題スタイル
    h2 {
      margin-bottom: 20px;
      font-family: fantasy;
      font-size: 20px;
      text-align: center;
      color: var(--title-color)
    }
    // フォーム本体
    form {
      padding: 12px;
      background-color: #8cf;
      // フォーム内のinput要素
      input {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 32px;
        margin-bottom: 12px;
        padding: 3px 10px;
        font-size: 16px;
      }
      // フォーム内の送信ボタン
      button {
        display: block;
        width: 50%;
        margin-left: auto;
        margin-bottom: 15px;
        padding: 5px;
        background-color: #ccc;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        color: var(--title-color);
        &:hover {
          background-color: #d0d0d0;
        }
      }
      // リンク関連の色
      p {
        text-align: center;
        color: var(--title-color)
      }
    }
  }
}

body {

background-color: #fffff0;

}

.sign_in_page, .sign_up_page {

overflow-y: hidden;

// サインイン／サインアップページの表題スタイル

h1 {

width: 300px;

margin: 50px auto 0 auto;

font-size: 32px;

text-align: center;

color: var(--title-color)

}

// フォームブロックのスタイル

.sign_in_form, .sign_up_form {

margin: 40px auto 0 auto;

width: 400px;

padding: 20px;

background-color: #cdf;

// フォームブロックの表題スタイル

h2 {

margin-bottom: 20px;

font-family: fantasy;

font-size: 20px;

text-align: center;

color: var(--title-color)

}

// フォーム本体

form {

padding: 12px;

background-color: #8cf;

// フォーム内のinput要素

input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

// フォーム内の送信ボタン

button {

display: block;

width: 50%;

margin-left: auto;

margin-bottom: 15px;

padding: 5px;

background-color: #ccc;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

color: var(--title-color);

&:hover {

background-color: #d0d0d0;

}

// リンク関連の色

p {

text-align: center;

color: var(--title-color)

}

リセットCSS

reset.scss

リセットCSSにはEric Meyer’s “Reset CSS” 2.0を使った。

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
.....

html5doctor.com Reset Stylesheet

v1.6.1

Last Updated: 2010-09-17

Author: Richard Clark - http://richclarkdesign.com

Twitter: @rich_clark

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

.....

スタイルの読み込み

application.html.erb、application_signed_out.html.erbのいずれも、最初にapplication.cssを呼び出している。その中で必要なSCSSファイルを読み込んでいる。

書くスタイルファイルが読み込まれるのは1度だけなので、最初にreset.scssを読み込み、その後require_treeでそれ以外のすべてのファイルを読み込む。

 *= require reset.scss
 *= require_tree .

1 2	= require reset.scss = require_tree .

Rails – 掲示板 – 第1段階

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

概要

掲示板を例にして、ユーザーの登録、サインインを実装する。サインイン済みの場合のみトップページを表示するアクセス制限も実装する。

掲示板の全体ページへ

要件

画面遷移

アクセス時に/topにルーティング
- サインイン状態でなければ/sign_inにルーティング
- 仮表示として登録されているユーザー名、メールアドレス一覧を表示
- ログアウト
  →/sign_in
/sign_inで
- リンクをクリックして/sign_upへ
- ユーザー名、パスワードを入力
  →/top
/sign_upで
- リンクをクリックして/sign_inへ
- ユーザー名、メールアドレス、パスワードを入力してユーザー登録
  →/top

データベース

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

カラム名	型(MySQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
name	VARCHAR(255)	string	ユーザー名
email	VARCHAR(255)	string	メールアドレス
pasword	VARCHAR(255)	string	パスワード
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

検討

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

pages_controller.rb

トップページなどサイト全体に関するページのコントローラー
top：サインインユーザーに対するサイトのトップページをレンダリング

users_controller.rb

ユーザーの登録、サインインなどユーザー管理を担うコントローラー
sign_in：サインインページをレンダリング
sign_up：サインアップページをレンダリング
sign_in_process：サインインフォームのPOSTに対するサインイン処理
sign_up_process：サインアップフォームのPOSTに対するサインアップ処理

ビューファイル

pages

top.html.erb：サインインユーザーが最初に見るページ
- BBSの記事などが載ることになるが、この時点では登録済みのユーザーリストを表示する
- ヘッダーメニューを表示する

users

sign_up.html.erb：未登録ユーザーのためのサインアップページ
sign_in.html.erb：登録ユーザーのためのサインインページ
これらのページにはヘッダーメニューは表示されない

共通のビューファイル

共通のビューファイルはlayoutディレクトリーに置く。サインインの有無に対応したレイアウトを分け、デフォルトでない場合はコントローラーから明示的に呼び出して使い分ける。

application.html.erb：サインイン済みのユーザーに対しては登録やサインアウトといった処理のメニューをヘッダーに表示する
application_signed_out.html.erb：サインインしていないユーザーに対してはヘッダーメニュを表示しない

スタイルファイル

CSSのスタイルをリセットするファイルを準備。

reset.css

ヘッダーメニューのスタイルファイルを独立して準備。

header.scss

各ビューのスタイルファイルはコントローラー単位のファイル。

pages.scss
users.scss

実装手順

Rails – 画像ファイルの配置とパス指定

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

概要

Railsで画像ファイルを配置するのは以下の2箇所

app/assets/images: 開発側で準備するロゴやアイコンなど
public: ユーザーのアップロード画像など

それぞれの下にディレクトリーを作って、その中の画像ファイルをimg要素、div要素の背景画像で読み込む場合のパス指定について整理した。

ビューファイル&img要素の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

<img src="パス">

1	<img src="パス">

`example/ファイル`	読み込めない
`/example/ファイル`	読み込めない
`./example/ファイル`	読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

<img src='example/image_public.jpg'>
<img src='/example/image_public.jpg'>
<img src='./example/image_public.jpg'>

`example/ファイル`	読み込める
`/example/ファイル`	読み込める
`./example/ファイル`	読み込める

ビューファイル&img_tagの場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

<%= image_tag 'example/image_assets.jpg' %>

1	<%= image_tag 'example/image_assets.jpg' %>

`example/ファイル`	読み込める
`/example/ファイル`	読み込めない
`./example/ファイル`	NoMethodError

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

<%= image_tag '/example/image_public.jpg' %>

1	<%= image_tag '/example/image_public.jpg' %>

`example/ファイル`	Sprockets::Rails::Helper::AssetNotFound
`/example/ファイル`	読み込める
`./example/ファイル`	NoMethodError

SCSS&div要素の背景画像の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

background-image: image-url('example/image_assets.jpg');

1	background-image: image-url('example/image_assets.jpg');

`example/ファイル`	読み込める
`/example/ファイル`	読み込めない
`./example/ファイル`	読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

background-image: url('/example/image_public.jpg');

1	background-image: url('/example/image_public.jpg');

`example/ファイル`	読み込めない
`/example/ファイル`	読み込める
`./example/ファイル`	読み込めない

まとめ

img要素はpublicの画像は読めるがassetsの画像は読めないので、img_tagヘルパーを使う方がよい。画像をimg_tagで配置する場合も、div要素の背景画像とする場合も、ファイルのパス指定は以下の通り。

	パス指定
`app/assets/images`	`サブディレクトリ―/ファイル`
`public`	`/サブディレクトリ―/ファイル`

参考

確認に使ったアプリケーションファイル

pages_controller.rb

class PagesController < ApplicationController
  def image_location
  end
end

class PagesController < ApplicationController

def image_location

end

image_location.html.erb

<h1>image_location</h1>

<h2>img</h2>

<h3>app/assets/image/example</h3>

<div class="image_wrapper">
  <img src='example/image_assets.jpg'>
  <!--
  "example/image_public.jpg"
  "/example/image_public.jpg"
  "./example/image_public.jpg"
  全て読み込めない
  -->
</div>

<h3>public/example</h3>

<div class="image_wrapper">
  <img src='example/image_public.jpg'>
  <!--
  "example/image_public.jpg"
  "/example/image_public.jpg"
  "./example/image_public.jpg"
  全て読み込める
  -->
</div>

<h2>img_tag</h2>

<h3>app/assets/image/example</h3>

<div class="image_wrapper">
  <%= image_tag 'example/image_assets.jpg' %>
  <!--
  'example/image_assets.jpg'は読み込める
  '/example/image_assets.jpg'は画像を読み込めない
  './example/image_assets.jpg'はNoMethodError
  -->
</div>

<h3>public/example</h3>

<div class="image_wrapper">
  <%= image_tag '/example/image_public.jpg' %>
  <!--
  "example/image_public.jpg"はSprockets::Rails::Helper::AssetNotFound
  "/example/image_public.jpg"は読み込める
  "./example/image_public.jpg"はNoMethodError
  -->
</div>

<h2>SCSS</h2>

<h3>app/assets/image/example</h3>

<div class="image_div_assets"></div>

<h3>public/example</h3>

<div class="image_div_public"></div>

<h1>image_location</h1>

<h3>app/assets/image/example</h3>

<!--

"example/image_public.jpg"

"/example/image_public.jpg"

"./example/image_public.jpg"

全て読み込めない

-->

</div>

<h3>public/example</h3>

<!--

"example/image_public.jpg"

"/example/image_public.jpg"

"./example/image_public.jpg"

全て読み込める

-->

</div>

<h3>app/assets/image/example</h3>

<%= image_tag 'example/image_assets.jpg' %>

<!--

'example/image_assets.jpg'は読み込める

'/example/image_assets.jpg'は画像を読み込めない

'./example/image_assets.jpg'はNoMethodError

-->

</div>

<h3>public/example</h3>

<%= image_tag '/example/image_public.jpg' %>

<!--

"example/image_public.jpg"はSprockets::Rails::Helper::AssetNotFound

"/example/image_public.jpg"は読み込める

"./example/image_public.jpg"はNoMethodError

-->

</div>

<h3>app/assets/image/example</h3>

<h3>public/example</h3>

pages.scss

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.image_wrapper {
  width: 600px;
  height: 400px;
  text-align: center;
  background-color: #ccc;
}

.image_div_assets {
  background-image: image-url('example/image_assets.jpg');
  // 'example/image_assets.jpg'は読み込める
  // '/example/image_assets.jpg'は読み込めない
  // './example/image_assets.jpg'は読み込めない
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 600px;
  height: 400px;
  background-color: #ccc;
}

.image_div_public {
  background-image: url('/example/image_public.jpg');
  // 'example/image_public.jpg'は読み込めない
  // '/example/image_public.jpg'は読み込める
  // './example/image_public.jpg'は読み込ない
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 600px;
  height: 400px;
  background-color: #ccc;
}

img {

max-width: 100%;

max-height: 100%;

width: auto;

height: auto;

}

.image_wrapper {

width: 600px;

height: 400px;

text-align: center;

background-color: #ccc;

}

.image_div_assets {

// 'example/image_assets.jpg'は読み込める

// '/example/image_assets.jpg'は読み込めない

// './example/image_assets.jpg'は読み込めない

background-repeat: no-repeat;

background-size: contain;

background-position: center center;

width: 600px;

height: 400px;

background-color: #ccc;

}

.image_div_public {

// 'example/image_public.jpg'は読み込めない

// '/example/image_public.jpg'は読み込める

// './example/image_public.jpg'は読み込ない

background-repeat: no-repeat;

background-size: contain;

background-position: center center;

width: 600px;

height: 400px;

background-color: #ccc;

}