Devise導入の設定手順 ~haml使用/pay.jp導入の前準備~ (Rails)

13835 ワード
pay.jp haml Rails devise Rails テキストリンク

はじめに

下記リンクのPay.jp導入の前準備のため作成しました（私の備忘録も兼ねています笑）。
1. Payjpでクレジットカード登録と削除機能を実装する(Rails)
2. Payjpに登録したクレジットカードで商品購入を実装する(Rails)

全ての手順を記載しており、そのまま実施していただければ導入できます。
deviseの入門としても使えるかと思いますのでご確認ください。

この記事でできること

  • hamlを導入する
  • Deviseを導入し日本語化する
  • ログイン/ログアウト/サインアップなどができるようにする

開発環境

  • Rails 5.2.3
  • ruby 2.5.1

作成手順

1.新規ファイルを作成しよう

バージョン指定したい場合はnew _5.0.7_ payjp_testのような感じにしてください。
今回はデータベースにMysqlを使用するので末尾に-d mysqlとつけています。
（herokuにUPする場合は-d postgresqlにてposgreSQLを選択するのが良いみたいです。）
--skip-coffeeと--skip-testをつけることでCoffeeScriptとtestファイルを生成しないようにします(参照)。

$ rails new payjp_test -d mysql --skip-coffee --skip-test
$ cd ./payjp_test

2.Deviseとhamlを導入しよう

Gemfileに以下のものを追加します。
Rspec、dotenv-railsなどが必要な場合は追加してください。
gem 'devise-i18n'はviewを日本語化する時に必要なものです。

Gemfile
gem 'haml-rails'
gem 'erb2haml'
gem 'devise'
gem 'devise-i18n'
gem 'devise-i18n-views'

bundle installを実施します。

$ bundle install

deviseをインストールします。
（もしできない場合はターミナルを再起動するか、こちらをご覧ください。）

$ rails g devise:install

インストール後、下記のようなアラートが表示されると思います。

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. Ensure you have defined default url options ...

デフォルトのローカルサーバーどうしますかということなので、下記のように追記します。

config/environments/development.rb
Rails.application.configure do
  # Settings specified here will take precedence over those in 
(省略)
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } #<-追記
end

2~3については後ほど設定するものがあるので、今は省略します。
2. Ensure you have defined root_url to something in your config/routes.rb ...
（rootを設定する場合<-後ほど作成します）
3. Ensure you have flash messages in app/views/layouts/application.html.erb ...
（flashメッセージを付ける場合<-今回実装しません）
4. You can copy Devise views (for customization) to your app by ...
（編集するようのviewを作成する場合<-後ほど作成します）

3.データベースとテーブルを作成しよう

下記のコマンドでデータベースとテーブルが作成されます。
Devise用にUserというテーブルを作成します。

$ rails g devise User
$ rails db:create
$ rails db:migrate

今回、Userテーブルのカラムはデフォルト設定で最低限となっていますが、
より詳細に設定したい場合はこちらをご確認ください。

4.Deviseのコントローラーを作成しよう

Deviseのコントローラーを作成します。

$ rails g devise:controllers users

ファイルが生成されると、下記のようにターミナルにアラートが出ます。

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

  Ensure you have overridden routes for generated controllers in your routes.rb.
  For example:

    Rails.application.routes.draw do
      devise_for :users, controllers: {
        sessions: 'users/sessions'
      }
    end

こちらの内容については後ほど対応します。

5.Deviseのビューを作成し日本語化しよう

下記のコマンドでDeviseのビューを日本語で作成します。
（日本語化しない（デフォルトで使用する）場合は$ rails g devise:viewsで対応ください。）

$ rails g devise:i18n:views
$ rails g devise:views:locale ja

さらに表記を日本語化するためにconfig/application.rbに
config.i18n.default_locale = :jaを追記します。

config/application.rb
module Devise
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2
    config.i18n.default_locale = :ja # <-こちらを追記

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end

もしデフォルトの日本語表示を変更したい場合は
config/locales/devise.views.ja.ymlを変更します。
ex) https://github.com/plataformatec/devise/wiki/I18n#japanese-devisejayml

6.erbファイルをhamlファイルに変換しよう

下記コマンドでerbをhamlに変換します。
そのままerbファイルを使用する場合は実施しなくて大丈夫です。

$ rails haml:erb2haml

このコマンドを打つとhamlファイルに変換後、
Would you like to delete the original .erb files?(erbファイルを削除しますか？)
と表示がでるので、yを押してerbファイルについては全て削除します。

7.ログイン/ログアウト用のコントローラーとビューを作成しよう

コントローラーとビューを作成します。
下記コマンドで、usersのコントローラーとindexのアクション（view）などを作成します。

$ rails g controller users index

ルーティングを下記の通り設定します。

devise/config/routes.rb
Rails.application.routes.draw do
  root to: 'users#index'
  get 'users/index'
  devise_for :users, controllers: {
    sessions: 'users/sessions'
  }
end

8.画面の確認をしよう

サーバーを起動します(既に起動している場合は再起動します←再起動忘れがちなので重要！)。

$ rails s

以下のURLにアクセスします。

http://localhost:3000/users/sign_up

このような画面が出てくればOK！無事日本語化されていますね！
ここで後述する画面変遷の確認のためアカウント登録を実施してください。

9.ログイン/ログアウトができるようにしよう

ログインをしていないとroot画面に移行するように設定します。

controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!
end

尚、before_action :authenticate_user!についてはexceptやonly設定ができます。
https://qiita.com/GREAT__SHARK/items/6280ab19c4c8c7dc6506#authenticate_user%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89

ログイン/ログアウトボタンを作ります。

view/users/index.html.haml
- if user_signed_in?
  = link_to "ログアウト", destroy_user_session_path, method: :delete
- else
  = link_to "ログイン", new_user_session_path, method: :get

rootにusers#indexを設定しているので、そのままrootにアクセスしてみましょう。

http://localhost:3000

そうすると、下画像のようなログインまたはログアウトのリンクが出てくると思います。

これでログインとログアウトができる状態が確認できれば、
ある程度使える状態になっていると思います！

参照