2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Ruby on Rails 住所自動入力実装方法

Posted at

はじめに

現在のバージョン:
macOS Catalina 10.15.3

Ruby on Railsで住所自動入力を実装してみました。
備忘録として記述します。もし参考になれば幸いです。

手順

(1)はじめに下記からjsファイル(jQueryプラグイン)をダウンロード。
jquery.jpostal.js

(2)ダウンロードしたjsファイルをapp/assets/javascriptsに配置。

(3)Gemfileに下記を追加後、ターミナルで$ bundle install

Gemfile
# RailsでjQueryを使えるようにするため
gem 'jquery-rails'
# 住所機能
gem 'jp_prefecture'

(4)Userモデルに下記カラムを追加後、ターミナルで$ rails db:migrate

ターミナル
rails generate migration AddColumnsToUsers postal_code:string prefecture_code:string address_city:string address_street:string

(5)Userモデルを編集する為、app/models/user.rbに下記追加

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

(6)表示をさせるビューに下記追加(本記事はdeviseを導入して新規会員登録画面で実装)app/views/devise/registrations/new.html.erbに追加記述

new.html.erb

<%= f.label :郵便番号 %>
<%= f.text_field :postal_code, autocomplete: "postal_code", id: "customer_postal_code" %>

<%= f.label :都道府県 %>
<%= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all,  :name, :name, autocomplete: "prefecture_code", id: "customer_prefecture_code" %>

<%= f.label :市区町村 %>
<%= f.text_field :address_city,  autocomplete: "address_city", id: "customer_address_city" %>

<%= f.label :町名番地 %>
<%= f.text_field :address_street,  autocomplete: "address_street", id: "customer_address_street" %>

(7)app/assets/javascripts/user.coffeeにjpostalメソッドを呼び出す為記述。

user.coffee
$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city" : "%4",
                  "#user_address_street" : "%5%6%7"
                }
  })
  # 入力項目フォーマット
    #   %3  都道府県
    #   %4  市区町村
    #   %5  町域
    #   %6  大口事業所の番地
    #   %7  大口事業所の名称

(8)app/controllers/users_controller.rbに下記追加記述

users_controller.rb
  private
  def user_params
    params.require(:user).permit(:postcode, :prefecture_code, :address_city, :address_street) #保存を許すカラム
  end

以上で郵便番号入力後、住所が自動で入力がされるかと思います。

#補足
住所自動入力を設定した画面に遷移してリロードしないと郵便番号の自動入力がしない場合、リンクの記述に data: {"turbolinks" => false} を追加すると解消できました。

<%= link_to '会員登録', '/customers/sign_up',  data: {"turbolinks" => false} %>

初めて実装した場合約20分はかかりました。
ご参考になれば幸いです。

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?