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;

}

Rails – スタイル設定

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

概要

Railsのプロジェクトにおけるスタイルシートの場所、スタイル設定について整理する。

デフォルトの状態

プロジェクト生成直後、app/assets/stylesheets/ディレクトリーにapplication.cssが生成され、以下の2行が記述されている。これらの行はディレクティブと呼ばれ、それぞれの意味については後述。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この段階でRailsの”Yay! You’re on Rails!”のページのソースを見ると、HTMLに直接styleタグが書かれている。

コントローラーとスタイルファイルの関係

以下のように2つのアクションを含むコントローラーを3つ生成する(出力は省略)。

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape
[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots
[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

[vagrant@vagrant dummy_app]$ rails generate controller fruits orange grape

[vagrant@vagrant dummy_app]$ rails generate controller vesitables beets carrots

[vagrant@vagrant dummy_app]$ rails generate controller meats pork beef

その結果、コントローラー・ビューファイルとともに、app/assets/stylesheetsディレクトリーに3つのscssファイルが生成される。

[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/
application.css  fruits.scss  meats.scss  vesitables.scss

1 2	[vagrant@vagrant dummy_app]$ ls app/assets/stylesheets/ application.css fruits.scss meats.scss vesitables.scss

これら3つのscssファイルはコメントのみの空の内容。

// Place all the styles related to the fruits controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the fruits controller here.

// They will automatically be included in application.css.

// You can use Sass (SCSS) here: http://sass-lang.com/

ここでorangeビューファイルを表示させてみる。

localhost:3000/fruits/orange

表示されたページのソースのうちスタイルシートの読み込みに関する行を抜き出すと以下のとおり。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />

以下のことがわかる

applicationのほか、新たに生成されたfruits, vesitables, meatsに関するスタイルシートが全て読み込まれる
スタイルシートはcss拡張子を持つ
ファイル名の本体は、コントローラー名.self-ダイジェストの形式
URLクエリーパラメーターを持つ(body=1)
スタイルが読み込まれる順番は、application.cssが最後で、その前に他のファイルが辞書順で読み込まれる

これらのファイルは元のscssファイルからcssにコンパイルされた結果で、ファイルの内容のダイジェストが元のファイル名に付加されている。

この場合、application.cssと3つのscss全てのスタイルが適用される。たとえばいずれかのcss/scssファイルに* { color: red; }と記述するとfruits/orangeページの文字の色が赤くなる。

require_selfとapplication.css

無指定でもapplication.cssは読み込まれる

application.cssの以下の2行を削除し、何も指定されていない状態にする。

 *= require_tree .
 *= require_self

1 2	= require_tree . = require_self

この状態でorangeページを表示させてソースを見ると、application.cssの読み込みだけ残っている。

<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-34004ed1a95199bac37fb11583f3acbb08d69e689d5c114362d79071d479a29f.css?body=1" data-turbolinks-track="reload" />

require_selfの意味？

application.cssの2行の記述のうち*= require_tree .の行を削除し、ページを表示させてソースを見てみる。

<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

1	<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

*= require_selfの行に対応してapplication.cssのファイルが読み込まれているが、そもそもなにも指定しなくてもこの行は生成されていた。

次に*= require_selfの方を削除し*= require_tree .を残した結果を見てみる。無指定の時と同じく、ここでもapplication.cssが読み込まれている。

<link rel="stylesheet" media="all" href="/assets/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

読み込み順の制御は可能

require_treeとrequire_selfの順番を逆にしてみる

 *= require_self
 *= require_tree .

1 2	= require_self = require_tree .

そうすると、application.cssが最初に読み込まれるようになった。

<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/meats.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />

ディレクティブ

require_tree

stylesheetsディレクtリーの構成を以下の様に変更する。

d:stylesheets
- f:meats.scss
- d:crops
  - f:vesitables.scss
  - d:fruits
    - f:fruits.scss

この状態でapplication.cssが初期設定のとき、ページを表示させてもスタイルファイルの読み込みは変わらない。

require_tree .はカレントディレクトリー以下のすべてのディレクトリをたどりながらすべてのファイルをCSSに含める。

次にapplication.cssの内容を以下の様に変更する。

 *= require_tree ./crops

1	*= require_tree ./crops

この結果、指定したcropsディレクトリー以下のファイルが再帰的に読み込まれる(application.cssは読み込まれている)。

 <link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require_directory

require_directoryは、指定したディレクトリー下のファイルのみをCSSに含める。サブディレクトリー以下は無視される、

 *= require_directory ./crops

1	*= require_directory ./crops

この結果は、cropsディレクトリー下のvesitables.cssファイルのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/vesitables.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

require ファイル

requireディレクティブにファイル名を指定して、特定のファイルのみを読み込める。

 *= require ./crops/fruits/fruits.css

1	*= require ./crops/fruits/fruits.css

上記の指定で、HTMLファイルにはfruits.cssのみが読み込まれる(application.cssは読み込まれている)。

<link rel="stylesheet" media="all" href="/assets/crops/fruits/fruits.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-18157c666aa5f54338350dab22122fa53c8af29b5f90ea4c5accdda9cc63283f.css?body=1" data-turbolinks-track="reload" />

Rails – 基礎的なルーティング

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

概要

GETやPOSTなどのリクエストがあったときconfig/routes.rbの内容に従って各コードにルーティングされる。

このルーティングファイルの書き方を整理する。

前提

以下のような構成のアプリケーションを考える。

コントローラー：pages_controller.rb
- アクション：top
- ビュー：top.html.erb
コントローラー：users
- アクション：sign_up、sign_in
- ビュー：sign_up.html.erb、sign_in.html.erb

デフォルトのroutes.rb

設定と動作

ルーティングファイルはconfig/routes.rbにある。コントローラー生成直後のファイルの内容は以下のとおり。

Rails.application.routes.draw do
  get 'users/sign_in'

  get 'users/sign_up'

  get 'pages/top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

Rails.application.routes.draw do

get 'users/sign_in'

get 'users/sign_up'

get 'pages/top'

# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

end

初期状態では、GETメソッドで各ビューファイルがリクエストされたとき、ディレクトリー構成に従ってファイルを探すようルーティングされる。

たとえばブラウザーでhttp://localhost:3000/pages/topと入力するとpagesディレクトリー下のtop.html.erbが表示される。

このページに他のページからヘルパーでリンクを張る場合は以下の様に書く。

<%= link_to 'トップ', '/pages/top %>

ルーティング

ルーティングの設定状態はrails routesコマンドで確認できる。

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

[vagrant@vagrant ex_bbs]$ rails routes

Prefix Verb URI Pattern Controller#Action

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

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

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

Prefixの列はリンクのエイリアスに関する表示で、ヘルパー中でプレフィックスに'_path'を付けた名前でリンク先を表せる。

たとえばtop.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', users_sign_in_path) %>

まとめ

ルーティング設定で各アクションを呼ぶためのURLを設定できる
URLでルーティングする場合は文字列とする
Prefixと_pathを組み合わせたエイリアスでもルーティングができ、その場合はコロンなしで書く

ルーティングの設定変更

設定と動作

コントローラー生成時のルーティングを変更して、それぞれのページがアプリケーションルートから直接呼び出せるようにする(たとえばlocalhost:3000/topなど)。

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

3つのルーティングとも同じ方法で指定している。

メソッド 'URL', to: 'コントローラー#アクション'

これでそれぞれのURL指定’/top’などに簡略化され、GETリクエストに対して対応するアクションが実行される。

この場合、トップページに以下のようなURL指定のリンクを追加すると、クリック時にサインインページに遷移する。

<%= link_to('サインイン', '/sign_in') %>

ルーティング

ルーティングの一覧は以下のとおりで、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

[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

Prefixも変更されているので、top.html.erb中に以下の行を追加するとリンクが表示され、クリックするとsign_in.html.erbページに遷移する。

<%= link_to('サインイン', sign_in_path) %>￥

まとめ

ルーティングの, to: 'controller#action'によって、設定したURLから指定したアクションにルーティングできる
カンマ、toキー(to:)、'コントローラー#アクション'の文字列

ルーティングの名前

設定と動作

routes.rbのsign_inの行に, as:を追加して以下の様に変更する。

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

この場合、リンク先としてsign_in_page_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_page 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_page GET /sign_in(.:format) users#sign_in

この場合、linkt_toから呼び出す名前はsign_in_page_pathになり、従前のsign_in_pathを使うとエラーになる。

つまり、as:で指定された内容で元のPrefixがオーバーライドされ、以後はその内容の名前かURLで指定しなければならない。

まとめ

ルーティングの名前を', as: :name'で設定できる
設定はカンマ、asキー(as:)、名前シンボル
名前を設定すると、Prefixがそれに置き換えられる