郵便番号の自動入力を実装したよ！

こんにちは、なかにしです。
今回は郵便番号の自動入力を実装していこうと思います。

フォームで郵便番号を打ち、「検索」を押すと自動で入力してくれるアレです。

どうやるのかなーと気になっていたので、調べながら実装してみました！

やり方の概要
フォームを作る
使用するプラグイン
動作条件
実装
動作確認
おまけ：都道府県などの切り分け
おわりに

やり方の概要

①フォームを作る。
②プラグインを入れる。

これだけです。めっちゃお手軽！

フォームを作る

今回はサンプルなので、
テキトーにHTMLで作ります。

▽こんな感じ

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
  </head>

  <body>
    <form>
      <label for="post-code">郵便番号:</label>
      <input id="post-code" type="text" class="p-postal-code"><br>

      <label for="address">住所:</label>
      <input id="address" type="text" class="p-postal-code"><br>
    </form>
  </body>

</html>

▽簡素なフォームができました。

使用するプラグイン

郵便番号の自動入力プラグインは主に3つあります。

①zip2addr
Jquery + JS で作成されています。

②AjaxZip3
JSのみで動作します。

③YubinBango
JSのみで動作します。
②と制作者は同じです。半角に対応する等、アップデートされています。

今回は「③YubinBango」を使っていきます！
こちらを参考にして進めていきます。

動作条件

「YubinBango」はフォームやdivタグに「”h-adr”」クラスをつけることにより、自動入力機能をOnにすることができます。

が、それだけで動作するわけではありません。
動作には以下の条件が必要です。

①scriptタグでYubinBangoライブラリが読み込まれている
②formタグのclassの中に「h-adr」が含まれている
③formタグの中で「p-country-name」が Japan に指定されている
④郵便番号入力欄のclassで「p-postal-code」が含まれている
⑤住所欄のclassで「p-region」「p-locality」「p-street-address」「p-extended-address」が含まれている

文章だけだとよく分からないので実践していきます！

実装

①からやっていきます！
下記のscriptタグを配置します。

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

②の通りフォームに「h-adr」クラスをつけます。

▽現状

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  </head>

  <body>
    <form class="h-adr">
      <label for="post-code">郵便番号:</label>
      <input id="post-code" type="text" class="p-postal-code"><br>

      <label for="address">住所:</label>
      <input id="address" type="text" class="p-postal-code"><br>
    </form>
  </body>

</html>

▽③国をJapanにするため、
以下コードを設置します。

<span class="p-country-name" style="display:none;">Japan</span>

ユーザーに見せる必要もないので「display:none」で非表示にしていますが、見せたい方は外して下さい。

④郵便番号のinputタグに、
「p-postal-code」のクラスを付与します。

▽現状

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  </head>

  <body>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      <label for="post-code">郵便番号:</label>
      <input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <label for="address">住所:</label>
      <input id="address" type="text" /><br>
    </form>
  </body>

</html>

⑤郵便番号を基に取得してきた住所を表示したい場所に、「p-region」「p-locality」「p-street-address」「p-extended-address」のクラスを付与します。

▽今回は「住所」の
inputタグに表示するようにしました。

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  </head>

  <body>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      <label for="post-code">郵便番号:</label>
      <input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <label for="address">住所:</label>   // ↓ここで表示できるようにクラスを付与！
      <input id="address" type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
    </form>
  </body>

</html>

完成です。簡単！

動作確認

いい感じですね！

これで完成ですが、見やすさを考慮すると、
「住所」でまとめるのではなく
「都道府県」「市町村名」などに切り分けた方がいい場合もありますので、やってみます。

おまけ：都道府県などの切り分け

やり方は単純です。

「住所」の input につけたクラスの
「p-region」「p-locality」「p-street-address」「p-extended-address」が
「都道府県」「市町村名」「町域」「それ以降の住所」に対応しているので
それぞれ input を作って切り分けるだけです。

▽こんな感じ

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
    <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  </head>

  <body>
    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      <label for="post-code">郵便番号:</label>
      <input type="text" class="p-postal-code" size="8" maxlength="8"><br>

      <label>都道府県：<input type="text" class="p-region" /></label><br>
      <label>市町村名：<input type="text" class="p-locality" /></label><br>
      <label>町域：<input type="text" class="p-street-address" /></label><br>
      <label>それ以降の住所：<input type="text" class="p-extended-address" /></label>
    </form>
  </body>

</html>

▽動作確認