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