45
54

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 5 years have passed since last update.

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

Last updated at Posted at 2016-04-19

はじめに

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

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

※補足
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向上をさせるためには住所自動入力といった、さりげない気遣いも必要だと思います。
もし参考になる方がいましたら幸いです。

45
54
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
45
54

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?