概要
掲示板を例にして、ユーザーの登録、サインインを実装する。サインイン済みの場合のみトップページを表示するアクセス制限も実装する。
要件
画面遷移
- アクセス時に
/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 | ユーザー名 |
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
実装手順
- “プロジェクトの生成と確認“に従ってプロジェクト(ex_bbs)を生成する
- コントローラー・ビューを準備する
- 仮ページを作成する
- フォームの入力を確認する
- サインアップ機能を実装する
- ユーザー認証機能を実装する
- セッション機能を実装する
- アクセス制御機能を実装する
- トップ画面の仮表示