0 【Rails5】Deviseを使って会員登録を行い、郵便番号から住所を自動入力にする方法 #rails #郵便番号 みんなに公開
1. rails new myappをターミナルで実行
$ rails new myapp #myappのところには自由に名前を入れる
2. gemに下記を追加し bundle install
gem 'sqlite3', '~> 1.3.13' #sqlite3には ~> 1.3.13を足す
gem 'devise'
gem 'jp_prefecture'
gem 'jquery-rails' #rails5はこれを入れないとjQueryが動かない
$ bundle install
3. Deviseを導入（ターミナルで実行）
$ rails g devise:install
$ rails g devise User
$ rails g devise:controllers users
$ rails g devise:views
4. routes.rb（ルーティング設定）
Rails.application.routes.draw do
devise_for :users, :controllers => {
:registrations => 'users/registrations',
:sessions => 'users/sessions'
}
end
- ホーム画面を作っておく。
$ rails g controller welcome index
Rails.application.routes.draw do
root 'welocome#index' #追加
devise_for :users, :controllers => {
:registrations => 'users/registrations',
:sessions => 'users/sessions'
}
end
5. userテーブルに郵便番号用下記カラム追加 (ターミナルで実行）
$ rails g migration addColumnToUsers
6. migrationファイルに下記を追加
class AddColumnsToUsers < ActiveRecord::Migration[5.1]
def change
add_column :users, :postcode, :integer
add_column :users, :prefecture_code, :integer
add_column :users, :address_city, :string
add_column :users, :address_street, :string
add_column :users, :address_building, :string
end
end
$ rails db:migrate
7. models/user.rb に下記を追加
#2019.11.15 以下をコメントアウトにするとprefecture_nameでカラムにデータが入った
#include JpPrefecture
#jp_prefecture :prefecture_code
def prefecture_name
JpPrefecture::Prefecture.find(code: prefecture_code).try(:name)
end
def prefecture_name=(prefecture_name)
self.prefecture_code = JpPrefecture::Prefecture.find(name: prefecture_name).code
end
8. assets/javascripts/welcome.coffeeに下記を追加
$ ->
$("#user_postcode").jpostal({
postcode : [ "#user_postcode" ],
address : {
"#user_prefecture_code" : "%3",
"#user_address_city" : "%4",
"#user_address_street" : "%5%6"
"#user_address_building": "%7"
}
})
9.views/devise/registrations/edit.html.erbを下記に追加
<div class="field">
<%= f.label :postcode %><br />
<%= f.text_field :postcode, autofocus: true, autocomplete: "postcode" %> </div>
<div class="field">
<%= f.label :prefecture_code %><br />
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name %>
</div>
<div class="field">
<%= f.label :address_city %><br />
<%= f.text_field :address_city, autofocus: true, autocomplete: "address_city" %>
</div>
<div class="field">
<%= f.label :address_street %><br />
<%= f.text_field :address_street, autofocus: true, autocomplete: "address_street" %>
</div>
<div class="field">
<%= f.label :address_building %><br />
<%= f.text_field :address_building, autofocus: true, autocomplete: "address_building" %>
</div>
10.assets/javascripts/jquery.jpostal.jsを追加
git clone url
url の部分に(https://github.com/ninton/jquery.jpostal.js/)を入れる。クローンしたらassets/javascripts/直下にjquery.jpostal.jsファイルのみを配置する。
不明点、修正点ございましたらコメントよろしくお願いします。
add_column :users, :postcode, :integer
郵便番号のデータ型をintegerにすると、0が整数として認識されないため不具合が起こると思います。