ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

郵便番号で住所自動入力したい!YubinBango.jsの使い方【JavaScript】

郵便番号で住所自動入力したい!YubinBango.jsの使い方【JavaScript】

「郵便番号入力だけで簡単に住所を自動できる方法を知りたい」
「JavaScriptで住所自動入力させているけど、もっと簡単な方法がないかさがしている」

悩み

こんな悩みにお答えします。

  • 郵便番号検索ライブラリ「YubinBango」の使い方
  • 「YubinBango」のときのサンプルコード
  • WordPressプラグイン「MW WP Form」のときのサンプルコード
  • WordPressプラグイン「Contact Form 7」のときのサンプルコード

この記事ではこんなことがわかります。

目次
  1. YubinBango とは
  2. 設定方法
    1. ライブラリを読み込む
    2. 入力欄の親要素にclass指定に h-adr を指定する
    3. 国名(p-country-name) を指定する
    4. 郵便番号入力欄にclass指定する
    5. 住所入力欄にclass指定する
  3. デモ
    1. 基本設定
    2. 住所欄を分ける設定(都道府県input)
    3. 住所欄を分ける設定(都道府県select)
    4. 住所欄を分ける設定(複数設置)
  4. デモ (WordPressプラグインの場合)
    1. MW WP Form
    2. Contact Form 7
  5. まとめ

YubinBango とは

YubinBangoとは、郵便番号を入力するだけで住所を検索、出力してくれるJavaScriptライブラリです。
これまでよく使用していた「ajaxzip3」も便利でしたが、さらに便利、簡単になりました。
formに使うタグにclassを設定するだけでJavaScriptを書く必要がありません。

yubinbango/yubinbango

Contribute to yubinbango/yubinbango development by creating an account on GitHub.

設定方法

ライブラリを読み込む

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

入力欄の親要素にclass指定に h-adr を指定する

入力欄の親要素にclass="h-adr"を指定します。

GitHubの解説には「formタグのclass指定の中に h-adr が含まれていること」とありますが、必ずしもformタグでなくてもよいようです。
同じフォームに複数住所を入力する場合は注意が必要です。

<form class="h-adr">

</form>

<div class="h-adr">

</div>

国名(p-country-name) を指定する

class="h-adr"の子要素に国名(p-country-name) が Japan に指定します。

多くの場合は、住所入力に日本まで必要ないので非表示の指定でいいと思います。

//日本国内のみの場合はこちら
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>

</div>

//多言語サイト等で国名も必要な場合
<div class="h-adr">
  <input type="hidden" class="p-country-name" value="Japan">

</div>

郵便番号入力欄にclass指定する

郵便番号入力欄のclass指定の中に p-postal-code を指定します。
多くの場合は、住所入力に日本まで必要ないので非表示の指定でいいと思います。

//入力欄ひとつの場合
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="8" maxlength="8">

</div>

//入力欄ふたつの場合
<div class="h-adr">
  <span class="p-country-name" style="display:none;">Japan</span>
  〒<input type="text" class="p-postal-code" size="3" maxlength="3">
  <input type="text" class="p-postal-code" size="4" maxlength="4">

</div>

住所入力欄にclass指定する

住所欄のclass指定の中に、都道府県名(p-region)、市町村区(p-locality)、町域(p-street-address)、以降の住所(p-extended-address) をそれぞれ指定します。

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

  〒<input type="text" class="p-postal-code" size="8" maxlength="8">

  <input type="text" class="p-region p-locality p-street-address p-extended-address">
</div>

デモ

基本設定

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

  <dl>
    <dt>郵便番号</dt>
    <dd>〒<input type="text" class="p-postal-code" size="8" maxlength="8" /></dd>
  </dl>

  <dl>
    <dt>住所</dt>
    <dd>
      <input type="text" class="p-region p-locality p-street-address p-extended-address">
    </dd>
  </dl>
</form>

住所欄を分ける設定(都道府県input)

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

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        <input type="text" class="p-postal-code" size="3" maxlength="3" />
      </span>
      <span>-</span>
      <span>
        <input type="text" class="p-postal-code" size="4" maxlength="4" />
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      <input type="text" class="p-region" readonly />
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      <input type="text" class="p-locality" readonly />
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      <input type="text" class="p-street-address" />
    </dd>
  </dl>

  <dl>
    <dt>以降の住所</dt>
    <dd>
      <input type="text" class="p-extended-address" />
    </dd>
  </dl>
</form>

住所欄を分ける設定(都道府県select)

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

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        <input type="text" class="p-postal-code" size="3" maxlength="3" />
      </span>
      <span>-</span>
      <span>
        <input type="text" class="p-postal-code" size="4" maxlength="4" />
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      <select class="p-region">
        <option value="">-- 選択してください --</option>
        <option value="北海道">北海道</option>
        <option value="青森県">青森県</option>
        <option value="岩手県">岩手県</option>
        <option value="宮城県">宮城県</option>
        <option value="秋田県">秋田県</option>
        <option value="山形県">山形県</option>
        <option value="福島県">福島県</option>
        <option value="茨城県">茨城県</option>
        <option value="栃木県">栃木県</option>
        <option value="群馬県">群馬県</option>
        <option value="埼玉県">埼玉県</option>
        <option value="千葉県">千葉県</option>
        <option value="東京都">東京都</option>
        <option value="神奈川県">神奈川県</option>
        <option value="新潟県">新潟県</option>
        <option value="富山県">富山県</option>
        <option value="石川県">石川県</option>
        <option value="福井県">福井県</option>
        <option value="山梨県">山梨県</option>
        <option value="長野県">長野県</option>
        <option value="岐阜県">岐阜県</option>
        <option value="静岡県">静岡県</option>
        <option value="愛知県">愛知県</option>
        <option value="三重県">三重県</option>
        <option value="滋賀県">滋賀県</option>
        <option value="京都府">京都府</option>
        <option value="大阪府">大阪府</option>
        <option value="兵庫県">兵庫県</option>
        <option value="奈良県">奈良県</option>
        <option value="和歌山県">和歌山県</option>
        <option value="鳥取県">鳥取県</option>
        <option value="島根県">島根県</option>
        <option value="岡山県">岡山県</option>
        <option value="広島県">広島県</option>
        <option value="山口県">山口県</option>
        <option value="徳島県">徳島県</option>
        <option value="香川県">香川県</option>
        <option value="愛媛県">愛媛県</option>
        <option value="高知県">高知県</option>
        <option value="福岡県">福岡県</option>
        <option value="佐賀県">佐賀県</option>
        <option value="長崎県">長崎県</option>
        <option value="熊本県">熊本県</option>
        <option value="大分県">大分県</option>
        <option value="宮崎県">宮崎県</option>
        <option value="鹿児島県">鹿児島県</option>
        <option value="沖縄県">沖縄県</option>
      </select>
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      <input type="text" class="p-locality" readonly />
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      <input type="text" class="p-street-address" />
    </dd>
  </dl>

  <dl>
    <dt>以降の住所</dt>
    <dd>
      <input type="text" class="p-extended-address" />
    </dd>
  </dl>
</form>

住所欄を分ける設定(複数設置)

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

    <dl>
      <dt>郵便番号</dt>
      <dd>
        <span>〒</span>
        <span>
          <input type="text" class="p-postal-code" size="3" maxlength="3" />
        </span>
        <span>-</span>
        <span>
          <input type="text" class="p-postal-code" size="4" maxlength="4" />
        </span>
      </dd>
    </dl>

    <dl>
      <dt>都道府県</dt>
      <dd>
        <input type="text" class="p-region" readonly />
      </dd>
    </dl>

    <dl>
      <dt>市町村区</dt>
      <dd>
        <input type="text" class="p-locality" readonly />
      </dd>
    </dl>

    <dl>
      <dt>町域</dt>
      <dd>
        <input type="text" class="p-street-address" />
      </dd>
    </dl>

    <dl>
      <dt>以降の住所</dt>
      <dd>
        <input type="text" class="p-extended-address" />
      </dd>
    </dl>
  </div>

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

    <dl>
      <dt>郵便番号</dt>
      <dd>
        <span>〒</span>
        <span>
          <input type="text" class="p-postal-code" size="3" maxlength="3" />
        </span>
        <span>-</span>
        <span>
          <input type="text" class="p-postal-code" size="4" maxlength="4" />
        </span>
      </dd>
    </dl>

    <dl>
      <dt>都道府県</dt>
      <dd>
        <input type="text" class="p-region" readonly />
      </dd>
    </dl>

    <dl>
      <dt>市町村区</dt>
      <dd>
        <input type="text" class="p-locality" readonly />
      </dd>
    </dl>

    <dl>
      <dt>町域</dt>
      <dd>
        <input type="text" class="p-street-address" />
      </dd>
    </dl>

    <dl>
      <dt>以降の住所</dt>
      <dd>
        <input type="text" class="p-extended-address" />
      </dd>
    </dl>
  </div>
</form>

デモ (WordPressプラグインの場合)

MW WP Form

MW WP Form
郵便番号
-
都道府県
市町村区
町域
<div class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        [mwform_text name="postal-code1" class="p-postal-code" size="3" maxlength="3"]
      </span>
      <span>-</span>
      <span>
        [mwform_text name="postal-code2" class="p-postal-code" size="4" maxlength="4"]
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      [mwform_text name="region" class="p-region"]
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      [mwform_text name="locality" class="p-locality"]
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      [mwform_text name="street-address" class="p-street-address"]
    </dd>
  </dl>
</div>

Contact Form 7

Contact Form 7

郵便番号




-


都道府県
市町村区
町域
<div class="h-adr">
  <span class="p-country-name" style="display: none;">Japan</span>

  <dl>
    <dt>郵便番号</dt>
    <dd>
      <span>〒</span>
      <span>
        [text postal-code1 class:p-postal-code size:3 maxlength:3]
      </span>
      <span>-</span>
      <span>
        [text postal-code2 class:p-postal-code size:4 maxlength:4]
      </span>
    </dd>
  </dl>

  <dl>
    <dt>都道府県</dt>
    <dd>
      [text region class:p-region]
    </dd>
  </dl>

  <dl>
    <dt>市町村区</dt>
    <dd>
      [text locality class:p-locality]
    </dd>
  </dl>

  <dl>
    <dt>町域</dt>
    <dd>
      [text street-address class:p-street-address]
    </dd>
  </dl>
</div>

まとめ

「YubinBango」の設定方法について解説しました。

現在「AjaxZip3」を使用しているサイトにあえて「YubinBango」に切り替えていく必要はありませんが、今後、新しいWebサイトをつくるときには、「YubinBango」を使っていったほうがいいと思います。

Web制作を効率化したい!よく使うおすすめJavaScript、jQueryプラグイン、ライブラリ 9選

Web制作を効率化したいですか?この記事では、Web制作でよく使うスライダー、スクロールエフェクト、モーダルウィンドウ、郵便番号から住所を自動入力などに便利なJavaScript、jQueryのプラグイン、ライブラリを紹介しています。ぜひご覧ください。