0120-899-952 
ホームページ制作YCOM
料金体系
制作について
制作実績
よくある質問
お問い合わせ郵便番号から自動で住所をフォームに入力してくれるスクリプト
ホームページで問い合わせや資料請求などのを作るときに、郵便番号を入れると自動的に住所が入る仕組みって便利ですよね。
あれってすごく難しいプログラミングが必要なんじゃないかなと思ってる人も多いと思うけれど、実はすでに配布されているスクリプトを使えばむちゃくちゃ簡単に実現できます。
今回は、郵便番号から自動的に住所を入力するためのスクリプトを紹介します。
ajaxzip3で簡単に住所の自動入力
今回使うスクリプトはajaxzip3というスクリプトでほとんどの人がこれ使ってると思われる有名なスクリプト。
「フォーム 郵便番号 住所」とかで調べたら大抵このスクリプトの紹介が出てくると思う。
このブログにも検索でたどり着いた人多いと思うけれど、検索時には他にもたくさん同じような記事があったと思います。
基本的に、郵便番号から住所を入れるスクリプトはこれでいいでしょう。
大雑把に書いておくと以下の２つで簡単に住所の自動入力ができます
- スクリプトを読み込む
- （下に書いてある）パターンをコピペして貼り付ける
つまり、コピペ２回で実装できるわけですね！
ajaxzip3で簡単に住所の自動入力
皆さんご存知の通りの、郵便番号を入れると自動的に住所は入ってくれる方法。
今回紹介するajaxzip3は、設置は簡単だしいろいろな方式に適用できるのでこれ１つあれば十分。
例えば、１番シンプルな郵便番号入れると自動的に住所は入るやつ。
都道府県と市区町村が分かれていてもちゃんと入れる事できます。
また、都道府県がコンボボックスなっていても自動的に選択されるという優れもの。
たいていの人が求めている動作ができてるでしょう。
しかもとりつけ超簡単なので、ぜひ入れてみてください。
ajaxzip3の使い方
じゃあここからはやりかたね。
ぐだぐだ説明しているので、手っ取り早くコードが欲しい人はここクリックしてください。
スクリプトの読み込み
今回は自分でスクリプトを組むわけではなく外部のスクリプトを使います。
外部からのスクリプトを使う場合っていうのは、たいていはそのスクリプトファイルをダウンロードしてホームページと同じサーバーにアップするか、公開されているURLに直接アクセスしてそのスクリプトを使うかのどちらかです。
いずれにしても、まずはこのスクリプトを読み込まないといけないので、<head>の中でスクリプトを読み込みましょう。
ファイルをダウンロードしてきて、自分のサーバーにアップして使う場合は、
<script type="text/javascript" src="js/ajaxzip3.js"></script>
スクリプトはここからダウンロードして下さい。
ajaxzip3
公開されているスクリプトを直接使う場合は
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
どちらでも好きな方で。
初心者は公開されているスクリプトを使うのがラクですね。
フォーム部分の作成
次に実際にフォームの部分を作っていきましょう。
まずは１番簡単な方法です。
最もシンプルで、郵便番号の欄と住所の欄の２つがあるこんな感じのフォームですね。
HTMLのコードはこんな感じになります。
そのままコピーして使ってもらってもいいです。
<form>
〒<input type="text" name="zip"/><br>
住所：<input type="text" name="address" />
</form>
フォームの要素それぞれが、
name=’zip’とかname=’address’
ってなってるところに注目。
これ、後で使いますので。
自動住所入力の実装
ここからが理解してほしいところで、といってもそんなに難しくは無いのですが。
スクリプトの動きを考えたときに、
・郵便番号のデータをとってくる
・それを変換して住所の欄に書き込む
って処理がされるんだけれど、その時に必要なのが郵便番号がどこに書かれているか、変換した住所をどこに書けばいいのかです。
フォームの構成要素にはnameという属性を設定することができて、ajaxzip3ではそのname属性を手掛かりに郵便番号から住所を自動入力します。
今回の場合だと、先ほども書いたけれど
name=’zip’とかname=’address’
がその手掛かりになるものです。
あと、変換のタイミングについて。
プログラムを動かすタイミングは郵便番号をキーボードで打ち込み終わったとき。
ただ、打ち込みが完了したかどうかは厳密にはわからないので、キーボードを離したタイミングで住所変換を試みるのがいい。
なので、その場合はonkeyupというイベントを利用して、
onKeyUp="AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字);"
のように書く。
上の書き方はこのajaxzip3を使うときのフォーマットなのでそのまま利用しましょう。
その具体的な話がここからです。
郵便番号の入力時に処理を行うために、これらを郵便番号の入力欄に設置します。
<form>
〒<input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字);" /><br>
住所：<input type="text" name="address" />
</form>
この場合だと、name=’zip’の要素でキーボードを押して話したタイミングで住所変換を試みてねっていう指定です。
設定としてはたったこれだけなんだけれど、もちろんこのままじゃ動かない。
onKeyUp="AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字);"
を動くように設定してみよう。
AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字)
の日本語になっている部分をそれぞれ設定しなければいけない。
引数というんだけれど、実際には４番目までしか使わないことが多いと思うので、
AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村)
これで覚えておいてもいいです。
郵便番号はname=’zip’で住所はname=’address’だったよね。
なので、それらを当てはめればいいので、
AjaxZip3.zip2addr(‘zip’, ”, ‘address’, ‘address’)
こんな感じになる。
使うときはコピペでいいのですが、場合によってはこの辺のパラメータをいじらないといけないこともあるので、なんとなくでも理解しておけばいいと思います。
で、最終的にこんな感じのコードになります。
<form>
〒<input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr('zip', '', 'address', 'address');" /><br>
住所：<input type="text" name="address" />
</form>
いろいろな自動住所入力のパターン
では、実際にいくつかのパターンのコードを紹介するので、コピペでそのまま使ってください。
郵便番号 + 住所 のシンプルなパターン
先ほど紹介したシンプルなパターンです。
<form>
〒<input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr('zip', '', 'address', 'address');" /><br>
住所：<input type="text" name="address" />
</form>
郵便番号２枠 + 住所 のパターン
郵便番号を分けたパターンです。
AjaxZip3.zip2addr(‘zip1’, ‘zip2’, ‘address’, ‘address’);
郵便番号の取得場所が2カ所になっていることをあらわしています。
<form>
〒<input type="text" name="zip1" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address', 'address');" /> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address', 'address');" /><br>
住所：<input type="text" name="address" />
</form>
郵便番号２枠 + 都道府県 + 市区町村 のパターン
都道府県とその他を分けましょう。
AjaxZip3.zip2addr(‘zip1’, ‘zip2’, ‘address1’, ‘address2’);
自動入力される先が、それぞれの場所に指定されています。
<form>
〒<input type="text" name="zip1" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /><br>
住所：<input placeholder="都道府県" type="text" name="address1" /><input placeholder="市区町村" type="text" name="address2" />
</form>
郵便番号２枠 + 都道府県（選択） + 市区町村 のパターン
<form>
〒<input type="text" name="zip1" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /><br>
住所：
<select name="address1">
<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>
<input placeholder="市区町村" type="text" name="address2" />
</form>
郵便番号２枠 + 都道府県（都道府県コード） + 市区町村 のパターン
プルダウンメニューの自動的な選択は、option要素のvalue属性を見て判断しています。
さっきの例だと、
<option value="福岡県">福岡県</option>
このようになっていたので、このvalueの値を見て自動的に選択されていました。
ajaxzip3にはもう一つの指定方法があって、それは「都道府県コード」を使います。
全国地方公共団体コード – Wikipedia
このように公に決められた都道府県とそれに対応する数字があります。
多くのシステムでは都道府県の管理をこのコードに従って管理しているところも多く、フォームをDBなどと絡めて使う場合などは、都道府県コードで値を渡せるこの仕様は非常に便利です。
select属性のvalue値が変わるだけで、その他は同じ。
<form>
〒<input type="text" name="zip1" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1', 'zip2', 'address1', 'address2');" /><br>
住所：
<select name="address1">
<option value="">-- 選択してください --</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
<option value="08">茨城県</option>
<option value="09">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</select>
<input placeholder="市区町村" type="text" name="address2" />
</form>
これらのパターンを使えれば大抵の場合に対応できると思います。
実際これを覚えてなくても、そういえばここで書いてあったらと思ってもらえたらいいと思います。
ajaxzip3で調べたら、このサイトじゃなくてもたくさんわかりやすいサイトが出てきますからね。
自分もこうやってブログで書きながら、実際に使うときは過去のコードを使いまわしたり、紹介サイトを参考にしたり実際に覚えているわけじゃありません。
今回ブログ記事にしたことで、アウトプットの過程でさすがに覚えちゃいましたけど。ｗ
郵便番号から住所を自動入力するっていうのは、お客さんからのニーズも非常に高くて知っておいた方がいい。
すごく便利な機能にもかかわらず、設置はそんなに難しくないからね。
シンプルな問い合わせフォームとかだとコピペで簡単に設置できますので、ぜひ使ってください。
久しぶりにブログを再開しています。
記事を書いてもすぐには成果は出ないけど、ブログを休んでいるうちにまたアクセスがどんどん増えてくるんですよね。
それを見て、やっぱりやっておかなければ！という気分になってこうやってまたまた再開。
最近はPythonの勉強していて、勉強時間を午前中に使っているのでなかなかブログを書く時間がなかったんだけれど、そんな中でも少しでもちゃんと時間を捻出して書いていこうと思います。
SEOということもあるけれど、自分のアウトプットの場所をちゃんと持っておくというのは今後大切になりますからね。
Twitterもやってますので、よろしくお願いします。
@hachidaime
自分のブログのアクセスを分析してると、やっぱり何かを紹介しているページや、技術的な記事がアクセス多いよね。
本来やっていきたい、SEOとか集客とかその辺の記事もどんどん人を集めていければいいと思うけれど、わかりやすく検索対象になりやすいのはやはりこういった技術的な記事です。
だいたい困ったときに検索とかすることが多いし、特に具体的な検索のキーワードが決まっているものは上位に入るとアクセスが増えるよね。
ということで今回はそれに則って技術的な記事を書いてみました。
Pythonは「機械学習=Python」というイメージで始めたんだけど、Pythonを始めてみるとPythonの魅力に結構はまってきてます。
Pythonはデータを扱うのに非常に得意なので、分析とかに向いている。
最近ではお客さんのホームページのアクセスの解析とかにも利用したりしてます。
自分は統計学を最近勉強したりしてるので、それもPythonでプログラミングしてみたりと、題材をいろいろと実践に絡めてやっているのでなかなか面白いです。
自分が今読んでいるPythonの本はこちら。
どちらもわかりやすくて優良な書籍ですね。
これらの本は、まずはツールとして使えるようになるというための本。
入口だけれどここがとっても重要で、このツールをいかに使いこなせるかっていうのがキーですね。
まずは、Pythonのプログラムを使いこなせるっていうところがスタートなのでがんばって勉強しています。
