前のセクションに戻る 完了して次のセクションへ  

  3-1 Deviseの導入

この章ではユーザーの新規登録・ログイン機能を開発していきます。

ユーザーの新規登録・ログイン機能を簡単に作成するために今回DeviseというGemを導入します。

Deviseはユーザー登録やログイン機能などの認証に必要な機能を簡単に追加できるRails用のGemです。

gemとは、Ruby用のライブラリを使う時に必要となるソフトウェアになります。

公式ドキュメントはこちらです。

https://github.com/plataformatec/devise

早速導入していきましょう!

この章で学べること


- Deviseを使ったユーザー新規登録・サインイン機能の実装
- rails consoleを使ったデバッグ
- カラムの追加
- Bootstrapを使ったフロントエンドの開発

学習キーワード


- Devise
- フラッシュメッセージ
- Gem
- モデル

DeviseをGemfileに追加してインストールする


Gemfileというファイル内の最下部にdeviseを追加します。

gem 'devise'

次にbundle installを行い、deviseを使えるようにします。

$ bundle install

次に以下のコマンドを実行してdeviseの初期ファイルのインストールを行います。

$ rails g devise:install

上記コマンドを実行すると以下のファイルが作成されます。

create  config/initializers/devise.rb
create  config/locales/devise.en.yml

ファイルを作成すると、ターミナルに以下のようなメッセージが表示されるかと思います。

こちらはdeviseを使う上での初期設定になるので、1から順に行なって行きましょう。

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

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

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

1に書いてある通り、

config/environments/development.rbの末尾のendの上にに以下のコードを追加してください。

config
└── environments
    └── development.rb

deviseのフラッシュメッセージを追加する


フラッシュメッセージとはある動作を行った時、成功したのか、もしくは失敗したのか、相手に知らせ機能のことです。例えばメールアドレスが正しくない状態でログインしようとしたときに、ログインに失敗した旨をメッセージとして表示したりします。

app/views/layouts/application.html.erbに以下のようにコードを追加してください。

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

devise用のviewファイルをインストールする


以下のコマンドでdevise用のviewファイル(表示する画面)を生成します。

$ rails g devise:views

実行すると以下のようなファイルが生成されます。どのようなファイルが生成されたかを見てみましょう。実行結果を見てみることは大事です。様々な「.html.erb」という拡張子のファイルが作成されているかと思います。Deviseを使うと、コマンド一つで一気に複数のファイルを作成してくれます。一から自分で作るより全然便利ですよね。これがGemの魅力でもあります。

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

Userモデルを作成する


モデルとはMVCで言うところのMにあたり、データベースへのアクセスをはじめ、情報のやり取りを行うシステムの階層です。 以下のコマンドでdevise用のUserモデルを作成します。 モデル名の値は任意です。作成したいModel名で作成することができます。今回はUserというモデル名で作成します。

$ rails g devise User

上記のコマンドを実行すると、以下のようなファイルが作成されます。こちらもどのようなものが生成されたか見てみましょう。

invoke  active_record
      create    db/migrate/20180925032152_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

Usersテーブルを作成する


先ほどUserモデルを作成した際に、db/migrate/フォルダの中にマイグレーションファイルが作成されました。

ただマイグレーションファイルはあくまでテーブルの設計図なので、マイグレーションファイルを実行しなければ、何もテーブルを作ったり、カラムを追加したりすることはできません。なのでマイグレーションファイルを実行することで、マイグレーションファイルに書いてある設計を元にテーブルを作成したいと思います。

マイグレーションファイルを実行するには以下のコマンドで実行できます。

$ rails db:migrate

マイグレーションを実行すると、以下のようにテーブルが作成されます。

== 20180925032152 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0013s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0008s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0018s
== 20180925032152 DeviseCreateUsers: migrated (0.0042s) =======================

サーバーを立ち上げてdeviseの導入がうまくいったかの確認


まず以前立ち上げていたサーバーを終了させます。終了させるにはcontrol とcを同時に押せば大丈夫です。

その後「rails s コマンド」でローカルサーバーを立ち上げます。ちなみにsはserverの略です。

$ rails s

そして、http://localhost:3000/users/sign_up を開くと以下の画面のようにサインアップ画面が表示されていれば問題ありません。

サインインしていないときはNavbarは非表示にする


ログインしていないユーザーにはNavbarを表示しないようにしたいと思います。というのもマイページ機能やお気に入り機能など、アカウント登録していないユーザーは使いませんよね。その際には以下のような 「if current_user」という条件式を追加することでログインしているかを確認してログインしていなかった場合にNavbarを非表示にするということが可能になります。

参考)Rails deviseで使えるようになるヘルパーメソッド一覧

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

では、http://localhost:3000/users/sign_up にアクセスしてみてください。以下のようにNavbarが表示されていなければ、問題なく動作しています。

以上でこのパートは終了です。DeviseというGemの力を借りたことで、簡単に会員登録機能が出来ました。

次のパートでは実際にサインアップができるかどうかの確認を行います。

※実際に運用している世の中のサービスではDeviseというGemを使っている場合もあれば使っていない場合もあります。なぜかと言うと、Gemを使うとスピーディーに開発出来て便利という一面、0から自分で開発していないために出来ることに制約があります。そういった面も踏まえて、Gemを使うか使わないかの判断が必要です。

議論
4 質問