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.

郵便番号から住所を自動で補完する機能。

Posted at

#概要
住所登録するときに郵便番号を入力すれば、自動で住所が出てくるやつ。
便利ですよね。
こんな感じです。
Image from Gyazo

#使うもの
・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入れよう!

Gemfile
gem 'jp_prefecture'
gem 'jquery-rails' 

bundleしましょう。

###3.mifrationファイルに住所系のカラムを入れよう!

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から取得できます。

user.rb
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作ってこれ入れます。

new.haml
    
    = 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

users.coffee
$ ->
  $("#user_postcode").jpostal({
    postcode : [ "#user_postcode" ],
    address  : {
                  "#user_prefecture_code" : "%3",
                  "#user_address_city"            : "%4",
                  "#user_address_street"          : "%5%6%7"
                }
  })

最後params作って完了!

controller
def create
  params.require(:user).permit(:postcode, :prefecture_name, :address_city, :address_street, :address_building)
end
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?