こんにちは、たにーです。
今回は、郵便番号を入力すると
自動的に住所が入力される機能についてです。
前提
- railsでのアプリケーション
- deviseにて新規登録画面を作成済み。
- userモデルに郵便番号と住所のカラムがあること。
(今回は、postcode,addressです。)
モデルのカラム(schemaファイル)
ActiveRecord::Schema.define(version: 2021_03_25_151319) do
create_table "users", force: :cascade do |t|
t.string "email", default: "", null: false
t.string "encrypted_password", default: "", null: false
t.string "reset_password_token"
t.datetime "reset_password_sent_at"
t.datetime "remember_created_at"
t.string "name"
t.string "postcode" #追加しました
t.string "address" #追加しました
~ 省略 ~
end
コード
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<%= f.label :名前 %><br />
<%= f.text_field :name, autofocus: true, autocomplete: "name" %>
</div>
<!-----------------------追加------------------------->
<div class="field">
<%= f.label :郵便番号 %><br />
<%= f.text_field :postcode, autofocus: true, autocomplete: "postcode"%>
</div>
<div class="field">
<%= f.label :住所 %><br />
<%= f.text_field :address, autofocus: true, autocomplete: "address" %>
</div>
<!-----------------------追加------------------------->
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
実装開始
流れは以下の通りです。
①gemの導入。(jp_prefectureとjquery-rails)
②jquery.jpostal.jsを導入
③application.jsの編集
②に関しては、下記のgithubを使用して進めますのでURLを貼っておきます。
gemの導入
最初に、Gemfileに2つのgemを追加します。
gem 'jp_prefecture'
gem 'jquery-rails'
そのあとは、ターミナルでインストールを実行。
$ bundle install (bundleだけでもOK)
簡単ですね。次にいきましょう。
jquery.jpostal.jsを導入
次に、下記のgithubへ移動。
右にあるCodeボタンを選択し、DownloadZIPをクリック。ダウンロードが進みます。
その後、ダウンロードしたファイルの中から、
jquery.jpostal.jsのみをapp/assets/javascriptsに格納します。
ドラッグで簡単にコピー/移動できます。
application.jsの編集
app/assets/javascriptsに格納されているapplication.jsを開いて編集します。
//= require rails-ujs <--削除
//= require jquery <--追加
//= require jquery_ujs <--追加
//= require activestorage
//= require turbolinks
//= require jquery.jpostal <--追加
//= require_tree .
$(function() {
$(document).on('turbolinks:load', () => { //turbolinks適応させないため
$('#user_postcode').jpostal({ // #フォームに付与されているid名を記載
postcode : [
'#user_postcode' // #フォームに付与されているid名を記載
],
address: {
"#user_address": "%3%4%5", // # 都道府県市区町村と町域が入力される
// # フォームに付与されているid名を記載
}
});
});
});
備考:フォームのIDの付与をみる方法
idなんて書いてないからわからない!
そんな時は、実際のWEBページを開いて、右クリック。
検証を選んで、ディベロッパーツールを開きましょう。
値を入力するコード(フォーム)を見てみると、idが書いてあるかと思います。
参考までに。
もし、上手く動かない場合
住所自動入力を設定した画面に遷移してリロードしないと郵便番号の自動入力がしない場合、
リンクの記述に data: {"turbolinks" => false} を追加すると解消できました。
<%= link_to '会員登録', '/customers/sign_up', data: {"turbolinks" => false} %>
完成
下記のようにできましたでしょうか?
もし、出来なかった場合、コメントにて教えていただけると助かります。
以上、たにーでした。