【第7章】オンライン教科書サービス作成【ユーザー登録機能】
目的
第1章から第6章までで基本的な機能は作成した。本章ではユーザー管理機能を実装する。
ユーザー管理機能の実装には、devise
というgemを用いる。
Gemfileへの追加
Gemfileの最下部へgemの1種devise
を下記のように追加する。
Gemfile
〜上部分省略〜 gem 'devise'
追加後、ターミナルを立ち上げ、下記コマンドをonline_text
ディレクトリで実施する。
ターミナル
cd online_text
bundle install
Gemfile.lock
に下記記述が追加されていれば成功です。
〜上部分省略〜 devise (4.7.2) 〜下部分省略〜
deviseの設定ファイルを作成
上記でインストールしたdeviseを使用するためには、devise専用のコマンドを利用する必要がある。 ターミナル
cd online_text
rails g devise:install
上記コマンドを実行し、下記ファイルが生成されていれば成功です。
config/initializers/devise.rb
config/locales/devise.en.yml
devise機能を備えたUserモデルの作成
deviseを利用するためには、Userモデルを新しく作成する必要があります。
通常のモデルの生成コマンドとは異なります。
下記のようなdeviseを活用したモデルの作成用コマンドでUserモデルを作成する。
ターミナル
cd online_text
rails g devise user
下記のようにターミナルにファイルが生成されたことが表示されれば成功です。
ルーティングを設定するroutes.rb
には下記のようなdevise_for :users
の記述が自動で追加されます。
config/routes.rb
Rails.application.routes.draw do devise_for :users root to: 'texts#index' resources :texts, only: [:new, :create, :show, :edit, :update, :destroy] end
下記コマンドを実行し、Usersテーブルを作成する。 ターミナル
cd online_text
rails db:migrate
下図のようにUsersテーブルが生成されていれば成功です。
ログイン機能の実装
まずはログインしていない場合のボタンを実装していく。
新規テキスト投稿ボタンは一旦削除し、下記のように実装する。
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>OnlineText</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <header class="header"> <div class="header__title"> <%= link_to "OnlineText", root_path, class: "header__title--text" %> </div> <div class="header__right"> <%= link_to "ログイン", new_user_session_path, class: "header__right--btn" %> <%= link_to "新規登録", new_user_registration_path, class: "header__right--btn" %> </div> </header> <div class="contents"> <%= yield %> </div> </body> </html>
下図のようにログインと新規登録のボタンが画面上部に表示されていれば成功です。
ボタンの表示内容の変更
ログインしている場合には、新規テキスト作成ボタンとログアウトボタンを表示できるように実装する。
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>OnlineText</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <header class="header"> <div class="header__title"> <%= link_to "OnlineText", root_path, class: "header__title--text" %> </div> <div class="header__right"> <% if user_signed_in? %> <%= link_to "新規テキスト作成", new_text_path, class: "header__right--btn" %> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "header__right--btn" %> <% else %> <%= link_to "ログイン", new_user_session_path, class: "header__right--btn" %> <%= link_to "新規登録", new_user_registration_path, class: "header__right--btn" %> <% end %> </div> </header> <div class="contents"> <%= yield %> </div> </body> </html>
devise用のビューを作成
下記コマンドを実行し、devise用のビューを作成する。 ターミナル
cd online_text
rails g devise:views
ログイン画面と新規登録画面が下記のように表示されれば成功です。
実際に下記のようにログインをしてみる。
signupボタン押下後、Usersテーブルを確認すると、下記のように登録できていることが確認できる。
ログイン後、トップページの上部ボタン名が新規テキスト作成とログアウトに変更されていることが確認できる。
上記のように表示されていればユーザー登録機能は成功です。
次章では管理者と一般ユーザーで機能を分ける機能について説明する。