郵便番号による住所自動入力機能について

13139 ワード
jQuery 初心者エンジニア Rails JavaScript JavaScript テキストリンク

こんにちは、たにーです。

今回は、郵便番号を入力すると
自動的に住所が入力される機能についてです。

前提

  • railsでのアプリケーション
  • deviseにて新規登録画面を作成済み。
  • userモデルに郵便番号と住所のカラムがあること。
    （今回は、postcode,addressです。）

参考画像

モデルのカラム(schemaファイル)

app/db/schema.rb

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

コード

devise/registrations/new.html.erb
<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を追加します。

Gemfile
gem 'jp_prefecture' 
gem 'jquery-rails'

そのあとは、ターミナルでインストールを実行。

terminal
 $ bundle install (bundleだけでもOK)

簡単ですね。次にいきましょう。

jquery.jpostal.jsを導入

次に、下記のgithubへ移動。

右にあるCodeボタンを選択し、DownloadZIPをクリック。ダウンロードが進みます。

下記が該当するファイルです

その後、ダウンロードしたファイルの中から、
jquery.jpostal.jsのみをapp/assets/javascriptsに格納します。
ドラッグで簡単にコピー/移動できます。

application.jsの編集

app/assets/javascriptsに格納されているapplication.jsを開いて編集します。

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} を追加すると解消できました。

application.html.erb
<%= link_to '会員登録', '/customers/sign_up',  data: {"turbolinks" => false} %>

完成

下記のようにできましたでしょうか？
もし、出来なかった場合、コメントにて教えていただけると助かります。

以上、たにーでした。

参考資料