初めてのポートフォリオ作成　#3.5 - 大田区から発信するゆるゆる日記

今回は「初めてのポートフォリオ作成」#3の続きです。

#3の日記はこちら。

過去の日記はこちら

初めてのポートフォリオ作成 #0 - 大田区から発信するゆるゆる日記

初めてのポートフォリオ作成 #1 - 大田区から発信するゆるゆる日記

初めてのポートフォリオ作成 #2 - 大田区から発信するゆるゆる日記

初めてのポートフォリオ作成 #2.5 - 大田区から発信するゆるゆる日記

初めてのポートフォリオ作成 #3 - 大田区から発信するゆるゆる日記

恐らくおかしな点があるかと思いますので、その時は教えて頂けると嬉しいです。

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

やりたいこと(前回の日記と同じ)
ユーザー・ログイン機能の実装
※補足
今後に向けて
参考サイト

やりたいこと(前回の日記と同じ)

devise gemを用いてユーザー・ログイン機能を実装する。また、ネストしている別テーブルの性別テーブルからデータ出力と保存を行う。

ユーザー・ログイン機能の実装

サインアップやユーザ情報を編集する時に「gender」「nickname」も登録できるように項目を追加していきます。

routesの設定を変更

「devise_for」が参照するコントローラ先を変更

routes.rb

  devise_for :users, :controllers => {
 :registrations => 'users/registrations',
 :sessions => 'users/sessions',
 :passwords => 'users/passwords'
 }

サインアップに関する記述がされている「registrations」コントローラ以外にも、「registrations」「sessions」コントローラもついでに変更しました。

コントローラの設定を変更

サインアップ時に元々許可されている項目(「password」や「email」など)以外の「gender」「nickname」のストロングパラメータを追加させる。

application_controller.rb

////

 before_action :configure_permitted_parameters, if: :devise_controller?

////

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

これでサインアップやログイン画面で「gender」「nickname」項目を作成することができます。

記載する順序がおかしいかもしれませんが、先にコントローラの記述を全て書いてしまいます。

ユーザ詳細ページがログインしていない時には見れないように、コントローラを変更します。

controllers/users_conntroller.rb

before_action :authenticate_user!, only: [:show]

ビューを変更

サインアップページの項目を変更します。

registrations/new.html.erb

////

 <div class="field">
  <%= f.label :ニックネーム %><br />
  <%= f.text_field :nickname, autofocus: true, autocomplete: "nickname" %>
 </div>

 <div class="field">
  <%= f.label :性別 %><br />
  <%= f.collection_select :gender_id, Gender.find(1,2,9), :id, :gender %>
 </div>

////

「gender」項目についてですが、「gender」テーブルのデータを元に選択しを生成するので、「collection_select」メソッドを使用しています。

また、「gender」テーブルは国際規格に基づいて作成したのですが、今回は「未回答」を選択できないようにしたかったので、「find」メソッドで「男性・女性・その他」だけを選択できるようにしています。

ユーザー情報編集ページの「registrations/edit.html.erb」も上記と同じように変更します。

最後に、部分テンプレートでログイン項目などを表示できるように「_header.html.erb」を作成します。

share/_header.html.erb

<header class="header">
 <div class="header__bar row">
  <h1 class=""><a href="/">アプリ名</a></h1>
  <% if user_signed_in? %>
   <div class="user_nav">
    <span><%= current_user.nickname %>
     <ul class="user__info">
      <li>
       <a href="/users/<%= current_user.id %>">マイページ</a>
       <a href="/users/edit">編集</a>
       <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
      </li>
     </ul>
    </span>
   </div>
  <% else %>
   <div class="">
    <%= link_to "ログイン", login_path, class: 'post' %>
    <%= link_to "新規登録", sign_up_path, class: 'post' %>
   </div>
  <% end %>
 </div>
</header>

※スクールの内容をそのまま転用しているので、内容は好みに合わせて変更させてください。

この「_header.html.erb」を「show.html.erb」に部分テンプレートとして引き渡します。

※補足

URLを短くしたかったので、デフォルトルーティングを変更しています。

Deviseのデフォルトスコープを指定する機能を活用しました。

routes.rb

////

devise_scope :user do
 get 'login' => 'users/sessions#new'
 get 'sign_up' => 'users/registrations#new'
 get 'edit' => 'users/registrations#edit'
 delete 'logout' => 'users/sessions#destroy'
end

////

今後に向けて

少しずつ成長しているのは分かるけど、成長スピードが遅すぎて自信なくす。。。

参考サイト

GitHub - plataformatec/devise: Flexible authentication solution for Rails with Warden.