Chapter 13

3-3. ユーザー関連画面の作成

Masuyama

2022.10.15に更新

このチャプターの目次

ユーザー関連画面の作成

ユーザー関連画面の作成

devise では、最初からそれっぽい画面もある程度用意してくれています。

開発用サーバを bin/dev コマンドで起動し、 /users/sing_up 等にアクセスするとすぐに画面が表示されます。

これでも使えることには使えるのですが、どうしても見た目がよくないためカスタマイズしましょう。
最初はユーザー登録画面をカスタマイズします。

view ファイルを生成

デフォルトで使える(この時点で画面に表示される) view ファイルは gem に組み込まれて編集できません。

devise 固有の view を編集するため、 rails g devise:views コマンドで各種 view ファイルを一旦生成します。

以下の通りコマンドを実行してください。

$ bundle exec rails g devise:views
invoke Devise::Generators::SharedViewsGenerator
create app/views/devise/shared
create app/views/devise/shared/\_error_messages.html.erb
create app/views/devise/shared/\_links.html.erb
invoke form_for
create app/views/devise/confirmations
create app/views/devise/confirmations/new.html.erb
create app/views/devise/passwords
create app/views/devise/passwords/edit.html.erb
create app/views/devise/passwords/new.html.erb
create app/views/devise/registrations
create app/views/devise/registrations/edit.html.erb
create app/views/devise/registrations/new.html.erb
create app/views/devise/sessions
create app/views/devise/sessions/new.html.erb
create app/views/devise/unlocks
create app/views/devise/unlocks/new.html.erb
invoke erb
create app/views/devise/mailer
create app/views/devise/mailer/confirmation_instructions.html.erb
create app/views/devise/mailer/email_changed.html.erb
create app/views/devise/mailer/password_change.html.erb
create app/views/devise/mailer/reset_password_instructions.html.erb
create app/views/devise/mailer/unlock_instructions.html.erb

このうち、取り急ぎ TechLog で使用するのは以下の 3 ファイルです。

app/views/devise/registrations/new.html.erb (ユーザー登録ページ)
app/views/devise/sessions/new.html.erb (ログインページ)
app/views/devise/shared/_error_messages.html.erb (エラーメッセージのパーシャル)

他の view ファイルは devise でのパスワード再設定などで使われるものですが、本カリキュラムでは割愛しているため使わないものです。

使わない view ファイルを残しておくことは混乱の元になるため、削除しておくことをおすすめします。
※ただし、今後自分で学習するために他の画面で使う予定がある場合は、他の view ファイルを残しておいても問題ありません。

画面確認

開発用サーバを bin/dev コマンドで起動し、ユーザー登録画面とログイン画面の初期状態を確認しておきます。

$ bin/dev
10:02:24 web.1  | started with pid 8025
10:02:24 css.1  | started with pid 8026
10:02:26 web.1  | => Booting Puma
10:02:26 web.1  | => Rails 7.0.3 application starting in development
10:02:26 web.1  | => Run `bin/rails server --help` for more startup options
10:02:27 web.1  | Puma starting in single mode...
10:02:27 web.1  | * Puma version: 5.6.4 (ruby 3.0.4-p208) ("Birdie's Version")
10:02:27 web.1  | *  Min threads: 5
10:02:27 web.1  | *  Max threads: 5
10:02:27 web.1  | *  Environment: development
10:02:27 web.1  | *          PID: 8025
10:02:27 web.1  | * Listening on http://127.0.0.1:3000
10:02:27 web.1  | * Listening on http://[::1]:3000
10:02:27 web.1  | Use Ctrl-C to stop
10:02:27 css.1  |
10:02:27 css.1  | Rebuilding...
10:02:27 css.1  | Done in 187ms.

ユーザー登録画面

ユーザー登録画面のパスは /users/sing_up ですので、ブラウザで http://localhost:3000/users/sign_up にアクセスします。

初期状態ではどこが見出しで、どこがボタンかが分かりづらく、また当然ながら英語となっているため以降のカリキュラムで調整します。

ログイン画面

ユーザー登録画面のパスは /users/sing_in ですので、ブラウザで http://localhost:3000/users/sign_in にアクセスします。

こちらもユーザー登録画面と同じく良い見た目とは言えないため、
よりモダンな見た目のログイン画面となるようにカスタマイズしていきます。

変更をコミット

ここまでの変更 (view 作成)を一旦コミットしておきましょう。

$ git add .
$ git commit -m "deviseのviewファイル(編集用)を生成"
$ git push

宿題

devise の view ファイル

今回は devise の view ファイルを生成し、見た目をカスタマイズできるようにしてから変更を加えていきました。

viwe と同じく controller についても、同じようにカスタマイズしたい時は一度生成する必要があります。
また、TechLog では使わないため消した view ファイルについても、当然ながら本来は役割があります。

これら、カスタマイズするために生成するファイルごとの役割を一度理解し、全体像を掴んでおくと devise の理解が進みますので以下の記事を一読いただくのがおすすめです。

Rails6.1+devise の controller と view をカスタマイズできる状態にする