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;

}

Tips – ヘッダーメニュー

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

概要

HTMLのheader要素内に固定メニューを配置する。左端にロゴ画像を置き、メニューは右寄せで配置する例。

HTML/CSS

HTML

ヘッダーにdiv要素によるロゴ画像とulによるメニューを配置し、スタイルはCSSで設定する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ヘッダーメニュー</title>
    <link rel="stylesheet" href="header_menu.css">
  </head>
  <body>
    <header>
      <div class="header_logo"></div>
      <ul class="header_menu">
        <li>新規作成</li>
        <li>編　集</li>
        <li>プロフィール</li>
        <li>ログアウト</li>
      </ul>
    </header>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>ヘッダーメニュー</title>

</head>

<body>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

</body>

</html>

CSS

header内のロゴとメニューブロックをFlex-boxで配置し、左右に寄せている。メニューリストの水平配置にもFlex-boxを使っている。

なおheaderを固定してbodyのみをスクロールさせることもできる。

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

/* スタイルをリセット */
* {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

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

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

.header_menu li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0px 10px 5px;
  width: 90px;
  font-size: 14px;
  color: #c00;
}

.header_menu li + li {
  padding-left: 5px;
  border-left: 1px solid black;
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

/* スタイルをリセット */

* {

margin: 0;

padding: 0;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-repeat: no-repeat;

background-size: contain;

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

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

}

.header_menu li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

}

.header_menu li + li {

padding-left: 5px;

border-left: 1px solid black;

}

最初のブロックでスタイルをリセット。
header要素
- display: flex指定でコンテンツ(ロゴ、メニューブロック)をフロートさせて配置
- justify-contentで2つのコンテンツを左端と右端に寄せる
- 高さを指定
.header_logo
- div要素に背景画像を指定
.header_menu
- Flex-boxによりリストを横並びにしている
.header_menu li
- 最初の3行はリストの中の文字を縦横センタリングする設定
.header_menu li + li
- 隣接セレクターによってリストアイテムの間に境界線を描いている

ロゴのサイズについて

div要素で背景画像のみを表示させるときはwidth/heightを明示的に設定しなければならない
当初はheight: 100%でheaderの高さに合わせ、width: autoで表示されていた
ところがそこで親のheaderにdisplay: flexを設定すると表示が消えてしまった
そこでここでは、グローバルなカスタムプロパティーを使っている

Rails/SCSS

HTML

通常すべてのレンダリング時に使われる共通レイアウト
- app/views/layouts/application.html.erb
これとは別にヘッダーメニューが必要な場合の共通レイアウトファイルを作成
- app/views/layouts/application_with_header.html.erb

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

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

  <header>
    <div class="header_logo"></div>
    <ul class="header_menu">
      <li>新規作成</li>
      <li>編　集</li>
      <li>プロフィール</li>
      <li>ログアウト</li>
    </ul>
  </header>

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

<!DOCTYPE html>

<html>

<head>

<title>Styles</title>

<%= csrf_meta_tags %>

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

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

</head>

<li>プロフィール</li>

<li>ログアウト</li>

</ul>

</header>

<body>

<%= yield %>

</body>

</html>

ヘッダーメニューが必要なアクションのみこのレイアウトを使うため、コントローラーでレイアウトファイルを指定。

class PagesController < ApplicationController
.....
  def header_menu
    render layout: "application_with_header"
  end
.....
end

class PagesController < ApplicationController

.....

def header_menu

render layout: "application_with_header"

end

.....

end

レイアウトファイルが読み込むスタイルシートは標準と同じapplication.css

 *= require layout.scss

1	*= require layout.scss

requireされるlayout.scssで、ヘッダーメニュー用のSCSSを読み込む(ヘッダーメニューがない場合も読み込む)。

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

@import "reset.scss";

@import "header_menu.scss";

@import "pages.scss";

SCSS

以下のSCSSファイルを作成して読み込ませる。リセットCSSは別に読み込んでいる。

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */
:root {
  --header-height: 50px;
}

header {
  display: flex;
  justify-content: space-between;
  height: var(--header-height);
  background-color: #8ef
}

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

.header_menu {
  display: flex;
  list-style: none;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0px 10px 5px;
    width: 90px;
    font-size: 14px;
    color: #c00;
    &+li {
      padding-left: 5px;
      border-left: 1px solid black;
    }
  }
}

/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */

:root {

--header-height: 50px;

}

header {

display: flex;

justify-content: space-between;

height: var(--header-height);

background-color: #8ef

}

.header_logo {

background-repeat: no-repeat;

background-size: contain;

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

height: var(--header-height);

}

.header_menu {

display: flex;

list-style: none;

li {

display: flex;

align-items: center;

justify-content: center;

margin: 10px 0px 10px 5px;

width: 90px;

font-size: 14px;

color: #c00;

&+li {

padding-left: 5px;

border-left: 1px solid black;

}

Tips – フォームのデザイン

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

概要

テキストフィールドや送信ボタンなどを含むフォームのデザインについて
input要素などのコンテンツから組み上げる方法と、flex-boxを使った方法の2つ。
フォーム全体のページ内の位置設定についても含めた

共通事項

元になるHTML

3つのinput要素と1つのbutton要素を含むform要素。form_blockというクラスのdiv要素でラップする。

<body>
  <div class="form_block">
    <h1>Input Form</h1>
    <form action="#" method="post">
      <input type="text" name="user_name" placeholder="ユーザー名">
      <input type="email" name="email" placeholder="メールアドレス">
      <input type="password" name="password" placeholder="パスワード">
      <button>サインアップ</button>
    </form>
  </div>
</body>

<body>

<h1>Input Form</h1>

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

</form>

</div>

</body>

Railsのhtml.erbの場合は以下の様になる。

<div class="form_block">
  <h1>Input Form</h1>
  <%= form_with(url: '#') do |f| %>
    <%= f.text_field(:user_name, placeholder: "ユーザー名") %>
    <%= f.email_field(:user_name, placeholder: "メールアドレス") %>
    <%= f.password_field(:user_name, placeholder: "パスワード") %>
    <button>サインアップ</button>
  <% end %>
</div>

<h1>Input Form</h1>

<%= form_with(url: '#') do |f| %>

<%= f.text_field(:user_name, placeholder: "ユーザー名") %>

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

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

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

<% end %>

</div>

リセットCSS

CSSでは以下で関係要素のスタイルをリセットする。

body, button, div, form, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body, button, div, form, input {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

Railsの場合は別にreset.cssを準備する(Eric Meyer’s “Reset CSS” 2.0)。

body要素

body要素は背景色だけを設定する。

body {
  background-color: #e8e8e8;
}

body {

background-color: #e8e8e8;

}

方法1～要素スタイルの積み上げ

CSS

CSSの内容

CSSの全体は以下のとおり。以下、手順を分解して整理する。

/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  display: block;
  width: 50%;
  margin-top: 10px;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

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

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

form button {

display: block;

width: 50%;

margin-top: 10px;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

div要素で表題(h1)とform要素全体をラップする
幅は400pxに設定
高さ指定をしない(auto)なので、子要素に応じて全体の高さが変わる

.form_block {
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

padding: 20px;

background-color: #cdf;

}

表題

フォームの表題をh1要素で書いている

.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form要素

form要素のパディングと背景色を設定
幅は親要素のdivにフィットし、高さは子要素群に合わせて変わる

form {
  padding: 12px;
  background-color: #8cf;
}

form {

padding: 12px;

background-color: #8cf;

}

input要素

インラインレベル要素のinputをブロックレベル要素に変更
box-sizingをborder-boxに指定
- これを指定しないとinput要素がはみ出てしまう
幅(width)は親要素に合わせる
高さは32px固定
マージン(下)を設定して間隔をあける

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  margin-bottom: 12px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

margin-bottom: 12px;

padding: 3px 10px;

font-size: 16px;

}

button要素

インラインレベル要素のbbuttonをブロックレベル要素に変更
幅は親要素formの50%
margin-left: autoで右寄せ
- 中央に置く場合はmargin-right: autoも加える

form button {
  display: block;
  width: 50%;
  margin-left: auto;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

display: block;

width: 50%;

margin-left: auto;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

フォームの位置調整

もう一度全体をラップしているdiv要素に戻り、bodyに対する位置を指定する
- フォームの左上隅が上端から20%、左端から40%

.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

padding: 20px;

background-color: #cdf;

}

SCSS

RailsなどでSCSSを使う場合の例。

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  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;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

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

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

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;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

方法2～flex-box

CSS

CSSの内容

flex-boxを使ったCSSの全体は以下のとおり。フォーム全体の位置設定は方法1と同じ。

      /* フォームの外枠～フォーム全体の位置調整 */
/* フォームの外枠～フォーム全体の位置調整 */
.form_block {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

/* フォームブロックの表題スタイル */
.form_block h1 {
  font-family: fantasy;
  font-size: 28px;
  text-align: center;
}

form {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 12px;
  background-color: #8cf;
}

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form button {
  align-self: flex-end;
  width: 50%;
  margin-right: 0;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

/* フォームの外枠～フォーム全体の位置調整 */

.form_block {

position: absolute;

top: 20%;

left: 40%;

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

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

.form_block h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

form {

height: 200px;

display: flex;

flex-direction: column;

justify-content: space-around;

padding: 12px;

background-color: #8cf;

}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

form button {

align-self: flex-end;

width: 50%;

margin-right: 0;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

div要素によるラップ

幅は400px
高さはautoとし、子要素のformの髙さに合わせる

.form_block {
  width: 400px;
  height: auto;
  padding: 20px;
  background-color: #cdf;
}

.form_block {

width: 400px;

height: auto;

padding: 20px;

background-color: #cdf;

}

form要素

方法1と違うのは以下の点。

display: flexで子要素へのflex適用を指定
flex-direction: columnで子要素を縦並びに
justify-content: space-aroundで子要素を均等に配置
高さを200pxに固定

form {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 200px;
  padding: 12px;
  background-color: #8cf;
}

form {

display: flex;

flex-direction: column;

justify-content: space-around;

height: 200px;

padding: 12px;

background-color: #8cf;

}

input要素

要素の間隔は自動的に決まるので、方法1で設定していたmragin-bottomを削除している。

form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  padding: 3px 10px;
  font-size: 16px;
}

form input {

display: block;

box-sizing: border-box;

width: 100%;

height: 32px;

padding: 3px 10px;

font-size: 16px;

}

button要素

button要素もマージンを削除している
右寄せにするため、align-self: flex-endを設定
- 中央に置く場合はcenterを指定

form button {
  align-self: flex-end;
  width: 50%;
  padding: 10px;
  background-color: #ccc;
  font-size: 16px;
}

form button {

align-self: flex-end;

width: 50%;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}

SCSS

RailsなどでSCSSを使う場合の例。

.form_standard {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 300px;
  padding: 20px;
  background-color: #cdf;
  /* フォームブロックの表題スタイル */
  h1 {
    font-family: fantasy;
    font-size: 28px;
    text-align: center;
  }
  // フォーム本体
  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;
      padding: 10px;
      background-color: #ccc;
      font-size: 16px;
    }
  }
}

.form_standard {

position: absolute;

top: 20%;

left: 10%;

width: 300px;

padding: 20px;

background-color: #cdf;

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

h1 {

font-family: fantasy;

font-size: 28px;

text-align: center;

}

// フォーム本体

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;

padding: 10px;

background-color: #ccc;

font-size: 16px;

}