読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

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

Rails入門 UI/UX

f:id:nipe880324:20150110203636j:plain:w480
Photo by Flickr: Bev Goodwin's Photostream


郵便番号を入力することで、自動的に住所を入力できるjQueryプラグインのjpostal.jpの導入方法と使い方について説明します。

動作確認

  • Rails 4.2.0
  • jquery.jpostal.js 2.2

目次

  1. 郵便番号を自動入力するjQueryプラグインの簡単な比較
  2. jquery.jpostal.js をインストール
  3. jquery.jpostal.js を使う
  4. プルダウンの都道府県に対応する

1. 郵便番号を自動入力するjQueryプラグインの簡単な比較

2. jquery.jpostal.js をインストール

jpostal.jp - GitHubからjquery.jposta.jsというファイルを取得し、vendor/assets/javascripts/に配置します。


次にassets/javascripts/application.jsjquery.jpostalをロードするように記載します。

//= require jquery.jpostal 

3. jquery.jpostal.js を使う

次のような「郵便番号入力欄が1つ」で、「都道府県、市町村、番地、建物」となっている画面に導入してみます。
f:id:nipe880324:20150110203958j:plain:w480

CoffeeScriptでjpostalメソッドを呼び出します。
postcodeオプションに「郵便番号の入力フィールドのID属性」を指定します。
また、addressオプションに「自動入力される入力フィールドのID属性」を指定します。

# CoffeeScript
$ ->
  $("#address_zipcode").jpostal({
    # 郵便番号の入力欄が1つの場合
    # 111-1111と1111111のどちらの入力形式でも住所を自動入力してくれる
    postcode : [ "#address_zipcode" ],

    # 郵便番号の入力欄が3桁-4桁で分かれている場合
    # postcode : [ '#zipcode1', '#zipcode2' ]



    # 入力項目フォーマット
    #   %3  都道府県
    #   %4  市区町村
    #   %5  町域
    #   %6  大口事業所の番地
    #   %7  大口事業所の名称
    address  : {
                  "#address_prefecture_name" : "%3", # 都道府県が入力される
                  "#address_city"            : "%4%5", # 市区町村と町域が入力される
                  "#address_street"          : "%6%7" # 大口事務所の番地と名称が入力される
                }
  })


これで郵便番号を入力すると、自動的に住所が入力されます。
f:id:nipe880324:20150110204302j:plain:w480


しかし、「都道府県」がうまく入力されていません。
これは、プルダウンのoptionのvalue属性がPrefectureのidを表示しており、jpostal.jsで取得した都道府県は文字列(東京都、埼玉県など)のため、value属性がマッチせず、自動で選択されません。

# Railsのビューのコード
<%= f.label :prefecture_id, "都道府県" %><br>
<%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, include_blank: true  %>


# 作祭されたHTMLソース
<label for="address_prefecture_id">都道府県</label><br>
<select name="address[prefecture_id]" id="address_prefecture_id">
  <option value=""></option>
  <option value="1">東京都</option>
  <option value="2">埼玉県</option>
  <option value="3">神奈川県</option>
  <option value="4">千葉県</option>
  <option value="5">茨城県</option>
  <option value="6">群馬県</option>
</select>


そのため、プルダウンのoptionのvalue属性をidから都道府県に変更する必要があります。



プルダウンの都道府県に対応する

まず、ビューのvalue属性をIDから都道府県にします。

# Railsのビューのコード
<%= f.label :prefecture_id, "都道府県" %><br>
<%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, include_blank: true  %>


# 作祭されたHTMLソース (value属性がIDから都道府県名になっている)
<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>


次に、このソースコードに対応するために、モデルにprefecture_nameメソッドを定義します。こうすることで、ビューやコントローラーからprefecture_nameを扱えるようになります。

# app/model/address.rb
class Address < ActiveRecord::Base
  belongs_to :prefecture

  def prefecture_name
    prefecture.try(:name)
  end

  def prefecture_name=(prefecture_name)
    self.prefecture = Prefecture.find_by(name: prefecture_name)
  end
end


最後に、StrongParametersにprefecture_nameを追加しておきます。

# app/controllers/addresses_controller.rb

private
    def address_params
      params.require(:address).permit(:zipcode, :prefecture_name, :city, :street, :building)
    end


では、郵便番号を入力してみましょう。「都道府県」も自動で入力されるようになりました。
もちろん、作成、更新なども問題なく行えます。
f:id:nipe880324:20150110205249j:plain:w480


以上です。