こんにちは。
GMOアドマーケティング18新卒のR.Sです。

前回のブログでは新卒研修の内容を紹介しました。

Ruby on Railsの知識をさらに深めるために、基本になりそうな「devise」というgemを使ってみたので、今回はアプリケーションを作る第一歩となる「rails new」から「devise」の実装までを紹介します。

deviseとは、ユーザー登録やログイン、パスワードの再発行、アカウントロックなどの機能を簡単に実装できるgemです。

環境構築

Railsでの開発環境を整え、新しいプロジェクトを作ります。

参考にしたページは「新規Railsプロジェクトの作成手順まとめ」です。

プロジェクトごとにRubyのバージョンが違ったり、使うgemが違ったりするので、他のプロジェクトやシステムの環境に影響を与えずに新プロジェクトを作りたい人向けです。基本的にはこのページの通りに進めていきます。

(bundler をインストールしている前提なので、インストールしていない人は、gem install bundler を実行してインストールしておく必要があります。)

まず、アプリケーション用のディレクトリを作成して、

$ mkdir test-app

$ cd test-app

Gemfile を生成します。

$ bundle init

下記のように Gemfile を編集し、

# frozen_string_literal: true
source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails" #ここをアンコメントするだけ

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails" #ここをアンコメントするだけ

vender/bundle にrailsをインストールします。

$ bundle install --path vendor/bundle

後ろの --path vender/bundle オプションをつけ忘れないように注意が必要です。このオプションをつけることで、プロジェクトの vender/bundle 以下にgemが格納されます。

また、一度オプションをつけてインストールしたら、次回以降はつけなくても vender/bundle 以下に格納されるようになります。

格納したgemは bundle exec をつけることで呼び出せるので、ここから先のコマンドは bundle exec をつけます。

次に、Railsプロジェクトを生成します。

私は自分のアプリケーション用に rails new の部分は下記のようにオプションをつけて実行しました。使用できるオプションは、$ rails new -h で確認できます。

$ bundle exec rails new . --skip-bundle --skip-test-unit -d mysql

このとき、Gemfileを上書きしても良いか聞かれるので、yesにして続行します。

また、config/database.yml の development の部分も下記のように編集しています。

 MySQL. Versions 5.1.10 and up are supported.
#
# Install the MySQL driver
#   gem install mysql2
# 省略

development:
  adapter: mysql2
  database: testapp_dev #任意のDB名
  username: root
  password:
  host: localhost
  encoding: utf8
  reconnect: true

MySQL. Versions 5.1.10 and up are supported.

# Install the MySQL driver

# gem install mysql2

# 省略

development:

adapter: mysql2

database: testapp_dev #任意のDB名

username: root

password:

host: localhost

encoding: utf8

reconnect: true

ここまででプロジェクトの準備は完了です。

使うgemが決まっていたり、RubyやRailsのバージョンを変更する場合は、

Gemfileを編集して$ bundle installします。

データベースを作成するコマンドと、

$ bundle exec rake db:create

マイグレーションファイルに基づいてテーブルを作成するコマンドを実行すると、

$ bundle exec rake db:migrate

ローカル上で動作するアプリケーションの環境構築ができました！

$ bundle exec rails s

と実行して http://localhost:3000/ に接続すると、Railsのデフォルトページが表示され、

環境構築ができていることを確認できます！

deviseの実装

Railsで開発する環境が整ったので、次はdeviseの実装です。

今回は、deviseを利用して、emailとパスワードを使ったユーザ登録とログイン機能を実装します。

動作環境

Rails 5.2.2
devise 4.5.0

gemのインストール

Gemfileにgemを記載します。

source 'https://rubygems.org'

gem 'devise'

source 'https://rubygems.org'

gem 'devise'

$ bundle install　を実行するとgemがインストールされます。gemを使う準備が出来ました。

deviseのインストール

$ bundle exec rails g devise:install

を実行すると、deviseがインストールされ、必要なファイルを自動で生成してくれます。

インストールが終わると、英語でセットアップの説明が1~4まで出るので、それに従って設定していきます。例も書かれているので、今回はその例通りに設定していきます。

1.デフォルトURLを定義

config/environments/development.rb に追記します。私は一番下に追記しました。

Rails.application.configure do

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

Rails.application.configure do

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

end

2.root_urlを定義

root つまり http://localhost:3000/ に接続したときのページを設定します。

まだページは作っていないので、下記コマンドを実行して作っておきます。
(Welcomeの部分は好みのページ名で大丈夫です。)

$ bundle exec rails g controller Welcome index
ページが出来たら、config/routes.rb のrootパスを設定します。

Rails.application.routes.draw do
 devise_for :users #これは既に定義されている
  root 'welcome#index' #これを追記
end

Rails.application.routes.draw do

devise_for :users #これは既に定義されている

root 'welcome#index' #これを追記

end

3.flashメッセージの設定

app/views/layouts/application.html.erb の <body> タグの中身を編集します。

<!DOCTYPE html>

<body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>
</html>

<!DOCTYPE html>

<body>

<%= yield %>

</body>

</html>

これを設定すると、ログイン後に「ログインしました」というようなメッセージが出るようになります。

4.deviseのviewを作成

$ bundle exec rails g devise:views

とターミナルで実行すると、app/views/devise フォルダに必要なviewが自動で作成されます。自分でviewを編集することも可能です。

モデルの準備

まず、下記のコマンドを実行し、deviseでログインするモデルを作成します。今回はUserで進めていきますが、AdminやMemberなど任意の名前で大丈夫です。

$ bundle exec rails g devise user

モデルが作成できたら、必要な場合はモデルを編集します。

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
end

class User < ApplicationRecord

# Include default devise modules. Others available are:

# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable

devise :database_authenticatable, :registerable,

:recoverable, :rememberable, :validatable

end

今回は変更せずに進めますが、公式ページのREEDMEの目次の上に利用できるモジュールの詳細が記載されているので、必要に応じて利用するモジュールを追記してください。

Userモデルを編集したら、マイグレーションファイルを確認します。

モデルを作成したときに「日時_devise_create_users.rb」というマイグレーションファイルも生成されているので、モジュールを追加した場合は編集が必要です。

今回はモジュールを追加していないので、このまま変更せずに進みます。

モジュールを追記していたら、追記したモジュールに該当する部分はアンコメントします。

例えば、Trackableを追加していたら、##Trackable以降の6行のアンコメントが必要です。

class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

class DeviseCreateUsers < ActiveRecord::Migration[5.2]

def change

create_table :users do |t|

## Database authenticatable

t.string :email, null: false, default: ""

t.string :encrypted_password, null: false, default: ""

## Recoverable

t.string :reset_password_token

t.datetime :reset_password_sent_at

## Rememberable

t.datetime :remember_created_at

## Trackable

# t.integer :sign_in_count, default: 0, null: false

# t.datetime :current_sign_in_at

# t.datetime :last_sign_in_at

# t.string :current_sign_in_ip

# t.string :last_sign_in_ip

## Confirmable

# t.string :confirmation_token

# t.datetime :confirmed_at

# t.datetime :confirmation_sent_at

# t.string :unconfirmed_email # Only if using reconfirmable

## Lockable

# t.integer :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts

# t.string :unlock_token # Only if unlock strategy is :email or :both

# t.datetime :locked_at

t.timestamps null: false

end

add_index :users, :email, unique: true

add_index :users, :reset_password_token, unique: true

# add_index :users, :confirmation_token, unique: true

# add_index :users, :unlock_token, unique: true

end

確認したら、マイグレーションを実行します。

$ bundle exec rake db:migrate

これでdeviseの準備も完了です！

まだログイン画面へのリンクがないので、app/views/welcome/index.html.erb を編集しておきます。

(user_signed_in? はdeviseのヘルパーメソッドで、ユーザーがログインしているか判定し、ログイン済みならtrueを返すメソッドです。)

<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>

<% if user_signed_in? %>
  <%= link_to 'プロフィール変更', edit_user_registration_path %>
  <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
<% else %>
  <%= link_to 'ユーザー登録', new_user_registration_path %>
  <%= link_to 'ログイン', new_user_session_path %>
<% end %>

<h1>Welcome#index</h1>

<p>Find me in app/views/welcome/index.html.erb</p>

<% if user_signed_in? %>

<%= link_to 'プロフィール変更', edit_user_registration_path %>

<%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>

<% else %>

<%= link_to 'ユーザー登録', new_user_registration_path %>

<%= link_to 'ログイン', new_user_session_path %>

<% end %>

サーバーを起動して、localhostにアクセスすると、

設定したroot_urlの画面が表示され、ログイン機能が実装されていることが確認できました！

これでdeviseの実装の紹介は終わりです。

deviseを実装して使ってみた結果、簡単な設定をするだけで本格的なログイン機能を実装できるし、利用するモジュールも選べて、viewも自由に変えられるのでとても自由度が高いと感じました。

これからアプリケーションを作ってみようと思っている方には、ぴったりだと思います。

次回は、今回のログイン機能に、OmniAuthを利用したツイッターログイン機能をプラスする手順を紹介しようと思います。