Ruby開発未経験のJava/PHPエンジニアがRuby On Railsでお問い合わせフォームを作る:ajaxzip3対応編

@iwasaki 146views 更新:2015年8月18日

お問い合わせフォームといえば、郵便番号を入力すると自動的に住所が入るのありますよね。あれを対応してみます。

住所自動入力のライブラリはいくつかあるようです。

http://d.hatena.ne.jp/deeeki/20111006/zip_address_ajax_api

今回はajaxzip3を使ってみます。

詳しい使い方はこちらに載っています。

https://github.com/ajaxzip3/ajaxzip3.github.io

読み込み方は簡単

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

を設置するだけです。

全ページ読み込んでも問題なさそうなので、

app/views/layouts/application.html.erb

に追記してみました。

https://github.com/YoshiteruIwasaki/banana-mail/commit/be2e738c0001f2ee6004852dfa049f948893d8a7#diff-9599427925097c3c66f26ac1e0de5cadR13

次にこのAjaxの呼び方ですが、

app/views/inquiries/_form.html.erb

<%= f.text_field :zip, "onKeyUp" => "AjaxZip3.zip2addr(this,'','inquiry[prefecture]','inquiry[address1]')"

のように郵便番号入力欄のonKeyUpイベントとして呼び出します。

また、Ruby On Railsで都道府県をよろしく扱うgemファイルを公開してくださる方がいるので、今回はこれを使います。

http://avosalmon.hatenablog.com/entry/2014/05/17/%E3%80%90Rails%E3%80%91%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%82%92%E6%89%B1%E3%81%86gem

都道府県はデータベースに入れたり、自分で配列に入れたりする事が多いかと思いますが、その手間が減ります。

Gemfileに以下を追記します。

gem 'jp_prefecture'

インストールします。

gem install jp_prefecture

使えるようにします。

config/application.rb

require 'jp_prefecture'

都道府県のプルダウンをセットします。

app/views/inquiries/_form.html.erb

<%= f.collection_select :prefecture, JpPrefecture::Prefecture.all, :code, :name %>

ちなみにajaxzip3では北海道のコードは01になりますが、JpPrefectureでは1になるので、そのへんでちょっと問題が起きます。

解決方法については改めて考えることにします。

やった内容がこちら

https://github.com/YoshiteruIwasaki/banana-mail/commit/be2e738c0001f2ee6004852dfa049f948893d8a7#diff-9599427925097c3c66f26ac1e0de5cadR13

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません