はじめに
ユーザーに住所を登録させたい時は頻繁にあると思います。
そんな時に逐一全ての住所を入れるのは面倒くさいと思うので、郵便番号を入れただけで自動で住所が入ってくれるようにしたいですよね。
今回は郵便番号を入力したら、自動で住所が入ってくれる方法を自分用まとめも兼ねて書いておこうと思います。
※補足
Railsでjpostal.jpを使って住所を自動入力する
という記事にほとんど書いてありますが、jp_prefectureを使うところだけ加筆しております。
今回使うもの
jquery.jpostal.js
郵便番号を入力すると、自動で住所を自動入力してくれるjQueryプラグインです。
都道府県コードと都道府県名を変換するGemです。
動作時の環境
- Rails 4.1
- jquery.jpostal.js 2.7
前提
基本的には以下を参照していればできると思います。
ただ上の記事にもありますが、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にメソッドを追加する
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向上をさせるためには住所自動入力といった、さりげない気遣いも必要だと思います。
もし参考になる方がいましたら幸いです。