Ruby – ランダム文字列

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

概要

予め指定した文字群を使って、任意の長さのランダム文字列を作る。

＜手順＞

文字群を文字列として準備
→chars = "ABCDE"
配列を準備
→array = Array.new(10)
ランダム文字列を生成
→(array.map! {|e| chars[rand(chars.length)]}).join

考え方

ランダム文字列に使う文字群を文字列として準備する。

chars = "ABCDE"

ランダム文字列長と同じ要素数の配列を準備する。

array = Array.new(10)

array = Array.new(10)
p array

# [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil]

array = Array.new(10)

p array

# [nil, nil, nil, nil, nil, nil, nil, nil, nil, nil]

配列をランダムに選んだ文字で埋める。

array.map! {|e| chars[rand(chars.length)]}

array.map! {|e| chars[rand(chars.length)]}
p array

# ["B", "B", "D", "A", "C", "B", "E", "E", "E", "D"]

array.map! {|e| chars[rand(chars.length)]}

p array

# ["B", "B", "D", "A", "C", "B", "E", "E", "E", "D"]

配列を文字列に変換する。

p array.join

p array.join

# "BBDACBEEED"

p array.join

# "BBDACBEEED"

実装例

数字と英大文字・小文字を使って20文字のランダム文字列を生成。

chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join
array = Array.new(20)
str = (array.map! {|e| chars[rand(chars.length)]}).join
p str

# "3JRIjPZPOcsHRLotcAye"

chars = ("0".."9").to_a.join + ("A".."Z").to_a.join + ("a".."z").to_a.join

array = Array.new(20)

str = (array.map! {|e| chars[rand(chars.length)]}).join

p str

# "3JRIjPZPOcsHRLotcAye"

Ruby – 文字列・配列・範囲オブジェクトの相互変換

2021-03-26 / tau / 1件のコメント

概要

1文字単位を対象として、文字列・配列・範囲オブジェクトの相互変換を整理する。

配列→文字列

array.join

array = ["A", "B", "C", "D", "E", "F", "G"]
p array.join()

# "ABCDEFG"

array = ["A", "B", "C", "D", "E", "F", "G"]

p array.join()

# "ABCDEFG"

文字列→配列

string.chars
string.split("")

string = "ABCDEFG"
p string.chars
p string.split("")

# ["A", "B", "C", "D", "E", "F", "G"]
# ["A", "B", "C", "D", "E", "F", "G"]

string = "ABCDEFG"

p string.chars

p string.split("")

# ["A", "B", "C", "D", "E", "F", "G"]

範囲オブジェクト

配列への変換

range.to_a

range = ("A".."G")
p range.to_a

# ["A", "B", "C", "D", "E", "F", "G"]

range = ("A".."G")

p range.to_a

# ["A", "B", "C", "D", "E", "F", "G"]

文字列への変換

range.to_a.join

range = ("A".."G")
p range.to_a.join

# "ABCDEFG"

range = ("A".."G")

p range.to_a.join

# "ABCDEFG"

Rails – 掲示板 – 仮のプロフィールページ

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

概要

第1段階でユーザーの登録(サインアップ)や認証(サインイン／サインアウト)ができるようになった。これからはサインインしたユーザーに応じた表示や操作を実装していく。

最初に、サインインしているユーザーのプロフィール画像表示を実装する。

ここでは、サインイン中のユーザーがメニューの「プロフィール」をクリックしたときにプロフィールページへ遷移させる。現段階では、サインイン中のユーザー名を表示し、ダミー画像とプレースホルダーのコメントを表示させる。

掲示板の第2段階へ

枠組み

全体の枠組み

全体の枠組み設定は以下のとおりとする。

プロフィールページのURLは"ドメイン/profile/ユーザーID"
アクションはusers#show(個々のユーザーの情報を表示するためshowを選択)
ビューファイルはapp/views/users/show.html.erb

ユーザーに応じた反応

基本の流れは以下の通り。

ルーティングのURIパターンでユーザーIDを付加
遷移ページのリンク先として、ルーティングの名前でサインイン中のユーザーIDを指定
コントローラーでIDを使ってデータベースからユーザーオブジェクトを取り出す
ビューにおいて、そのユーザーオブジェクトを使う

実装

ルーティング

まず、プロフィールページへのURLがリクエストされたときのルーティングを設定する。

routes.rb

Rails.application.routes.draw do

  .....

  get '/profile/(:id)', to: 'users#show', as: :profile
end

Rails.application.routes.draw do

.....

get '/profile/(:id)', to: 'users#show', as: :profile

end

この書き方がユーザーに応じたページへのルーティングの書き方。

ユーザーを指定するため、データベース中のusers.idの値をURLで指定
- (:id)の括弧がなくても問題なさそう
プロフィールは各ユーザー固有の情報を表示するため、showアクション
Prefixを指定する
- :idを付加した場合、デフォルトのPrefixは設定されないため

指定されたユーザーの取得

ルーティング先のアクションで、:idを使ってデータベースからユーザーオブジェクトを取り出す。オブジェクトがビューでも使えるよう、インスタンス変数に格納する。

また、サインインしていない状態でshowアクションを読んだ場合にアクセス制限をかけるよう、before_actionを設定する。ただしサインアップ／サインインに関するアクションはexcept:で除外しておく。

users_controller.rb

class UsersController < ApplicationController
  before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

  .....

  def show
    @user = User.find(params[:id])
  end

  .....

end

class UsersController < ApplicationController

before_action :authorize, except: [:sign_up, :sign_in, :sign_up_process, :sign_in_process]

.....

def show

@user = User.find(params[:id])

end

.....

end

findはモデルのクラスメソッドで、モデルのIDを指定してデータベースからデータを取得する。引数に指定できるのはIDの値のみ。

ユーザーオブジェクトを使った表示

アクションでセットされたユーザーオブジェクトを使って、ユーザーに応じたページ表示をするためのHTMLを書く。

users/show.html.erb

<div class="user_profile">
  <h1><%= @user.name %>さんのプロフィール</h1>
  <div class="contents">
    <%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>
    <p class="comment">
      ここにプロフィールコメントを表示
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
      ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
    </p>
  </div>
</div>

<h1><%= @user.name %>さんのプロフィール</h1>

<%= image_tag "https://dummyimage.com/200x200/0b0e4d/23f534.png&text=Profile+Image" %>

ここにプロフィールコメントを表示

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

</p>

</div>

ここでは@userのnameを使ってサインイン中のユーザーの名前を表示させている。画像やコメントはダミーだが、サインイン中のユーザーに応じたページが表示されることが確認できる。

なお4行目で、プロフィール画像のプレースホルダーとしてCDNによるダミー画像を利用している。

サインインユーザーによるページの呼び出し

サインイン中のユーザーがメニューの「プロフィール」をクリックしたときに、そのユーザーのプロフィールが表示されるよう、link_toヘルパーを設定する。

application.html.erb

<!DOCTYPE html>
<html>

  .....

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

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

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

ルーティングで設定したPrefixを使ったパス名に(ユーザーID)を指定している。

link_to("...", profile_path(user_in_session))

(user_in_session)とユーザーオブジェクトそのものを指定しているが、これはRailsでの省略法で、これで(user_in_session.id)と同じことになる。

パス名ではなく、URIを文字列で指定する方法もある。その場合はルーティングで指定した"/profile/(:id)"の形になるように文字列で指定する。ただしlink_toだと<%= ... %>が入れ子にできないためかエラーになるので、aタグを使うことになる。

<a href="/profile/<%= user_in_session.id %>">プロフィール</a>

スタイル設定

プロフィールページのスタイルを設定する。

users.scss

.....

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      background-color: #f8f8f8;
    }
  }
}

.....

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

background-color: #f8f8f8;

}

トップページへのリンク

プロフィール画面からトップページに戻るリンクをヘッダーメニューに設定する。application.html.erbに更に変更を加える。

application.html.erb

<!DOCTYPE html>
<html>

  .....

  <body>
    <header>
      <%= link_to(top_path) do %>
        <div class="header_logo"></div>
      <% end %>
      <h1>EX-BBS</h1>
      <p><%= user_in_session.name %>さん</p>
      <ul class="header_menu">
        <li><%= link_to("トップ", top_path) %></li>
        <li><%= link_to("投稿する", "#") %></li>
        <li><%= link_to("プロフィール", profile_path(user_in_session)) %></li>
        <li><%= link_to("サインアウト", sign_out_path) %></li>
      </ul>
    </header>

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

<!DOCTYPE html>

<html>

.....

<body>

<%= link_to(top_path) do %>

<% end %>

</ul>

</header>

<%= yield %>

</body>

</html>

8～10行目は、ヘッダーのロゴにトップページへのリンクをセットしている。他の要素にリンクを設定するには、link_to(...) doとendのブロックにする。

14行目では、メニューに「トップ」という項目を追加し、トップページへのリンクを設定している。

表示結果

追補～サイズの固定とスクロール表示

その後、コメント表示を以下の様に変更した。

p要素の幅と高さを固定
overflow-y: autoを追加し、コメントが長くなった場合にスクロールバーを表示

// プロフィールページのスタイル
.user_profile {
  h1 {
    margin: 40px auto;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
  .contents {
    display: flex;
    margin: 0 auto;
    width: 600px;
    .comment {
      align-self: center;
      margin-left: 20px;
      padding: 10px;
      width: 300px;
      height: 100px;
      overflow-y: auto;
      background-color: #f8f8f8;
    }
  }
}

// プロフィールページのスタイル

.user_profile {

h1 {

margin: 40px auto;

font-size: 20px;

text-align: center;

font-weight: bold;

}

.contents {

display: flex;

margin: 0 auto;

width: 600px;

.comment {

align-self: center;

margin-left: 20px;

padding: 10px;

width: 300px;

height: 100px;

overflow-y: auto;

background-color: #f8f8f8;

}

Tips – CDN – アイコン・ダミー画像など

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

アイコン

Font Awesome

概要

Font Awesomeのアイコンを利用するための手順。

メールアドレスでアカウントを取得する
アイコンを利用するためのキット番号を取得
- アカウント取得後は”Manage Kitのリンク先で確認できる
アイコンを使うページのheadセクションに、Font AwesomeのJSを読み込むスクリプトを書く
Font Awesomeのページで使いたいアイコンのタグ表現をコピーする
アイコンを利用する場所にコピーしたタグを張り付ける
必要なら、タグのスタイルを設定するクラスやマウスオーバー時のタイトルなどを指定する

JSの記述

まずhead部に以下のスクリプトを記述する。

<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

1	<script src="https://kit.fontawesome.com/[Kit Number].js" crossorigin="anonymous"></script>

タグの記述

アイコンを表示する場所にアイコンを表示するタグを記述。Font Awesomeのサイトでコピーできる。

<i class="fas fa-sign-out-alt"></i>

1	<i class="fas fa-sign-out-alt"></i>

スタイル設定

サイズや色などのスタイルをクラスで設定する場合、Font Awesome自体がclassで設定されているので以下の様になる。

HTML

<i class="fa fa-sign-out-alt header_icon"></i>

1	<i class="fa fa-sign-out-alt header_icon"></i>

CSS

.header_icon {
  font-size: 30px;
  color: #0af;
}

.header_icon {

font-size: 30px;

color: #0af;

}

タイトル設定

マウスオーバーで文字列を表示させる場合、以下の様にtitle属性を追加する。

<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

1	<i class="fa fa-sign-out-alt header_icon" title="サインアウト"></i>

ダミー画像

Dynamic Dummy Image Generatorは自由なサイズと色の画像ファイルをリアルタイムで取り込める。

サイトで画像のサイズ、背景色、前景色、ファイルタイプを指定すると、それを織り込んだURLが表示される
そのURLをimgタグで指定すると、ページレンダリング時に必要なファイルがダウンロードされて表示される

以下は指定の例で、サイトに表示されたURLをそのままコピー&ペーストしたもの。

<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

1	<img src="https://dummyimage.com/300x200/272ef5/eaf520.png">

また、表示させるテキストも自由に設定できる。

<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

1	<img src="https://dummyimage.com/300x200/0b0e4d/23f534.png&text=自由なテキスト">

Rails – 掲示板 – 第2段階

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

概要

第1段階でユーザーの取り扱い全般を実装したが、第2段階ではコンテンツの投稿に関する機能を実装していく。

ここでは以下を含む。

プロフィールや新規投稿などユーザーに応じたページの表示と操作
CDNによるアイコンの導入
データベースへのカラムの追加
リレーションを持ったテーブル構造の操作
画像のアップロードなどを含む。

掲示板の全体ページへ

要件

画面遷移

サインイン中の画面遷移を対象とする。

/top画面で
- ユーザーの投稿記事(名前、コメント、画面、日付)を表示(上限数付き)
- メニューの「プロフィール」からユーザーごとの/profile画面へ
- メニューの「ユーザー設定」からユーザーごとの/edit画面へ
- メニューの「投稿する」から/post画面へ
/profile画面で
- ユーザーの名前、画像、コメントを表示
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ
/edit画面で
- プロフィール画像、プロフィールコメントを選択・編集
- ボタンを押してプロフィールの内容を変更し、/profile画面へ遷移
/post画面で
- コメントの投稿と画像のアップロードが可能(いずれか一方でも可)
- 記事投稿後、ヘッダーメニューのロゴあるいは「トップ画面」から/top画面へ

データベース

テーブル

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

userテーブルは、プロフィールに表示する以下の項目について新たにカラムに追加。

プロフィール画像のファイル名
コメントテキスト

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
name	VARCHAR(255)	string	ユーザー名
email	VARCHAR(255)	string	メールアドレス
pasword	VARCHAR(255)	string	パスワード
image_file_name	VARCHAR(255)	string	プロフィール画像ファイル名
comment	TEXT	text	プロフィールコメント
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿記事テーブル：posts

postsテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿ユーザーのid(users.idを参照)
投稿記事のメッセージを保存する。なお画像のみの投稿も認めるため、commentはNULLを許容する。

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
user_id	BIGINT	references	usersテーブルのid
message	TEXT	text	メッセージ本文
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

投稿画像テーブル：post_images

post_imagesテーブルは、Railsが設定する項目以外に以下の項目を持つ。

投稿記事のid(posts.idを参照)
画像ファイルのファイル名

カラム名	型(SQL)	型(Rails)	内容
id	BIGINT(AI)	Rails生成
post_id	BIGINT	references	postsテーブルのid
file_name	VARCHAR(255)	string	画像ファイル名
created_at	DATETIME	Rails生成
updated_at	DATETIME	Rails生成

リレーション

テーブル間の関係は以下のとおり。

userは0以上複数のpostを持つ
postは必ず1つのuserに属する
postは0以上複数のpost_imageを持つ
post_imagesは必ず1つのpostに属する

検討

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

/profile/:id -> users#show

ユーザーごとのプロフィールを表示する
プロフィールの内容はプロフィール画像とコメント

users#edit, users#update

ユーザーごとのプロフィールを編集する
編集内容は、画像の登録／差し替え、コメントの記入／変更

posts_controller.rb

投稿記事を取り扱うコントローラー
投稿記事の新規登録、編集、削除
投稿記事は1つのメッセージと0～複数の画像からなる
メッセージがあれば画像はなくてもよく、画像があればメッセージは空でもよい

ビュー

users

users/profile.html.erb：ユーザーのプロフィールページ
users/edit.html.erb：ユーザー設定ページ
posts/new.html.erb：新規投稿ページ
posts/edit.html.erb：投稿内容編集ページ

スタイルファイル

プロフィールページやユーザー設定ページのスタイル定義を追加。

users.css

投稿関係ページのスタイルは以下のファイルに新規に作成

posts.css

実装手順

プロフィール

記事投稿

Rails – 掲示板 – トップ画面の仮表示

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

概要

サインアップ(ユーザー登録)、サインイン・サインアウト(ユーザー認証)、アクセス制御まで実現できたので、トップページを表示したときに登録済みユーザーの情報を表示させるように仮組みする。

掲示板の第1段階へ

コントローラー

pagesコントローラーのtopアクションで、usersテーブルに登録された全ユーザーをオブジェクトとして取り出し、その名前とメールアドレスを一覧として表示させる。

class PagesController < ApplicationController
  before_action :authorize

  def top
    @users = User.all.order("id desc")
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

@users = User.all.order("id desc")

end

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

allメソッド：モデルのクラスメソッドで、テーブルの全データをモデルインスタンスの配列として取り出す
orderメソッド：SQLのORDER BY句を適用する
- 引数は1つの文字列として与え、スペースで区切る
- 1つ目は並べ替えの基準とするカラム
- 2つ目は並べ替えの順序(asc：昇順・デフォルト、desc：降順)
取り出した結果は、ビューで利用可能なようにインスタンス変数に格納する

ビュー

コントローラーで得られた@usersの要素を取り出し、テーブルとして出力。

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

  <div class="user_list">
    <table>
      <% @users.each do |user| %>
        <tr>
          <td><%= user.name %></td>
          <td><%= user.email %></td>
        </tr>
      <% end %>
    </table>
  </div>
</main>

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

<table>

<% @users.each do |user| %>

<tr>

</tr>

<% end %>

</table>

</div>

</main>

表示結果

Rails- 掲示板 – アクセス制御

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

概要

セッション機能を使って、悪性制御を行う。

サインインしていない状態で登録ユーザー用のページ(今回はトップページ)にアクセスした場合、これを表示せずにサインインページにリダイレクトする。

また、サインイン状態でルートにアクセスした場合はトップページを表示する。

掲示板の第1段階へ

セッション中確認機能の追加

以下のメソッドをUserHelpaerモジュールに追加する。

user_in_session?: アクセスしたユーザーがサインイン中かどうか(そのユーザーのセッションが存在するか)判定するメソッド。
authorize: ユーザーがサインイン状態でなければサインインページにリダイレクトするメソッド。コントローラーのフィルターでコールバックとして登録するのに用いる。

module UsersHelper

  .....

  def user_in_session?
    user_in_session.present?
  end

  .....

  def authorize
    redirect_to :sign_in unless user_in_session?
  end
end

module UsersHelper

.....

def user_in_session?

user_in_session.present?

end

.....

def authorize

redirect_to :sign_in unless user_in_session?

end

アクション実行前の認証

UserHelperで定義したauthorizeメソッドを、トップページを含むpageコントローラーのフィルターで設定する。

class PagesController < ApplicationController
  before_action :authorize

  def top
  end
end

class PagesController < ApplicationController

before_action :authorize

def top

end

ここではpageコントローラーのフィルターとして設定し、コントローラーにはtopアクションが含まれている。

アクセスしたユーザーがサインイン状態であればtopビューがレンダリングされ、サインインしていなければauthorizeの内容に従ってsign_inページに遷移する。

たとえばアクションによって振り分けたい場合はフィルターのonlyやexceptで対象となるアクションを制御する。

Rails – 掲示板 – セッション機能

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

概要

ユーザー認証によってサインインしたユーザーの情報を保持し、サインアウト時にそれを破棄する。

サイトのルートはトップページ
- サインインしていなければサインインページへリダイレクト
- サインイン中のユーザーの名前表示
- メニューからサインアウト可能
サインインページ
- サインイン成功後にトップページに遷移
サインアップページ
- サインアップ成功後にトップページに遷移

掲示板の第1段階へ

ヘルパーの追加

ヘルパーモジュールのインクルード

以降、ユーザーセッションの管理に関するメソッドをUserHelperモジュールに書いていく。

プロジェクト内でそれらを共有するため、applicationコントローラーでモジュールをインクルードする。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  # ユーザーセッションの管理に関するメソッドモジュールをインクルード
  include UsersHelper
end

class ApplicationController < ActionController::Base

protect_from_forgery with: :exception

# ユーザーセッションの管理に関するメソッドモジュールをインクルード

include UsersHelper

end

ヘルパーモジュールのメソッド定義

ユーザーのサインイン／サインアウト処理、サインイン中のユーザーを取得するメソッドを、UserHelperモジュールに書く。

セッション中のユーザーをインスタンス変数に保持する。

app/helpers/user_helper.rb

module UsersHelper
  # ユーザーIDをセットしてセッション開始(サインイン)
  def user_session_start(user)
    session[:user_id] = user.id
  end

  # セッション中のユーザーインスタンスを取得
  def user_in_session
    # 初めて取得する場合、インスタンス変数に保存
    if @user_in_session.nil?
      @user_in_session = User.find_by(id: session[:user_id])
    # 既に取得済みなら、インスタンス変数で返す
    else
      @user_in_session
    end
  end

  # セッション終了(サインアウト)
  def user_session_end
    session.delete(:user_id)
    @user_in_session = nil
  end
end

module UsersHelper

# ユーザーIDをセットしてセッション開始(サインイン)

def user_session_start(user)

session[:user_id] = user.id

end

# セッション中のユーザーインスタンスを取得

def user_in_session

# 初めて取得する場合、インスタンス変数に保存

if @user_in_session.nil?

@user_in_session = User.find_by(id: session[:user_id])

# 既に取得済みなら、インスタンス変数で返す

else

@user_in_session

end

# セッション終了(サインアウト)

def user_session_end

session.delete(:user_id)

@user_in_session = nil

end

サインイン・サインアウト処理

サインイン処理

サインインに成功した場合、セッションを開始してユーザIDを登録する。

app/controllers/users_controller.rb

class UsersController < ApplicationController

  .....

  def sign_in_process
    # フォームに値を残すため、入力内容をセットしたモデルインスタンス使う
    @user = User.new(user_params)
    # パスワードをサインアップ時と同じ方法で暗号化
    encrypted_password = User.generate_digest(user_params[:password])
    # アドレスとパスワードが一致する最初のユーザーを取得
    user = User.find_by(email: user_params[:email], password: encrypted_password)
    # サインイン成功の場合、トップページに遷移
    if user
      user_session_start(user)
      redirect_to top_path and return
    # サインイン失敗の場合、サインインページに戻る
    else
      flash.now[:danger] = "サインインできません"
      render :sign_in, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_in_process

# フォームに値を残すため、入力内容をセットしたモデルインスタンス使う

@user = User.new(user_params)

# パスワードをサインアップ時と同じ方法で暗号化

encrypted_password = User.generate_digest(user_params[:password])

# アドレスとパスワードが一致する最初のユーザーを取得

user = User.find_by(email: user_params[:email], password: encrypted_password)

# サインイン成功の場合、トップページに遷移

if user

user_session_start(user)

redirect_to top_path and return

# サインイン失敗の場合、サインインページに戻る

else

flash.now[:danger] = "サインインできません"

render :sign_in, layout: 'application_signed_out' and return

end

.....

end

サインアップ後の処理

サインアップが成功した場合も、サインイン状態と同様にセッション登録してトップページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_up_process
    # フォームに値を残すため@userを使う
    @user = User.new(user_params)
    # 適正にユーザー登録した場合、セッションを開始しトップページに遷移
    if @user.save
      user_session_start(@user)
      flash.now[:success] = "ユーザー登録しました"
      redirect_to top_path and return
    # 不適正な入力の場合、エラーを表示してサインアップページに戻る
    else
      flash.now[:danger] = @user.errors.messages.values.flatten.join("<br>")
      render :sign_up, layout: 'application_signed_out' and return
    end
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_up_process

# フォームに値を残すため@userを使う

@user = User.new(user_params)

# 適正にユーザー登録した場合、セッションを開始しトップページに遷移

if @user.save

user_session_start(@user)

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

redirect_to top_path and return

# 不適正な入力の場合、エラーを表示してサインアップページに戻る

else

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

render :sign_up, layout: 'application_signed_out' and return

end

.....

end

サインアウト処理の追加

サインイン中のユーザーがサインアウトを要求した時のアクションを、usersコントローラーに定義する。

サインアウトにあたってセッションを停止し、サインインページに遷移する。

class UsersController < ApplicationController

  .....

  def sign_out
    user_session_end
    redirect_to :sign_in and return
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_out

user_session_end

redirect_to :sign_in and return

end

.....

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'
  get '/sign_out', to: 'users#sign_out'

  post 'sign_up', to: 'users#sign_up_process', as: :sign_up_process
  post 'sign_in', to: 'users#sign_in_process', as: :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'

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

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

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

end

ビューの修正・サインアウト

ヘッダー部にサインイン中のユーザー名を表示する。

また、ヘッダーメニューのサインアウトのリンク先をsign_outアクションとする。

<!DOCTYPE html>
<html>

  .....

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

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

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>

Rails – フィルター

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

概要

フィルターは、コントローラーのアクションが実行される前や後などに登録した関数が実行されるよう設定する。

特定のアクションのときだけ実行したり、指定したアクション以外のときに実行させるよう指定できる。

フィルターの種類

before_action

before_action :コールバック

アクションの実行前に、指定したコールバックを実行するよう設定する。

after_action

after_action :コールバック

アクションの実行後に、指定したコールバックを実行するよう設定する。

around_action

around_action :コールバック

アクションの実行中に、指定したコールバックを実行するよう設定する。

コールバック中にアクションの実行をyieldするような場合に使うらしい。

only/except

コールバックを実行するアクションを限定したり(only)、除外したり(except)する。

before_action :コールバック, only: [...], except: [...]

only/exceptの指定は、コールバックのシンボルをカンマで区切って並べる。

[:コールバック1, :コールバック2, ...]

Rails – 掲示板 – ユーザー認証機能

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

概要

サインアップしたユーザーが、メールアドレスとパスワードでサインインし、サインアウトする機能を実装する。

セッションによるアクセス制限などの管理は後に実装し、ここではユーザー認証とページ遷移だけにとどめる。

掲示板の第1段階へ

サインイン機能

サインイン処理アクション

サインインが要求されたとき、sign_inアクションからサインインのビューがレンダリングされる。ビューのフォームとの間でUserモデルを介してデータをやりとりするので、アクションでUserモデルのインスタンスを生成しておく。

class UsersController < ApplicationController

  .....

  def sign_in
    @user = User.new
    render layout: 'application_signed_out'
  end

  .....

end

class UsersController < ApplicationController

.....

def sign_in

@user = User.new

render layout: 'application_signed_out'

end

.....

end

フォームでのモデルの設定

サインインのビュー、sign_in.html.erbのform_withヘルパーで、コントローラーで生成されたUserモデルのインスタンスを指定する。

app/views/users/sign_in.html.erb

<div class="sign_in_page">
  <h1>EX-BBS</h1>
  <div class="sign_in_form">
    <h2>サインインページ</h2>
    <%= form_with model: @user, 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 model: @user, 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_controllerのsign_in_processアクションにPOSTされる(ルーティングは「フォームの入力を確認する」で設定した)。

users_controllerに、以下のsign_in_processメソッドを追加する。

class UsersController < ApplicationController
  def sign_up
  .....

  def sign_in
  .....

  def sign_in_process
    @user = User.new(user_params)
    encrypted_password = User.generate_digest(user_params[:password])
    user = User.find_by(email: user_params[:email], password: encrypted_password)
    if user
      redirect_to top_path and return
    else
      flash.now[:danger] = "サインインできません"
      render :sign_in, layout: 'application_signed_out' and return
    end
  end

  private
  def user_params
    .....
end

class UsersController < ApplicationController

def sign_up

.....

def sign_in

.....

def sign_in_process

@user = User.new(user_params)

encrypted_password = User.generate_digest(user_params[:password])

user = User.find_by(email: user_params[:email], password: encrypted_password)

if user

redirect_to top_path and return

else

flash.now[:danger] = "サインインできません"

render :sign_in, layout: 'application_signed_out' and return

end

private

def user_params

.....

end

処理の流れは以下のとおり。

POSTされたデータをuser_paramsメソッドにより受け取る(user_paramsについてはform_withとモデルの使い方を参照)
user_paramsを使って入力データがセットされたUserインスタンスを生成
ユーザー登録時と同じ方法で暗号化されたパスワード(ダイジェスト)を生成
メールアドレスとパスワードダイジェストで、データベースからユーザーを検索
ユーザーが存在する場合、サインインとしてtopページにリダイレクト
ユーザーが存在しない場合、エラーメッセージをセットして再度サインイン画面をレンダリング(@userに入力データがセットされているので、サインイン画面にメールアドレスが残る)

サインアウト機能

サインインに成功すると、トップ画面に遷移する。

トップ画面を始めサインイン後にアクセス可能な画面は全てヘッダーメニューを持つ。そのメニュー中、サインアウトの項目をサインイン画面へのリンクとする。

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

  <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("サインアウト", sign_in_path) %></li>
      </ul>
    </header>

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

<!DOCTYPE html>

<html>

.....

<body>

</ul>

</header>

<%= yield %>

</body>

</html>