はじめに
現在のバージョン:
macOS Catalina 10.15.3
Ruby on Railsで住所自動入力を実装してみました。
備忘録として記述します。もし参考になれば幸いです。
手順
(1)はじめに下記からjsファイル(jQueryプラグイン)をダウンロード。
jquery.jpostal.js
(2)ダウンロードしたjsファイルをapp/assets/javascriptsに配置。
(3)Gemfileに下記を追加後、ターミナルで$ bundle install
。
# 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に下記追加
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に追加記述
<%= 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_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に下記追加記述
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分はかかりました。
ご参考になれば幸いです。