#概要
住所登録するときに郵便番号を入力すれば、自動で住所が出てくるやつ。
便利ですよね。
こんな感じです。
#使うもの
・jp_prefectureというgem
これは47都道府県をいちいち全部書かなくても勝手に変換してくれます。
・jquery.jpostal.jsというプラグイン
これは、郵便番号を入力すると町までを予測してくます。
#手順
###1.jquery.jpostal.jsを導入しよう!
https://github.com/ninton/jquery.jpostal.js/
このリンクからjquery.jposta.jsというファイル(ぜんぶ)を取得して、
assets/javascript/に置いて下さい。
###2.gem入れよう!
gem 'jp_prefecture'
gem 'jquery-rails'
bundleしましょう。
###3.mifrationファイルに住所系のカラムを入れよう!
t.string :postcode
t.string :prefecture_code
t.string :address_city
t.string :address_street
t.string :address_building
postcode :郵便番号
prefecture_code :県
address_city :市
address_street :長村
address_building :部屋番
です。
一番上のはint型でもokです。
$ rails db:migrate
をしましょう。
###4.県を取得しよう!
modelから取得できます。
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
これで県拾えまっせ。
次にビュー行きます。
form作ってこれ入れます。
= f.text_field :postcode
= f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, include_blank: true
= f.text_field :address_city
= f.text_field :address_street
= f.text_field :address_building
県だけセレクト、モデルから直で県が取得できます。
###5.jQueryでjpostalを使おう!
controller作ればcoffeeファイル出来ます。
app/assets/javascripts/user.coffee
$ ->
$("#user_postcode").jpostal({
postcode : [ "#user_postcode" ],
address : {
"#user_prefecture_code" : "%3",
"#user_address_city" : "%4",
"#user_address_street" : "%5%6%7"
}
})
最後params作って完了!
def create
params.require(:user).permit(:postcode, :prefecture_name, :address_city, :address_street, :address_building)
end