郵便番号から住所自動入力の商用版サイトです。
By ピエールソフト 2012.2.18
htmlに1行追加で 住所入力を自動化 できます。
 ◎利用数:9,013 サイト
 ◎本日の(類推)アクセス数:8,063 回
世界一の操作性と信頼性を目指して | ピエールソフト
世界一の操作性と信頼性を目指して!,180,60, 20px,#ffffff,800 ピエールソフト, 400,110,24px,#ffffff,2000

■住所自動入力は何れを選択しますか?

 (e)EC-CUBEをお使いならプラグインへ

 (j)jqueryで利用する場合もプラグインへ

 (w)Wordpressをお使いならプラグインへ

 (1)簡単で無料なら「絶対に当システム」

 (2)安全性と信頼性の高いもの(有償)へ

 (3)安全性、信頼性とスピード(有償)へ

※全てが郵番の複数地域対応サポートです。

 ★★ZipAddrx.jsの動作説明はこちらです。


郵便番号 → 住所自動入力の概説

■特長
(1)一般的なフォームへ簡単に設置できる。
(2)利用者の操作性が向上する。
(3)郵番が複数地域対応でも処理できる。
 (複数地域対応は、1,548箇所もあります)

■それではデモを開始します。
・郵便番号欄に「1010021」と入力します。
 →住所が自動入力されます。

・次に「438-0078」と入力します。
 →ガイダンス画面選択で一意となります。

・最後に郵便番号欄へ「m」と入力します。
 →表示された地図上で自宅をクリック。
 →番地までを自動入力します。

 住所自動入力のデモ(3) 

郵便番号
都道府県
住所
誕生日

★[更新]でガイダンス 2 or 3(標準)を切替。


[ポイント]
▼サポート対象は、PCとスマートフォン。
▼当然ですがSSL対応です。
▼郵番簿は郵便事業株式会社様データ利用。
(月初に更新しています)
▼郵便番号簿の作成・保守は不要です。
▼郵番の区切り'-'はあってもなくても良い。
▼7桁入力又はガイダンス選択で確定する。
▼カスタマイズはid名を合わせるだけ。
 →新規htmlは最初からid名を合わせる。
 →既存は見直し/オウンコーディング。
▼オウンコーディングで色々な拡張可能。
▼どのようなhtmlでも適用が可能です。
▼System設計思想はhtmlに触らず対応。

▲ページの先頭へ


◎ZipAddrx.js の利用方法

【 事前準備 】

(0)Wordpress(含Welcart)、EC-CUBE、でお使いの場合は、絶対にプラグインが便利です。

(1)htmlに次の何れかのライブラリ(javascript)を、1行だけ追加定義して下さい。

<head>

[信頼性の向上版]‥‥Googleサービス閉鎖のリスクがあります。 ‥‥ 2015.06.10 追加
<script src="https://zipaddr.github.io/zipaddrx.js" charset="UTF-8"></script> ‥‥ 両方で利用可能。


[スピード・アップ版] ‥‥ 内容は上記と同じ。
<script src="https://zipaddr.com/js/zipaddrx.js" charset="UTF-8"></script>

</head>

(2)htmlのid名をライブラリのid名に合わせて下さい。(最大6箇所に設定可能です、‥2012.8.18 追加)‥‥2013.11.06 制約を解除しました。

郵便番号欄: <input ~ id="zip"  ~  />
(下3桁): <input ~ id="zip1"  ~  /> ‥‥ 定義がある場合。
都道府県欄: <select~ id="pref" ~  </select>  / <input文でも可能となりました。‥2013.2.9 追加
市区町村欄: <input ~ id="city" ~  />
地域欄  : <input ~ id="area" ~  />
番地欄  : <input ~ id="addr" ~  />
※住所データをセットする時に内容がキャリーオーバーされます。
 例えば、市区町村欄がなければ、地域欄に「市区町村+町名」の名称が入ります。

※住所入力を複数箇所に設置する場合は、zip,zip2~zip6、のそれぞれに対応した組み合わせで記述して下さい。
※正しく定義されていない場合は、「住所id名の定義がありません。」というアラートを出します。

(3)都道府県欄の記述方法について ‥ 2013.5.23 追加
  htmlに記述してある内容を自動解析して利用しています。
  特に、select文の場合は注意が必要です。
  ・<option value="">---選択</option>部分ですが、value="0"は value=""に して下さい。
  ・<option value="1">北海道</option> ok。
  ・<option value="01">北海道</option> 2桁にしてもok。
  ・<option value="北海道">北海道</option> 名称にしてもok。
  ・地域を限定した都道府県欄でもokです。
  ・<optgroup label="北海道・東北"> グループ化もok。
  ※対象となる都道府県コードは1~47の範囲です。

▲ページの先頭へ


◎ 利用事例(サンプル)

 ◆こちらにもサンプルがあります。(https://zipaddr.github.io/)‥(2017.01.10)

(1)郵便番号7桁の色々なパターン、又は 7箇所以上に設置して利用する。

   ■使用例デモ(1) ‥ 2013.2.8 改訂


(2)郵便番号を3桁-4桁に分けて利用する。 ※定義ミスが多いので必ず参照して下さい。

   ■使用例デモ(2)


(3)ガイダンス画面のデザインをオウンコーディングで小変更する。‥ 2013.3.6 追加

   ■使用例デモ(3)


(4)ガイダンス画面のデザインをcssで変えたい。

   ■使用例デモ(4)2014.9.1 修正

   ■使用例デモ(4-2)2014.9.23 追加


(5)スマートフォンで利用する。‥2012.10.05 追加
  ※自動判定しますので、従来のパラメータ類は全て不要です。

   ■使用例デモ(6)


(6)EC-CUBEで利用する。‥2012.7.22 追加

   ■EC-CUBEと当システムを連携させるプラグイン(Zipaddr)の提供を開始しました。(2013.12.20)

   ▼「EC-CUBE プラグインアワード 3.0」で優秀賞受賞しました。(2016.01.28)


(7)Wordpressショッピングカート「Welcart」で利用する。‥2013.09.25 追加
  当システムとDB連携させるWordpressプラグインの提供を開始しましたので、こちらを使いましょう。‥2013.12.12 追加
  基本的にWordpressなら( Welcart、contact form 7、mw wp form、WooCommerce、Trust Form、等)何でも利用できます。

   ■詳細はこちらを参照して下さい。(zipaddr2.comと共通) 非常に有効!


(8)ガイダンス画面のレイアウト変更する。‥2013.09.29 追加
  画面の表示レイアウトをブロック単位で変更(オウンコーディングによる)可能です。

   ■利用デモ(8)


(9)jqueryで利用する。‥2014.07.04 追加
  jqueryのプラグインから住所自動入力を操作します。

   ■利用例デモ(9)


(10)cs-cart標準の住所自動入力を拡張する。‥2015.12.01 追加
  アドオン(zipaddr_jp)を追加すると、住所の複数地域対応が可能となります。

   ■アドオンの概要説明&ダウンロード


(11)GoogleMap位置情報から住所を自動入力する。‥2016.09.03 追加
 ※GPSの精度、Google先生の記憶が性能に影響します。
  GPS位置情報を利用して住所(番地まで)を自動入力します。
 ・従来と同じ操作で、郵便番号欄に「m」と1文字を入力します。
 ・現在のGPS情報からMapを表示し、マップ上の位置をクリックすると番地までが自動入力されます。

   ■このデモはお試しの価値あり!



  -------------------------------------------------------------

(a)当DBを御社独自のAPPから利用する。‥2013.8.24 追加 



(b)住所を解析して、郵便番号、都道府県~地域の各要素に分解する。‥2013.10.17 追加
  高速に解析して整形します。

   ■デモは外部サイトです。(https://zipaddr10.com/) ‥2016.11.25 拡張


(c)Textファイルのデータを入力欄に埋め込む。‥2015.3.10 追加
  個別情報を定義したファイルから入力欄にデータを一括登録します。個人情報、テストデータの入力/保管等に有効と考えます。

   ■拡張入力デモ(c)

▲ページの先頭へ


◎特記事項(拡張方法)

(1)オウンコーディング
  ZipAddrx.jsの内部パラメータを修正することによって機能を拡張させることができます。

  ■htmlを修正せずにid名の対応を変更する例。

 function zipaddr_own() {  ‥‥ id名の変更【記述例】
  D.zp=  "zip01";   // zip欄
  D.zp1= "zip02";   // zip1欄
  D.pr=  "pref";    // 都道府県欄
  D.ci=  "city";    // 市区町村欄
  D.ar=  "area";    // 地域欄
  D.ad=  "addr";    // 番地欄
    :
  ※下記のthis.zpを修正する場合は、頭にD.を付けてD.zpとなります。
 }

※次のようにしてhtmlで代替することが可能となりました。‥ 2014.9.27 修正
<input type="hidden" id="zipaddr_param" value="zip=zip01,zip1=zip02,pref=pref,city=,addr=addr01">
[2017.01.01_現在の変更可能な項目]
//	共通
this.pt= "1";       // 都道府県select欄 1:id, 2:名称
this.pn= "1";       // 都道府県idの桁数 2:2桁
this.sl= "---選択"; // option[0]
this.sc= "";        // value
this.lin="--------";// 都道府県(Group)区切り
this.dli="-";       // 郵便番号の区切り
this.mrk="〒";
this.bgc="#009999"; // x-wa bgcolor
this.bgm="#0099cc"; // move
this.ovr="#00bbff"; // deepskyblue
this.lnc="#ffffcc"; // link color
this.clr="#333333"; // color
this.fweight="";    // 文字の太さ
this.design="1";    // ガイダンスのデザイン、sp:通常,1:コンパクト版
this.family="ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif";
this.debug="";      // 1:debug-mode
//
this.min= "7";      // 拡張用(mini)
this.max= "7";      // 拡張用(max)
this.sel= "10";     // 拡張用(selectc)
this.wok= "";       // 拡張用(1:企業を除く)
this.left=22;       // offsetLeft
this.top= 18;       // offsetTop
this.pfon="12";     // pc:font-size
this.phig="1.4";    // pc:height
this.sfon="16";     // sPhone
this.shig="1.6";
this.emsg="1";      // 1:エラーメッセージを阻止する
this.rtrv="1";      // 1:曖昧検索,0:完全一致
this.rtrs="";       // 1:補助ガイダンス利用
this.exinput="";    // 1:拡張入力,2:専用
this.welcart="";    // 1:on
this.usces="";      // 1:拡張
this.nodb="2";      // 1:nodb
this.wp="";         // 1:on
this.eccube="";     // 1:on
this.guideg="";     // 1:grouping阻止
this.reverse="";    // 1:逆検索on, 2:大口事業所を含む
this.rmin= "2";     // 逆用(mini)
this.rsel= "15";    // 逆用(selectc)
this.sphone= "";    // SmartPhone 1:jQuery-mobile,2:etc
this.opt= "_____";  // li
this.guide= "@head@page@line @count@close @zipaddr"; // G-layout、NL:改行
this.contract="TgeWyKPsMMRT"; // 契約コード(c)

//  郵便番号(7桁/上3)用 下4桁      都道府県          市区町村          地域              番地
this.zp= "zip";  this.zp1= "zip1";  this.pr= "pref";  this.ci= "city";  this.ar= "area";  this.ad= "addr";
this.zp2="zip2"; this.zp21="zip21"; this.pr2="pref2"; this.ci2="city2"; this.ar2="area2"; this.ad2="addr2";
this.zp3="zip3"; this.zp31="zip31"; this.pr3="pref3"; this.ci3="city3"; this.ar3="area3"; this.ad3="addr3";
this.zp4="zip4"; this.zp41="zip41"; this.pr4="pref4"; this.ci4="city4"; this.ar4="area4"; this.ad4="addr4";
this.zp5="zip5"; this.zp51="zip51"; this.pr5="pref5"; this.ci5="city5"; this.ar5="area5"; this.ad5="addr5";
this.zp6="zip6"; this.zp61="zip61"; this.pr6="pref6"; this.ci6="city6"; this.ar6="area6"; this.ad6="addr6";
//        zip7, zip71, pref7, city7, addr7        // zip7~以降は上記体系で名称は固定です。
this.zipmax=6;                                    // 7個以上の設置はこの値を変更して拡張します。
this.focus= "";     // set後のfocus位置
this.sysid= "";     // 拡張sys識別子
this.pm=new Array();// 拡張用
/*	<-↑ 以上はオウンコーディングで変更可能です-> */

(2)ガイダンス画面の表示位置ズレについて ‥‥ 2012.5.29 追記
   画像等があるhtmlに於いて、ガイダンス画面の表示位置がズレる場合があります。
   ガイダンス画面を表示する座標が正しく認識できないことが原因ですので、css等でサイズを正確に指定して下さい。
   (htmlの表示としては問題ないのですが)
  ■対策(1)
   まず、htmlの記述が正しいことを確認して下さい。 html記述のW3Cチェック補助

  ■対策(2)(Firefoxだけがズレる場合)
   それでもダメな場合は、最新のjquery定義文を追加してみて下さい。

  ■対策(3)
   それでもNGの場合は、下記の「ガイダンス画面表示位置の微調整方法」によって強制補正を行って下さい。
   【ガイダンス画面表示位置の微調整方法例】

 function zipaddr_own() {  ‥‥ 【記述例】
  D.left= "500";   // 左端からの位置
  D.top=  "21";    // 上部からの位置
 }

(3)ガイダンス画面を表示させたくない場合 ‥‥ 現在は標準機能になっています。
  ※郵便番号が複数の地域に対応している特殊ケース(438-0078等)では選択画面が出ます。

▲ページの先頭へ


◎ 拡張オプション機能(有償)

次のような拡張機能を、それぞれ初回 1,000円/サイトでご提供致します。

 ■ご興味のある方は、お問い合わせフォーム からご相談下さい。


(1)郵便番号を選択したあとに後処理をさせる。‥2014.10.27 追加
  ・都道府県によって送料を変えたい等、御社独自のJavascript機能を組み込むことができます。
  ・具体的には郵番選択後に関数`zipaddr_after`を呼び出しますので、その中に目的のコーディングを記述して下さい。

function zipaddr_after(zip,data) {
    alert(zip +":_zipaddr_afterが起動されました。_:"+ data);
}

※zip : 郵番入力欄のid名(3桁-4桁の場合は3桁部分のid名)
※data: データ(郵便番号_都道府県_市区町村名_地域名の形式となります)

(2)ボタン指示で検索を開始する。 2017.06.11 追加 ←New!

(3)選択ガイダンス画面を表示させる。 2017.06.13 追加 ←New!

(4)@ZipAddr_xx部分示を非表示にしたい。 2017.06.15 追加 ←New!

▲ページの先頭へ


◎ zipaddr2.com有償サイトのご紹介

(1)住所から郵便番号を検索(逆検索)する機能を追加しました。(有償版で稼働) 2015.04.18 追加

(2)郵便番号検索をスピードアップをさせる。‥2015.05.20 追加

(3)English版(ローマ字表記)版 を提供しました。(有償版で稼働) (2015.01.31)

(4)当システムを御社独自システムのように利用するモジュール版です。(有償版で稼働) (2016.04.13)

▲ページの先頭へ


◎更新履歴

・2017.06.01 郵便番号簿を更新しました。 (2017年05月31日更新分)
・2017.05.01 郵便番号簿を更新しました。 (2017年04月28日更新分)

・2017.06.11 拡張オプションを使い易く改善しました。(Ver7.70)
・2017.06.07 ↓下記コピー時の上書きを防止機能、Woocommerceに対応しました。
・2017.06.03 住所入力後の郵便番号コピー(ctrl+c)操作で、上書きを防止する機能を追加しました。(Ver7.69)
・2017.06.03 ガイダンス画面の[閉じる]動作をmouseoverからclickに変更しました。
・2017.05.11 サーバの振り分けアルゴリズムを変更しました。
・2017.04.08 本体サーバの置換を行ないました。
・2017.02.17 郵便番号入力欄のtype形式は全てtype="tel"にしました。(Ver7.68)
・2017.02.02 スマホで利用時の郵便番号欄type形式を全てtelにしました。(Ver7.67)
・2017.01.15 管理用のデバッグ機能を拡張しました。(Ver7.66)
・2017.01.01 京都市の通、上る、下る、等の表現を改善しました。
・2017.01.01 zipaddr7.js、zipaddr70.js、zipaddrc.js、は全てzipaddrx.jsに統合しました。

更新履歴(2016年分)

更新履歴(2015年分)

更新履歴(2014年分)

更新履歴(2013年分)

更新履歴(2012年分)
・2012.02.18 初期(β版)バージョンのサービスを開始しました。

▲ページの先頭へ


◎アナウンス済の情報

 ◎システム変更の予告について。‥(2016.06.01)【重要】
 ◎Google Codeサービスの閉鎖による対応について。‥(2015.06.05)
 ◎郵便番号データから住所を自動入力する場合の問題点と対応策について、考え方を纏めました。(2013.10.21) 必読!
 ◎旧ライブラリ zipaddrc.js(Ver6.37) の説明資料はこちらです。‥2013.09.16に標準をVer7へ切り替えました。


 ※「離脱せず・成果率の高いメールフォーム・問い合わせフォームを作成する10の方法」として紹介されています。(2012/09/30)

 ※「郵便番号から住所を自動入力できるzipaddr-jpプラグイン」西沢直木のIT講座として紹介されています。(2015/08/28)

▲ページの先頭へ


◎お問い合わせ等

その他、特殊なケース等がございましたら、当方が 1,000円/箇所 で対応します。

 ■ご意見・バグ報告のお問い合わせフォーム

▼ピエールソフト
〒312-0033 茨城県ひたちなか市市毛815-5
 代表: 照沼 辰郎(てるぬま たつろう)
 TEL : 029-274-1629
 FAX : 029-274-1629
 ホーム: https://pierre-soft.com/

▼運営サイト
https://zipaddr.com/
(郵番→住所の自動入力:zipaddrx.js)無料
http://zipaddr2.com/
(郵番→住所の自動入力:zipaddr3.js)有料
http://zipaddr3.com/
(御社設置の住所自動入力:zipaddr.js)有料
http://bank-auto.com/
(金融機関情報の検索・自動入力API)無料
https://contact.pierre-soft.com/
(お問い合せの自動回答:contact_AI)有料