Ruby Ruby on Rails Web開発 プログラミング

[健忘録]Ruby on Rails 8.0.2.1 | ログイン機能の実装

動作環境

  • MacOSX Tahoe 26.0
  • RUby on Rails 8.0.2.1
  • Ruby 3.3.7
  • Postgresql 17.4
  • node 22.14.0

アプリケーションの作成

アプリケーション名：HPT8

HPT8 % rails _8.0.2.1_ new HPT8 -d postgresql

DB接続設定

~/Desktop/HPT/HPT8/config/database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  # For details on connection pooling, see rails configuration guide
  # http://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: postgres
  password: 12345678 #ご自分のpostgres rootパスワードを入れてください
  host: localhost

DB作成

rails db:setup

Created database 'hpt8_development'
Created database 'hpt8_test'
/Users/nishidakimihisa/Desktop/HPT/HPT8/db/schema.rb doesn't exist yet. Run `bin/rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /Users/nishidakimihisa/Desktop/HPT/HPT8/config/application.rb to limit the frameworks that will be loaded.

作成されるDB

host: localhost
DB: hpt8_development
Port: 5432

GitHub（ブランチ発行まで）

①mainに追加
git remote add main https://github.com/＊＊＊＊/HPT8.git

②確認
git remote -v
main    https://github.com/＊＊＊/HPT8.git (fetch)
main    https://github.com/＊＊＊/HPT8.git (push)

③ユーザ設定
HPT8 % git config --global user.name ＊＊＊＊
HPT8 % git config --global user.email ＊＊＊＊@gmail.com

Webサーバ起動

rails s

ブラウザ確認

http://localhost:3000/

Tailwindの使用

①gem追加
~/Desktop/HPT/HPT8/Gemfile

# Use Tailwind CSS [https://tailwindcss.com/docs/guides/ruby-on-rails]
gem "cssbundling-rails"

②bundle
HPT8 % bundle

③インストール
gem install foreman
rails css:install:tailwind

④tailwind.config.js作成（Tailwind CSS v4時）
touch tailwind.config.js

⑤poper用CDN
app/views/layouts/application.html.erb

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

④起動
bin/dev

device

①GemFile
gem 'devise', '~> 4.9', '>= 4.9.4'

②bundle
bundle

③インストール
rails g devise:install

④ユーザーテーブル作成
rails g devise user

⑤ビュー作成
rails g devise:views

⑥マイグレーション
rails db:migrate

⑦メール設定
~/Desktop/HPT/HPT8/config/environments/development.rb
末尾
# デバイスのメール設定
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

⑧レイアウトファイル記述追加
~/Desktop/HPT/HPT8/app/views/layouts/application.html.erb

<!-- device -->
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

⑨ログイン
http://localhost:3000/users/sign_up

ユーザーテーブル項目追加

①氏名フィールド追加
rails g migration AddFullnameToUser full_name:string

②マイグレーション
rails db:migrate

③ユーザーモデルにバリデーション追加
app\models\user.rb

validates :full_name, presence: true, length: {maximum: 50}

④ユーザーコントローラにパラメータ追加
app\controllers\application_controller.rb

class ApplicationController < ActionController::Base
    before_action :configure_permitted_parameters, if: :devise_controller?
    protected
    def configure_permitted_parameters
        devise_parameter_sanitizer.permit(:sign_up, keys: [:full_name])
        devise_parameter_sanitizer.permit(:account_update, keys: [:full_name])
    end
    
end

⑤ルート設定
config/routes.rb

# ルートを　app\views\pages\home.html.erb　に設定
  root 'pages#home'

# device
  devise_for :users, 
  path: '', 
  path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}

⑥registrations_controller.rbを新規作成し、ユーザ情報をパスワードなしで更新できるように変更
app/controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController
    
    protected
    def update_resource(resource, params)
        resource.update_without_password(params)
    end
end

⑦ルート更新（上記変更に伴う）
config/routes.rb

# device
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {registrations: 'registrations'}

Gmail

①config\environments\development.rb

config.action_mailer.raise_delivery_errors = true

#Gメールの設定
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    address: "smtp.gmail.com",
    port: 587,
    enable_starttls_auto: true,
    authentication: "plain",
    user_name: 'win.rails.learn@gmail.com',
    password: '生成したアプリパスワード'
  }

②config\initializers\devise.rb

config.mailer_sender = 'win.rails.learn@gmail.com'
config.reconfirmable = false

③app\models\user.rb

devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :confirmable

④トークンフィールド追加
rails g migration AddConfirmableToDevise

⑤db\migrate\**_add_confirmable_to_devise.rb

class AddConfirmableToDevise < ActiveRecord::Migration[8.0]
  def change
    add_column :users, :confirmation_token, :string
    add_column :users, :confirmed_at, :datetime
    add_column :users, :confirmation_sent_at, :datetime
    add_index :users, :confirmation_token, unique: true  
  end
end

⑥マイグレーション
rails db:migrate

⑦
app\views\devise\mailer\reset_password_instructions.html.erb
app/views/devise/mailer/confirmation_instructions.html.erb

-Ruby, Ruby on Rails, Web開発, プログラミング