LoginSignup
1
0

More than 3 years have passed since last update.

Rails ウィザード形式導入について 1

Last updated at Posted at 2020-03-31

はじめに

Qiitaサボっておりましたが、学習は継続してしっかりやっております!
むしろチーム開発を通じて、アプリ開発が楽しくてたまらない状態です!
しかし、サボりっぱなしは気持ちよくないので、リスタートさせてください(泣)

上述の通り、チーム開発でフリマサイトを開発致しました。
その際、ユーザーの新規登録画面でウィザード形式を導入致しましたので、内容を整理します。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

ウィザード形式とは

  • 世に出ているアプリ等でも見かける画面が切り替わりながらユーザー等の登録を行うもの
  • ウィザード形式とは、対話するように順番に操作が進んでいくインターフェースのこと

なぜウィザード形式が必要なのか

  • 使いやすくなる
  • UXのクオリティが高まる

私自身も「使いやすい」、「何がどこにあるのか」が分かり易いアプリは、いい印象です。
え? そんなところをクリックできたのか!
マイページに飛んで、また入力か。

それらを回避できるイメージです!

前提条件

  • 今回はuser情報に併せて、destination(住所)情報をウィザード形式で入力できる
  • deviseは導入済み
  • deviseのデフォルト状態での新規登録・ログイン機能は実装済み

では早速!

destinationsモデルの設定

  • destinations(住所)情報の実装をするので、マイグレファイルを設定します!
db/migrate/20XXXXX.rb
class CreateDestinations < ActiveRecord::Migration[5.2]
  def change
    create_table :destinations do |t|
      t.integer :post_code
      t.text :destination
      t.references :user
      t.timestamps
    end
  end
end

バリデーション、アソシエーションの設定

  • まずはdestinationの方から!
app/models/destination.rb
class Destination < ApplicationRecord
  belongs_to :user, optional: true
  validates :post_code, :destination ,presence: true
end
  • 続いて、userの方も!
app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  validates :name, :age ,presence: true
  has_one :destination
end

deviseのカスタマイズ

deviseのコントローラの作成

  • 編集(ウィザード形式実装のため)できるようにする為に、必要となります。
% rails g devise:controllers users

しかし、このままでは、devise管理化のコントローラーが呼ばれてしまいます。

呼びたいのはDevise::RegistrationsControllerを継承したUsers::RegistrationsControllerです!

% rails routes 

で確認してくださーい!

例えばですが、controller#Actionのdevise/registrations#newです。

ルーティングの設定

  • どのコントローラを参照するのか設定
config/routes.rb
Rails.application.routes.draw do
  devise_for :users, controllers: {
    registrations: 'users/registrations',
  }
  root to: "top#index"
end

ここでもう一度

% rails routes 

で確認してくださーい!

rails routesをすると、参照するコントローラが変更されていることが確認できます。

例えばですが、
controller#Actionのdevise/registrations#new

controller#Actionのusers/registrations#new
になっているかと思います!

今行ったことは、Devise::RegistrationsControllerを継承したUsers::RegistrationsControllerを作成したイメージです。

続きは次回!

さいごに

日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0