목표

개발 환경

루비 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

전제

※◯◯◯를 선택하면 설명 등이 나오므로,
잘 모르는 경우의 참고로 해 주시면 좋겠습니다.

homes 컨트롤러를 작성해, 이하를 기술 완료.

config/routes.rb

root 'homes#top'
get 'mypage', to: 'homes#mypage'

app/controllers/homes_controller.rb

class HomesController < ApplicationController
 def top
 end
 def mypage
 end
end

흐름

1 devise에서 주소를 입력하여 로그인할 수 있도록 허용
2 gem 'jp_prefecture', gem 'jquery-rails' 도입
3 jquery.jpostal.js 도입
4 application.js 편집

1, devise로 로그인

참고 :여기에서 상세하게 설명하고 있습니다.

Gemfile

gem 'devise'

터미널

$ bundle install
$ rails g devise:install
$ rails g devise User

하기 기술을 추가.

db/migrate/xxxxxxxxxxxxx_devise_create_users.rb

...

<-- ここから-->
      t.integer :postal_code, null: false
      t.string :prefecture_code, null: false
      t.string :city, null: false
      t.string :street, null: false
      t.string :other_address # 番地以降の住所がない場合もあるため、null: falseはつけない
<-- ここまでを追加 -->
      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

devise:controller

터미널

rails g devise:controllers users

app/controllers/users/registrations_controller.rb

# frozen_string_literal: true

class Users::RegistrationsController < Devise::RegistrationsController
  before_action :configure_sign_up_params, only: [:create]
  # before_action :configure_account_update_params, only: [:update]

...

  # protected

  # If you have extra params to permit, append them to the sanitizer.
  def configure_sign_up_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :postal_code, :prefecture_code, :city, :street, :other_address])
  end

  # If you have extra params to permit, append them to the sanitizer.
  # def configure_account_update_params
  #   devise_parameter_sanitizer.permit(:account_update, keys: [:attribute])
  # end

  # The path used after sign up.
  def after_sign_up_path_for(resource)
    mypage_path
  end

  # The path used after sign up for inactive accounts.
  # def after_inactive_sign_up_path_for(resource)
  #   super(resource)
  # end
end

devise:model

미입력을 막기 위해 아래 설명을 추가.

app/models/user.rb

  validates :postal_code, presence: true
  validates :prefecture_code, presence: true
  validates :city, presence: true
  validates :street, presence: true

devise:routing

config/routes.rb

Rails.application.routes.draw do
  devise_for :users, controllers: {
    sessions: 'users/sessions',
    registrations: 'users/registrations',
  }

  root 'homes#top'
  get 'mypage', to: 'homes#mypage'
end

devise:view

터미널

$ rails g devise:views users

form_for 안에 설명.

app/views/devise/registrations/new.html.erb

form_for...

  <div class="field">
    <%= f.label :postal_code %><br>
    <%= f.text_field :postal_code %>
  </div>

  <div class="field">
    <%= f.label :prefecture_code %><br>
    <%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name %>
  </div>

  <div class="field">
    <%= f.label :city %><br>
    <%= f.text_field :city %>
  </div>

  <div class="field">
    <%= f.label :street %><br>
    <%= f.text_field :street %>
  </div>
  <div class="field">
    <%= f.label :other_address %><br>
    <%= f.text_field :other_address %>
  </div>


...

이것으로 주소를 입력하는 신규 등록 화면의 완성입니다.

2, gem 추가

Gemfile

gem 'jp_prefecture' # 都道府県コードから都道府県名を変換するgem
gem 'jquery-rails' # RailsでjQueryを使えるようにするgem

터미널

$ bundle install

3, jquery.jpostal.js 도입

htps : // 기주 b. 이 m/마늘/j 쿠에 ry. j포s타l. js/
상기 URL로 천이 후, 녹색의 「Code」탭을 눌러,
빨간색 원 부분에서 zip 파일을 다운로드.

압축을 풀면 "jquery.jpostal.js"의 파일을 찾습니다.
이 파일을 app/assets/javascripts 아래에 저장.

4, application.js 편집

app/assets/javascripts/application.js

//= require rails-ujs <--削除
//= require jquery <--追加
//= require jquery_ujs <--追加
//= require activestorage
//= require turbolinks
//= require jquery.jpostal <--追加
//= require_tree .

$(function() {
  $(document).on('turbolinks:load', () => {
    $('#user_postal_code').jpostal({
      postcode : [
        '#user_postal_code'
      ],
      address: {
        "#user_prefecture_code": "%3", // # 都道府県が入力される
        "#user_city"           : "%4%5", // # 市区町村と町域が入力される
        "#user_street"         : "%6%7" // # 大口事務所の番地と名称が入力される
      }
    });
  });
});


// # 入力項目フォーマット
// #   %3  都道府県
// #   %4  市区町村
// #   %5  町域
// #   %6  大口事業所の番地 ex)100-6080
// #   %7  大口事業所の名称

잘 작동하지 않을 때
아마도 turbolinks의 거동이 이상해질 가능성이 높기 때문에,
link 이전 link_to에
data: {"turbolinks"=>false}
를 작성하여 해결할 수 있습니다.

아래 내용을 맨 위에 추가

app/views/devise/registrations/new.html.erb

<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>

참고

jp_prefecture라는 도도부현을 다루는 젬을 만들었다.