[Java] [Rails] Implementation of automatic address input using jpostal and jp_prefecture

1 minute read

Target

**If you enter the zip code on the new user registration screen, the address (up to the street address) after that will be automatically entered. ** ezgif.com-video-to-gif.gif

Development environment

・Ruby: 2.5.7 Rails: 5.2.4 ・Vagrant: 2.2.7 ・VirtualBox: 6.1 ・OS: macOS Catalina

Premise

Implemented below.

Slim introductionBootstrap3 installedImplementation of login function

Implementation

1. Introduce jQuery plugin

** ① Access the link below. **

jpostal GitHub

** Click on Clone or download ** ![Screenshot 2020-06-09 8.12.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/00077a86-f9fa-def6-503d-(d9a187bbce40.png)

③ Click Download ZIP ![Screenshot 2020-06-09 8.12.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/f3d82831-acde-720e-7f76-(4e66f75283a3.png)

** ④ Place jquery.jpostal.js in the downloaded folder in app/assets/javascript. ** Screenshot 2020-06-09 8.20.45.png

2. Introduce Gem

Gemfile


gem'jquery-rails'
gem'jp_prefecture'

terminal


$ bundle

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery // Described below turbo links
//= require_tree.

3. Add column

terminal


$ rails g migration AddColumnsToUsers postcode:integer prefecture_code:integer address_city:string address_street:string address_building:string

``

~_add_columns_to_users.rb
class AddColumnsToUsers <ActiveRecord::Migration[5.2]
  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

terminal


$ rails db:migrate

4. Edit the model

``

user.rb
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

[Explanation]

``


include JpPrefecture
jp_prefecture :prefecture_code

➡︎ Automatically convert the prefecture code to the prefecture name.

``


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

➡︎ Make it possible to refer to the prefecture name in ~.prefecture_name. Example) @user.prefecture_name can display the address (prefecture) of the corresponding user.

5. Edit controller

Add address information to strong parameters.

application_controller.rb


def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [
    :email,
    :name,
    :postcode,
    :prefecture_name,
    :address_city,
    :address_street,
    :address_building
  ])
end

6. Edit the view

slim:registrations/new.html.slim


/ Addendum
= f.label :postcode,'zip code'
br
= f.text_field :postcode, autocomplete:'postcode', class:'form-control'
br

= f.label :prefecture_name,'prefecture'
br
/ 47 prefectures are displayed in a pull-down menu
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :code, :name, {prompt:'Please select'}, class:'form-control'
br

= f.label :address_city,'city'
br
= f.text_field :address_city, autocomplete:'address_city', class:'form-control'
br

= f.label :address_street,'address'
br
= f.text_field :address_stree, autocomplete:'address_street', class:'form-control'
br

= f.label :address_building,'building'
br
= f.text_field :address_building, autocomplete:'address_building', class:'form-control'
br

7. Create/edit a JavaScript file

terminal


$ touch app/assets/javascripts/address_autofill.js

address_autofill.js


$(function() {
  return $('#user_postcode').jpostal({
    postcode: ['#user_postcode'],
    address: {
      '#user_prefecture_code':'%3',
      '#user_address_city':'%4',
      '#user_address_street':'%5%6%7',
    },
  });
});