はじめに
下記リンクの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を日本語化する時に必要なものです。
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
- Ensure you have defined default url options ...
デフォルトのローカルサーバーどうしますかということなので、下記のように追記します。
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を追記します。
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
ルーティングを下記の通り設定します。
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画面に移行するように設定します。
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
ログイン/ログアウトボタンを作ります。
- 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
そうすると、下画像のようなログインまたはログアウトのリンクが出てくると思います。
これでログインとログアウトができる状態が確認できれば、
ある程度使える状態になっていると思います！