Edited at

【Rails】 jpostal.jpとjp_prefectureを使って郵便番号で住所を自動入力するようにする

More than 3 years have passed since last update.


はじめに

ユーザーに住所を登録させたい時は頻繁にあると思います。

そんな時に逐一全ての住所を入れるのは面倒くさいと思うので、郵便番号を入れただけで自動で住所が入ってくれるようにしたいですよね。

今回は郵便番号を入力したら、自動で住所が入ってくれる方法を自分用まとめも兼ねて書いておこうと思います。

※補足

Railsでjpostal.jpを使って住所を自動入力する

という記事にほとんど書いてありますが、jp_prefectureを使うところだけ加筆しております。


今回使うもの

jquery.jpostal.js

郵便番号を入力すると、自動で住所を自動入力してくれるjQueryプラグインです。

jp_prefecture

都道府県コードと都道府県名を変換するGemです。


動作時の環境


  • Rails 4.1

  • jquery.jpostal.js 2.7


前提

基本的には以下を参照していればできると思います。

Railsでjpostal.jpを使って住所を自動入力する

ただ上の記事にもありますが、jquery.jpostal.jsだとvalueがidのままだと属性がマッチしないので、value="東京都"のように日本語でもうまく対応させる必要があります。

今回は、上記事で言うところの プルダウンの都道府県に対応するの部分です。

jp_prefectureをつかっている場合は以下のような手順を踏むので紹介します。

なおプルダウン都道府県のところ以外は元記事と同じ手順だったため割愛させていただきます。


手順


1. view側のvalueに都道府県名が入るようにする

  = f.label :prefecture_id, '都道府県'

= f.collection_select :prefecture_id, JpPrefecture::Prefecture.all, :id, :name

こうなっているかとおもいますが、これを

  = f.label :prefecture_name, '都道府県'

= f.collection_select :prefecture_name, JpPrefecture::Prefecture.all, :name, :name, include_blank: true

と変えます。

そうすると、HTMLでは

<label for="address_prefecture_name">都道府県</label><br>

<select name="address[prefecture_name]" id="address_prefecture_name">
<option value=""></option>
<option value="東京都">東京都</option>
<option value="埼玉県">埼玉県</option>
<option value="神奈川県">神奈川県</option>
<option value="千葉県">千葉県</option>
<option value="茨城県">茨城県</option>
<option value="群馬県">群馬県</option>
</select>

と表示されるかと思います。(address_のところはモデル名による)


2. View側に対応させるためにModelにメソッドを追加する


app/models/address.rb

class Address < ActiveRecord::Base

def prefecture_name
JpPrefecture::Prefecture.find(code: prefecture_id).try(:name)
end

def prefecture_name=(prefecture_name)
self.prefecture_id = JpPrefecture::Prefecture.find(name: prefecture_name).code
end
end


上のメソッドを追加。細かいコードの意味はREADMEに書いてあるのでそちらを参照ください。


3. Controllerのストロングパラメーターを修正する

都道府県のIDをpermitしていたところをprefecture_nameに変更します。下記のようなイメージです。(実際には郵便番号や市区名などカラムがいろいろ入る)

private

def address_params
params.requre(:address).permit(:prefecture_name)
end


おわりに

UX向上をさせるためには住所自動入力といった、さりげない気遣いも必要だと思います。

もし参考になる方がいましたら幸いです。