Rails 5.2.3 で Devise と bootstrap (まとめ)

Rails 6.0 が出たので、そっちの方が良いのかなーと思いつつ、ちょっと試してみたら今までとあまりに違い過ぎているというか、MySQL とか MariaDB  とか SQLite とかが、ディストリビューション付属のデフォルトのものでは動かない感じだったので、とりあえず Rails 5.2.3 で Devise を使って認証周りを作る方法についてまとめていきます。

いつも同じことを繰り返してやっているので、同じ手順でやれば同じものを作れるようにまとめてみました。

(追記) と思っていましたが、Rails 6.0 が意外と簡単に動いたので、Rails 6.0 に切り替えます

(追記の追記) と思ってましたが、webpacker が意外と面倒だったので、一旦 Rails 5.2.3 で進めます。

ソースを以下にアップロードしておきました。

https://github.com/kayama-hiroshi/rails523_devise_sample

その1) Rails 5.2.3 のインストール

まずは bundle で Rails 5.2.3  をインストールして動作確認します。

 

その2) devise のインストールと動作確認

Devise のインストールと基本的な設定および動作確認を行います。

 

その3) bootstrap を使って、Devise の view をまとまった感じのものにする

Devise を入れただけの状態ではログイン画面、ユーザ登録画面、ユーザ情報変更画面がかなりイケてないので、bootstrap を適用してとデザインを整えます。

 

その4) Devise のメール送信設定を行う

メール送信設定を行っていないので、パスワードリセット等の試験を行えません。ダミーのメールサーバを立てて、どのユーザ宛のメールも同一ユーザで受信できるようにし、Devise でダミーメールサーバを使用してメール関連の機能の確認が行えるようにします。

 

その5) devise の認証をメールアドレスではなくユーザ名で行うように変更

Devise はデフォルト状態ではメールアドレスをユーザIDとして使用して認証を行います。これをメールアドレスではなくユーザ名を用いて認証できるように変更します。Devise の controller を User モデルに対して個別に作成することによって、パラメータ周りの設定変更を行います。

 

その6) Profile モデルを追加して、Devise のユーザに紐づける

Devise の User モデルには、ユーザ個別の Profile 情報を持たせたくありません。Profile は Profile として別モデルで定義し、User モデルと 1 対 1 で対応させて管理させます。

 

その 7)  DeviseでProfile編集をDHH流ルーティングで行う

作成された Profile 情報を表示、編集する画面を作っていきます。DHH 流ルーティングで実装します。

その8) DeviseでProfileにアバター画像をつける

Profile 情報を表示できるようになったので、アバター画像の表示とアップロード機能をつけます。

その9) (bootstrap) Profile の画像を固定サイズで表示するのと、アップロード前確認

アバターサイズが大きいと意図した表示領域からはみ出すので、それを防止します。また、アップロード前に画像がどう見えるかを確認できるようにします。

 その10) 画面周りをきれいにしてみる

DeviseのパラメータをDeviseのController/Viewを使わないで更新(その1)

DeviseのパラメータをDeviseのController/Viewを使わないで更新(その2)

bootstrapでメニュー等をつけてアプリらしく

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です