前のパートに戻る 完了して次のパートへ  

  2-1 会員登録・ログイン機能の作成

この章で学べること


- deviseのgemをインストールする
- deviseの初期設定を行う
- deviseのviewの設定を行う
- deviseのmodelの設定を行う


学習キーワード


- rails g devise:install
- rails g devise:views
- rails g devise User
- rails db:migrate


Deviseのgemをインストールする


Gemfileを開き、以下のように最下部にDeviseのgemを追加します。

Deviseの使い方は公式ドキュメントのREADME.md等を参考にしましょう。

参考)

devise公式ドキュメント devise公式ドキュメントを日本語に翻訳したもの

techpit-job
     └──Gmefile

追加したら、bundle installを実行して、インストールを行います。

$ bundle install

gem listコマンドを使うとインストールしたgemが確認出来るのでDeviseのgemがインストールされているかを確認してみてください。

インストールが完了したら、次はDeviseに関連するファイルをインストールするために以下コマンドを実行します。

$ rails g devise:install

インストールが完了すると以下のように初期設定をしてくださいと表示されるので、以下に従い初期設定を進めて行きましょう。

2つ目にあるEnsure you have defined root_url to *something* in your config/routes.rb.と書いてある設定は次の章で行いますので、ここでは一旦飛ばします。

Running via Spring preloader in process 1337
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================


Deviseの初期設定を行う


まずは、開発環境でのメーラーのデフォルトURLの設定です。config/environments/development.rbの末尾のendの上に以下のコードを追加してください。

config
└── environments
    └── development.rb

次にフラッシュメッセージの追加の設定を行います。app/views/layouts/application.html.erbを以下のように編集してください。 フラッシュメッセージとは、何かの処理を行った時に表示されるメッセージです。例えば以下のようなメッセージがあります。

・ユーザー登録に成功しました

・ログインしました

・口コミの投稿が成功しました

・写真を投稿しました

・本人確認に失敗しました

app
└── views
    └── layouts
        └── application.html.erb

deviseのviewの設定を行う


上記の設定まで完了したら、以下コマンドを実行してDeviseのview関連の初期設定ファイルをインストールしましょう。

$ rails g devise:views
Running via Spring preloader in process 1461
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

インストールが完了すると上記のようにview関連の初期ファイルが作成されます。


Deviseのmodelの設定を行う


view関連のファイルのインストールが完了したらmodelの設定も行いましょう。 Deviseの初期のmodel関連の初期ファイルは以下コマンドでインストール出来ます。

$ rails g devise User

上記コマンドを実行すると以下のように表示され、modelファイルやマイグレーションファイルが作成されます。

Running via Spring preloader in process 1499
      invoke  active_record
      create    db/migrate/20180916083749_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users

上記コマンドが完了したら以下コマンドを実行してマイグレーションファイルをマイグレーションしましょう。

$ rails db:migrate
== 20180916083749 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0015s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0010s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0017s
== 20180916083749 DeviseCreateUsers: migrated (0.0045s) =======================

上記までが完了したら、一度ターミナルに戻り、control + cでサーバーを停止してからrails sでサーバーを再起動しましょう。 再起動を行ったら、localhost:3000/users/sign_upにアクセスしてみてください。以下のように会員登録フォームが表示されます。

login画像

これで会員登録・ログイン機能の実装が出来ました。

次の章ではbootstrapなどを使って見た目を整えます。

お疲れさまでした!

議論
0 質問
このコースの評価は?