Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@kanta0507

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

More than 1 year has passed since last update.

概要

住所登録するときに郵便番号を入力すれば、自動で住所が出てくるやつ。
便利ですよね。
こんな感じです。
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
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?