Deviseを使ってユーザーページを作る
##deviseをインストール
gem 'devise'
$ bundle install
$ rails g devise:install
##deviseでUserモデルを作成（usernameカラムを持つ）
$ rails g devise User username
$ rails db:migrate
##ユーザーページのために、deviseと別でUsersコントローラーを作成
$ rails g controller Users show
##ユーザーページのルーティングを編集
- get 'users/show' => 'users#show'
+ resources :users, only: [:show]
##Usersコントローラーを編集
before_action :set_user, only: [:show]
def show
end
private
def set_user
@user = User.find([:id])
end
##ユーザーページを編集
<h1><%= @user.username %>のユーザーページ</h1>
#動作確認
##アカウントを2人作成
| password | username | |
|---|---|---|
| a@a | aaaaaa | hanamichi10 |
| b@b | bbbbbb | kaede11 |
$ rails c
> User.create(email: "a@a", password: "aaaaaa", usename: "hanamichi10")
> User.create(email: "b@b", password: "bbbbbb", username: "kaede11")
##表示
$ rails sして、localhost:3000/users/1'にアクセスすれば、
hanamichi10のユーザーページ
localhost:3000/users/2'にアクセスすれば、
kaede11のユーザーページ
と表示されるはず。
#【+1】ユーザーページのビューを使ってマイページを作ろう
マイページがユーザーページと違うのは、
- 表示するにはログインが必要
- プロフィール編集機能がある
大きくはこの2点だろう。
順番に実装していく。
##マイページを表示する前にログインを要求する
###mypageアクションを追加
deviseのauthenticate_userを使いたいが、
ユーザーページはログインなしでも表示できるようにしたいので、Usersコントローラーのshowアクションには付けられない。
よって、仕方なく、アクションをもう一つ作る。
def mypage
end
ブサイクだけど我慢。
###ルーティング
ルーティングは、
get '/mypage' => 'users#mypage'
とする。
###コントローラー編集
mypageアクションにauthentivcate_userを付ける。
before_action :authenticate_user!, only: [:mypage]
def mypage
end
そして、mypageアクションからshowアクションにリダイレクトする。
全体はこうなる.
before_action :authenticate_user!, only: [:mypage]
before_action :set_user, only: [:show]
def mypage
redirect_to user_path(current_user)
end
def show
end
private
def set_user
@user = User.find([:id])
end
###ビューも少しいじる
<% if user_signed_in? && @user == current_user %>
<h1>マイページ</h1>
<% else %>
<h1>ユーザーページ</h1>
<% end %>
<h1><%= @user.username %></h1>
###動作確認
これで、ただユーザーページを表示したい時は、ログイン不要。
マイページを表示したい時は、ログインを要求する仕組みになったはず。
$ rails sして、ログアウトしていることを確認してから、
localhost:3000/mypageにアクセスする.
ログイン画面を経由してマイページが表示されればOK
ログアウトするには、ログアウトボタンを画面に用意しておくのが便利。（次項）
###【番外編】application.html.erbに追記しておくと便利な代物
<div><%= link_to 'マイページ', mypage_path %></div>
<% if user_signed_in? %>
<div><%= link_to 'ログアウト', destroy_user_session_path, method: :delete %></div>
<% else %>
<div><%= link_to 'ログイン', new_user_session_path %></div>
<div><%= link_to 'アカウント作成', new_user_registration_path %></div>
<% end %>
##プロフィール編集機能を実装する
マイページが完成したので、プロフィール編集機能を実装する。
###editアクションとupdateアクションを追加する
def edit
end
def update
end
###ルーティング
- resources :users, only: [:show]
+ resources :users, only: [:show, :edit, :update]
###コントローラーを編集
- before_action :authenticate_user!, only: [:mypage]
+ before_action :authenticate_user!, only: [:mypage, :edit, :update]
- before_action :set_user, only: [:show]
+ before_action :set_user, only: [:show, :edit, :update]
def mypage
redirect_to user_path(current_user)
end
def show
end
def edit
# 編集するユーザーが本人じゃない場合はユーザーページにリダイレクトする
# これをしないと、ログインさえしていれば、"/users/5/edit"みたいな適当なurlにアクセスすると、他の人のプロフィール編集画面を表示できてしまう
+ unless @user == current_user
+ redirect_to user_path(@user)
+ end
end
def update
# アップデートがうまくいけば、マイページに戻利、
# うまくいかなければ、もう一度編集ページを表示する
+ if current_user.update(user_params)
+ redirect_to user_path(current_user)
+ else
+ redirect_to edit_user_path(current_user)
+ end
end
private
def set_user
@user = User.find([:id])
end
+ def user_params
+ params.fetch(:user, {}).permit(:username)
+ end
###ビュー編集・追加
編集
<% if user_signed_in? && @user == current_user %>
<h1>マイページ</h1>
<% else %>
<h1>ユーザーページ</h1>
<% end %>
<h1><%= @user.username %></h1>
+ <% if user_signed_in? && @user == current_user %>
+ <%= link_to "プロフィール編集", edit_user_path(current_user) %>
+ <% else %>
追加
<h1>プロフィール編集</h1>
<%= form_with model: @user do |form| %>
<div>username<%= form.text_field :username %></div>
<div><%= form.submit "保存" %></div>
<% end %>
###動作確認
マイページにアクセス > プロフィール編集ボタン > フォーム入力、保存ボタン >
マイページが表示されて、ユーザーネームが更新されていればOK