見出し画像
Photo by noouchi

Pic Tweetユーザー管理機能

SyosenPS

ユーザー関連の機能はGemを使用

  • deviseを理解

  • deviseを使用したユーザー登録を理解

ログイン機能の実装

ログインしたユーザーのみがツイートの投稿を行える
ツイートの閲覧に関してはログインしているかどうかにかかわらずできる

【手順】
1. Gemをインストールしてサーバーを再起動しよう
2. コマンドを利用してdeviseの設定ファイルを作成しよう
3. コマンドを利用してUserモデルを作成しよう
4. 未ログイン時とログイン時でボタンの表示を変える実装をしよう
5. コントローラーにリダイレクトを設定しよう
それでは実装していきましょう。

Gemfileを編集しましょう

Gemfile　ファイルの
最終行に

gem 'devise'

コマンドを実行してGemをインストール

ターミナル
% bundle install

ローカルサーバーを再起動

※新しくインストールしたら忘れずに再起動
rails sをcontrol + C

deviseの設定ファイルを作成

deviseを使用するためには、Gemのインストールに加え、 devise専用のコマンドで設定ファイルを作成する

rails g devise:installレイルズ ジー デバイス インストールコマンド

このコマンドは、追加したdeviseというGemの「設定関連に使用するファイル」を自動で生成するコマンド

ターミナル
# deviseの設定ファイルを作成
% rails g devise:install

deviseのUserモデルを作成しよう

rails g deviseレイルズ ジー デバイスコマンド

コマンドを実行してUserモデルを作成

ターミナル
% rails g devise user

テーブルを作成しよう

db/migrate/20XXXXXXXXX_devise_create_users.rb　ファイル

↑を開いて確認するだけ

マイグレーションを実行しましょう

ターミナル
% rails db:migrate

Sequel Proでusersテーブルを確認


忘れずにローカルサーバーを再起動！！

確認用URL
http://localhost:3000

deviseのビュー作成

rails g devise:viewsレイルズ ジー デバイス ビューズコマンド

deviseに用意されたビューファイルをコピーし、app/viewsの配下に配置してくれるコマンド
HTMLを修正できるため、カスタマイズ可能

ターミナル
% rails g devise:views

ログイン・サインアップ画面のビューを編集

サインアップ画面はapp/views/devise/registrations/new.html.erb

ログイン画面はapp/views/devise/sessions/new.html.erb

app/views/devise/sessions/new.html.erb　ファイルでログイン画面の編集

<div class="contents row">
<div class="container">
<h2>Log in</h2>
<%= form_with model: @user, url: user_session_path, id: 'new_user', class: 'new_user', local: true do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true %>
</div>

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field">
      <%= f.label :remember_me %><br />
      <%= f.check_box :remember_me %>
    </div>
  <% end -%>

  <div class="actions">
    <%= f.submit "Log in" %>
  </div>
<% end %>

</div>
</div>


app/views/devise/registrations/new.html.erb　ファイルでサインアップ画面を編集

<div class="contents row">
  <div class="container">
    <h2>Sign up</h2>
    <%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <div class="field">
        <%= f.label :email %><br />
        <%= f.email_field :email %>
      </div>

      <div class="field">
        <%= f.label :password %>
        <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
        <% end %><br />
        <%= f.password_field :password, autocomplete: "off" %>
      </div>

      <div class="field">
        <%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation, autocomplete: "off" %>
      </div>

      <div class="actions">
        <%= f.submit "Sign up" %>
      </div>
    <% end %>
  </div>
</div>

確認用URL
ログイン画面
http://localhost:3000/users/sign_in

サインアップ画面
http://localhost:3000/users/sign_up

サインアップ時の名前登録

usersテーブルにカラムを追加しよう

現在、サインアップ時に登録する情報
1.メールアドレス
2.パスワードの2つです。
これに加えて
3.ニックネームを登録できるようにしたい

カラムの追加は、マイグレーションを生成する。

rails g migrationレイルズ ジー マイグレーションコマンド

・すでに作成されたテーブルの内容を変更する際などに使用

スネークケースとキャメルケース

スネークケースとキャメルケースは、それぞれ単語の区切り方を表したもの

  • スネークケースは、単語の区切りをアンダースコアで表す

  • キャメルケースは、単語の区切りを大文字で表す

キャメルケース
先頭が小文字で、単語の区切りを大文字で表す
adminUserCommentCreator

アッパーキャメルケース
キャメルケースの1つ。先頭から単語の区切りを大文字で表す
AdminUserCommentCreator

スネークケース 単語の区切りをアンダースコアで表す
admin_user_comment_creator

Railsの慣習的な命名規則の使い分け
クラス名
アッパーキャメルケース

メソッド名
スネークケース

変数名
スネークケース


usersテーブルにnicknameカラムをstring型で追加

ターミナル
usersテーブルにnicknameカラム(列のタイトル）をstring型で追加するマイグレーションファイルを作成
% rails g migration AddNicknameToUsers nickname:string

作成したマイグレーションを実行
 rails db:migrate

Sequel Proでusersテーブルを確認


maxlengthマックスレングスオプション

text_fieldにつけることができるオプション
入力できる最大文字数を指定

ストロングパラメーターを使えるようにしよう

サインアップ時に入力する情報はパラメーターとしてサーバーに送信される。
deviseを使わない通常のリクエストの場合は、コントローラーにストロングパラメーターを記述し、受け取れるパラメーターを制限。

deviseに関しても、同様にストロングパラメーターをコントローラーに記述。しかし、deviseの処理を行うコントローラーはGem内に記述されているため、編集することができない。

なので、devise特有のパラメーターを取得するために、deviseが提供しているdevise_parameter_sanitizerというメソッドを使う。

devise_parameter_sanitizerデバイス パラメーター サニタイザーメソッド

deviseにおけるparamsのようなメソッド。deviseのUserモデルに関わる「ログイン」「新規登録」などのリクエストからパラメーターを取得できる。

このメソッドとpermitメソッドを組み合わせることにより、deviseに定義されているストロングパラメーターに対し、自分で新しく追加したカラムも指定して含めることができfる！！！

:sign_inサインイン（ログイン）の処理を行うとき

:sign_upサインアップ（新規登録）の処理を行うとき

:account_updateアカウント情報更新の処理を行うとき

※deviseにストロングパラメーターを追加するコードは、deviseのコントローラーが編集できないため、application_controller.rbに記述しなければならない。

application_controller.rbアプリケーション コントローラー アールビーファイル

app/controllers/application_controller.rb　ファイルへ
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?

private
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
end
end

確認用URL
http://localhost:3000/users/sign_up

実際に入力してみる→Sequel Proで確認

ログインの有無で処理を変える

ログインの有無で表示を変えよう

未ログイン時とログイン時でボタンの表示を変える実装

user_signed_in?ユーザー サインド インメソッド

app/views/layouts/application.html.erb ファイルへ
<!DOCTYPE html>
<html>
<head>
<title>Pictweet</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

</head>

<body>
<header class="header">
<div class="header__bar row">
<h1 class="grid-6"><a href="/">PicTweet</a></h1>
ここから
<% if user_signed_in? %>
<div class="user_nav grid-6">
<%= link_to "ログアウト", destroy_user_session_path, data: { turbo_method: :delete } %>
<%= link_to "投稿する", new_tweet_path, class: "post" %>
</div>
<% else %>
<div class="grid-6">
<%= link_to "ログイン", new_user_session_path, class: "post" %>
<%= link_to "新規登録", new_user_registration_path, class: "post" %>
</div>
<% end %>
ここまで
</div>
</header>

<%= yield %>

<footer>
  <p>
    Copyright PicTweet 2019.
  </p>
</footer>

</body>
</html>

未ログイン状態のユーザーを転送しよう

ログインしてない状態でも、「投稿する」ボタンの遷移先であるURLを直接入力すると、新規投稿ページにアクセスできてしまう。

これは大変！！
ログアウトして確認しよう
http://localhost:3000/tweets/new

そこで、未ログインユーザーが投稿画面など直接アクセスしてきた際には、ルートパスに遷移するように設定する。

このような仕組みをリダイレクト

必ず設定しないとね。

リダイレクト

「本来受け取ったパスとは別のパスへ転送する」機能のこと

unlessアンレス

redirect_toリダイレクト トゥーメソッド.

別ページへリダイレクト

exceptエクセプトオプション

一部のアクションについては処理を実行させたくないため、exceptオプションを使用し指定する必要がある

app/controllers/tweets_controller.rb　ファイル
class TweetsController < ApplicationController
before_action :set_tweet, only: [:edit, :show]
before_action :move_to_index, except: [:index, :show]

def index
@tweets = Tweet.all
end

def new
@tweet = Tweet.new
end

def create
Tweet.create(tweet_params)
redirect_to '/'
end

def destroy
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end

def edit
end

def update
tweet = Tweet.find(params[:id])
tweet.update(tweet_params)
redirect_to root_path
end

def show
end

private
def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end

def set_tweet
@tweet = Tweet.find(params[:id])
end

def move_to_index
unless user_signed_in?
redirect_to action: :index
end
end
end

一人ではできない！！どうしよう！！

この記事が気に入ったらサポートをしてみませんか？