shimmyShow Webアプリ開発ブログ

プログラミングスクールTECH::CAMPを73期を卒業し、紙媒体で実施されている教育の根本を変えていくためのサービスを開発中。当ブログを読めば誰でも当該サービスを開発できるようにするため軌跡を記録中。

【第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

下記のようにターミナルにファイルが生成されたことが表示されれば成功です。
f:id:erwinmarvin:20200918222633p:plain ルーティングを設定する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テーブルが生成されていれば成功です。
f:id:erwinmarvin:20200918223312p:plain

ログイン機能の実装

まずはログインしていない場合のボタンを実装していく。
新規テキスト投稿ボタンは一旦削除し、下記のように実装する。
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>

下図のようにログインと新規登録のボタンが画面上部に表示されていれば成功です。
f:id:erwinmarvin:20200918224220p:plain

ボタンの表示内容の変更

ログインしている場合には、新規テキスト作成ボタンとログアウトボタンを表示できるように実装する。
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

ログイン画面と新規登録画面が下記のように表示されれば成功です。
f:id:erwinmarvin:20200918225023p:plain f:id:erwinmarvin:20200918225040p:plain

実際に下記のようにログインをしてみる。
f:id:erwinmarvin:20200918225251p:plain signupボタン押下後、Usersテーブルを確認すると、下記のように登録できていることが確認できる。
f:id:erwinmarvin:20200918225500p:plain ログイン後、トップページの上部ボタン名が新規テキスト作成とログアウトに変更されていることが確認できる。
f:id:erwinmarvin:20200918225659p:plain

上記のように表示されていればユーザー登録機能は成功です。
次章では管理者と一般ユーザーで機能を分ける機能について説明する。