0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせ今日は郵便番号から住所を自動入力するスクリプトの紹介します。
問い合わせフォーム等で住所の入力が必要な時に、郵便番号から自動的に住所が入力されるのってよく見ますよね。
ホームページ制作の仕事をしていると、結構な確率でお客さんにを入れて欲しいと言われるので、最近はほぼ全員に入れるようにしています。
他の制作会社さんも、また自分でホームページを作ろうと思っている方も、この郵便番号から自動的に住所を入力する方法ってやりたい思ってる人多いと思うので、
弊社でも使っている非常に簡単に設置できて優秀なスクリプトを紹介しますね。
以前からこの仕組みを入れたいと思っていた人も多いかもしれません。
でも難しそうだなぁと思ってなかなかできなかった人も多いのではないでしょうか。
実はむちゃくちゃ簡単にできるので、これを機に導入してみてください。
郵便番号から住所を自動入力するスクリプト「yubinbango」
「yubinbango」というもので、
こちらのサイトからソースコードをダウンロードできます。
yubinbango.js
設置方法は非常に簡単なので、
ダウンロードURLに書かれている説明だけでも十分に設置できると思いますが、
ここでも簡単に紹介しておきましょう。
設置方法
jsファイルをダウンロード
まずはファイルのダウンロードです。
yubinbango.js
より、ファイルをダウンロードしてください。
この中で使用するのは
yubinbango.js
だけです。
スクリプトの読み込み
さて、次に先ほどダウンロードしたファイルから
yubinbango.js
を任意の場所においてください。
例えば、
「/js/yubinbango.js」
みたいな感じですね。
そして、使用したいHTMLファイル内で、
このスクリプトを読み込みましょう。
<script src="./js/yubinbango.js" charset="UTF-8"></script>
githubにあがっているものを直接参照するならこんな感じ。
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
フォームの設定
これでスクリプト自体は読み込めたはずなので、あとは実際に自動入力を実装します。
これはテンプレのようなコードがあるのでまずこれを設定しましょう。
<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
〒<input type="text" class="p-postal-code" size="8" maxlength="8"><br>
<input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
</form>
たったこれだけ！！
スクリプト何も書いてないじゃん！って思いますが、
クラス名を見ていろいろと勝手に処理してくれてます。
入力する郵便番号を分けてみよう
先ほど設置したテンプレで、郵便番号を入力する部分を分けたいと思ったかもしれません。
これも超簡単です。
単純に、クラス名をそのままで郵便番号入力欄を２つにするだけ。
これもテンプレのように覚えてもらったら良いかと思いますが、パラメーターが設定された箇所に入力したものが自動的に判定されて利用されます
<form 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-postal-code" size="8" maxlength="8"><br>
<input type="text" class="p-region p-locality p-street-address p-extended-address" /><br>
</form>
はい、これも簡単でしたね。
何も考えなくても、クラス名のルールだけ守っていたらいいんです。
住所欄を分けてみよう
住所を分けたいっていう場合もあるでしょう。
住所に関する入力欄はこのようになってましたね。
<input type="text" class="p-region p-locality p-street-address p-extended-address" />
クラス名の部分をそれぞれ分けるだけで対応できます。
class=”p-region p-locality p-street-address p-extended-address”
単純にすべて分けてみましょう。
<form 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-postal-code" size="8" maxlength="8"><br>
<input type="text" class="p-region" /><br>
<input type="text" class="p-locality" /><br>
<input type="text" class="p-street-address" /><br>
<input type="text" class="p-extended-address" /><br>
</form>
分けるのは簡単でしたね。
例えば、都道府県だけ分けたければこんな感じです。
<form 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-postal-code" size="8" maxlength="8"><br>
<input type="text" class="p-region" /><br>
<input type="text" class="p-locality" /><br>
<input type="text" class="p-region" /><br>
<input type="text" class="p-locality p-street-address p-extended-address" /><br>
</form>
必要な入力項目の数だけinputタグを用意して、入力させたいクラス名を入れるだけですね。
都道府県をセレクトボックスで用意しておくと、入力をセレクトボックスにすることもできます。
どうでしたか、非常に簡単だったと思います。
郵便番号分ける、住所を分けるなど自分で使っているフォームの入力スタイルというのがそれぞれあると思います。
一度作ったものをテンプレートして残しておくと、今後はコピペで簡単に自動住所入力は設置できるようになります。
ぜひ使ってみてくださいね。
