#はじめに
Rails ウィザード形式導入について 1 はこちらをクリック願います。
Rails ウィザード形式導入について 2 はこちらをクリック願います。
チーム開発でフリマサイトを開発致しました。
その際、ユーザーの新規登録画面でウィザード形式を導入致しましたので、内容を整理します。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。
#前提
- ユーザー情報(User)については 以下 A と記述します。
- 住所情報(Destination)については 以下 B と記述します。
#Bの登録の各アクション(create)とビュー(new,create)
ルーティング設定(new,create)
- B情報を登録するページを表示するnew_destinationアクションのルーティングを設定します。
- また、B情報を登録するcreate_destinationアクションのルーティングも設定します。
config/routes.rb
Rails.application.routes.draw do
devise_for :users, controllers: {registrations: 'users/registrations'}
#ここから↓
devise_scope :user do
get 'destinations', to: 'users/registrations#new_destination'
post 'destinations', to: 'users/registrations#create_destination'
end
#ここまで↑
root to: "top#index"
end
B情報のビューファイルの作成(new)
- 該当するビューファイルであるnew_destination.html.hamlを作成しまーす！
- 参考程度にみてください。このまま入力するとエラーが出るかも・・・です。
app/views/devise/registrations/new_address.html.haml
.opi
= form_for @destination do |f|
.postal-code
.postal-code__a
.postal-code__a__a1
= f.label :post_code,"郵便番号"
.postal-code__a__a2
必須
.postal-code__b
= f.text_field :post_code,size:37, maxlength:7
.prefectures
.prefectures__c
.prefectures__c__c1
= f.label :prefecture_code_name,"都道府県"
.prefectures__c__c2
必須
.prefectures__d
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, {prompt:'--'}, {class: "shipping__area-input-1"}
.municipality
.municipality__e
.municipality__e__e1
= f.label :city,"市区町村"
.municipality__e__e2
必須
.municipality__f
= f.text_field :city,size:37
.address
.address__g
.address__g__g1
= f.label :house_number,"番地"
.address__g__g2
必須
.address__h
= f.text_field :house_number,size:37
.building
.building__i
.building__i__i1
= f.label :building,"建物名"
.building__i__i2
任意
.building__j
= f.text_field :building,size:37
.phone
.phone__number1
.phone__number1__kk
= f.label :phone_number,"電話番号"
.phone__number1__yy
任意
.phone__number2
= f.text_field :phone_number,size:37,maxlength:11
.register
%input#submit_button2{:name => "submit", :type => "submit", :value => "登録する"}/
ここで一言！
- createアクション内で必要なインスタンス変数を定義してrenderしてます。
- なので、new_destinationアクションをコントローラ内に定義する必要はありませ-ん！
create_destinationアクションを定義する
app/controllers/users/registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController
# 省略
def create_destination
@user = User.new(session["devise.regist_data"]["user"])
@destination = Destination.new(destination_params)
unless @destination.valid?
flash.now[:alert] = @destination.errors.full_messages
render :new_destination and return
end
@user.build_destination(@destination.attributes)
@user.save
sign_in(:user, @user)
end
protected
def destination_params
params.require(:destination).permit(:post_code, :prefecture_code, :city, :house_number, :building, :phone_number)
end
# 省略
end
#####2ページ目で入力した住所情報のバリデーションチェック
- createアクションと同様に、valid?メソッドを用いて、バリデーションチェックを行います。
#####2ページ目の情報とSessionで保持していた情報とあわせ、ユーザー情報として保存
- build_destinationを用いて送られてきたparamsを、保持していたsessionが含まれる@userに代入します。
- saveメソッドを用いてテーブルに保存します。
#####ログインをすること
- 今のままだとユーザーの新規登録ができても、ログインができてません。
- sign_inメソッドを利用してログイン作業を行います。
####最後にdestination_createに対応するビューを作成
- 該当するビューファイルであるcreate_destination.html.hamlを作成しまーす！
- 参考程度にみてください。このまま入力するとエラーが出るかも・・・です。
app/views/devise/registrations/create_destination.html.haml
.main
.done
会員登録完了
.mozi
ありがとうございます。 会員登録が完了しました。
.login2
= link_to "トップへ戻る", root_path
以上で完了です！できました？
個人で開発されるアプリにもぜひ導入してみてください！
UI性も増して、Looks Goodかと！
#さいごに
日々勉強中ですので、随時更新します。
皆様の復習にご活用頂けますと幸いです。