実装サポートと技術Tips｜ZIPSERVER 郵便番号住所自動入力API

技術サポートIMPLEMENTATION

HOME>
技術サポート

ZIPSERVERの実装方法

ZIPSERVER組み込みの実装方法をご紹介いたします。

JavaScriptでの実装方法
APIでの実装方法

ブラウザ上で郵便番号を入力すると、ZIPSERVERが住所を検索し、フォームの都道府県・市区町村欄へ自動で入力する方式です。スクリプトを貼り付けるだけで利用できます。

ZIPSERVER申し込み後にメールで届く「契約者向けIDとパスワード」を用いて、ご契約者様ログインを行い、マイページにアクセスします。
マイページのメニュー、キー管理をクリックし、アクセスキーの左にあるアイコンからコードを取得してください。
※下記のコードはサンプルのため、実際にご契約者様が利用するコードとは若干の違いがあります。


<script type="text/javascript" src="https://{{トライアルお申し込み後に提供される環境を設定}}/zipserver/php/api/zs.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
  const zs_site_id="{{トライアルお申し込み後に提供される環境のキー情報を設定}}";
  const zs_zipcode="zipcode"; // 郵便番号入力フォームのID
  const zs_prefecture="address1"; // 県が設定されたフォームのID
  const zs_city="address2"; // 市区が設定されたフォームのID
  const zs_town="address3"; // 町丁が設定されたフォームのID
  const zs_ziplist="ziplist"; // 郵便番号リスト表示用のdiv
  const zs_data="json"; // 出力データ形式(未指定はレスポンスのみ)
  function zsResponce(e){ if(e.result=="error") alert("error_code:"+e.code); }// 結果が必要な場合のレスポンスファンクション
//-->
</script>
<input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" />
  <button type="button" onclick="javascript:zs_search();">自動入力</button>
<div id="ziplist" style="position:absolute; z-index:1000"></div>

お使いのWebフォームのHTMLファイルを開き、HTMLファイルの<body>の開始タグの直下に下記コード（サンプルでは3行目から15行目）を貼り付けてください。


<script type="text/javascript" src="https://{{トライアルお申し込み後に提供される環境を設定}}/zipserver/php/api/zs.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
  const zs_site_id="{{トライアルお申し込み後に提供される環境のキー情報を設定}}";
  const zs_zipcode="zipcode"; // 郵便番号入力フォームのID
  const zs_prefecture="address1"; // 県が設定されたフォームのID
  const zs_city="address2"; // 市区が設定されたフォームのID
  const zs_town="address3"; // 町丁が設定されたフォームのID
  const zs_ziplist="ziplist"; // 郵便番号リスト表示用のdiv
  const zs_data="json"; // 出力データ形式(未指定はレスポンスのみ)
  function zsResponce(e){ if(e.result=="error") alert("error_code:"+e.code); }// 結果が必要な場合のレスポンスファンクション
//-->
</script>

ユーザーに郵便番号を入力してもらいたい欄に下記のコード（サンプルでは16行目から18行目）を貼り付けてください。


<input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" />
<button type="button" onclick="javascript:zs_search();">自動入力</button>
<div id="ziplist" style="position:absolute; z-index:1000"></div>

以下、コード貼り付け後の具体例
21行目から23行目のようにユーザーに郵便番号を入力してもらいたい場所にコードを貼り付けてください。（18行目から27行目が郵便番号の入力欄に関するコードになります。）


<div class="row">
<div class="col-sm-3">お名前 (*)</div>
<div class="col-sm-5"><input type="text" class="form-control" name="name" id="name" value="" placeholder="例）インクレイブ 太郎"></div>
<div class="col-sm-5"></div>
</div>
<div class="row error-message">
<div class="col-sm-3"></div><div class="col-sm-10"><div class="text-danger" id="email_message"></div></div>
</div>
<div class="row">
<div class="col-sm-3">電話番号 (*)</div>
<div class="col-sm-3"><input type="text" class="form-control" name="tel" id="tel" value="" placeholder="例）0227966101">
<small>
<div class="pmessage">半角数字のみで入力してください。</div>
</small>
</div>
</div>
<div class="row">
<div class="col-sm-3">郵便番号 (*)</div>
<div class="col-sm-3">
<input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" placeholder="例）9800804"/>
<button type="button" onclick="javascript:zs_search();">自動入力</button>
<div id="ziplist" style="position:absolute; z-index:1000"></div>
<small>
<div class="pmessage">半角数字のみで入力してください。</div>
</small>
</div>

ポイント①: 住所自動入力ボタンの文言を変えたいときは「自動入力」の文言を変更すると、ボタンの文字も変更されます。

ポイント②: <div id="ziplist" style="position:absolute; z-index:1000"></div>は複数の郵便番号を表示するためのタグです。

一つの郵便番号に複数の住所が割り当てられていることがあるためです。
Ex）9812114

宮城県伊具郡丸森町赤堀
宮城県伊具郡丸森町泉
宮城県伊具郡丸森町泉下
宮城県伊具郡丸森町大目
宮城県伊具郡丸森町北前
宮城県伊具郡丸森町天王

ポイント③: sizeの数字を変えることで入力欄の大きさを変更できます。

ポイント④: placeholderの文言を変えることで入力欄にあらかじめ表示させておく文言を変えることができます。

都道府県を出力したい欄の<input>タグにid="address1"（参考：下記コードの37行目）、
市区を出力したい欄の<input>タグにid="address2"（参考：42行目）、
町村を出力したい欄の<input>タグにid="address3"（参考：46行目）、
住所を都道府県から市町村まで連結させて出力したい場合は<input>タグにid="address4"を追加します。


<form id="frm" action="" method="POST">
<h4><i class="material-icons">check_box</i>ご登録者情報</h4>

<div class="row">
<div class="col-sm-3">お名前 (*)</div>
<div class="col-sm-5"><input type="text" class="form-control" name="name" id="name" value="" placeholder="例）インクレイブ 太郎"></div>
<div class="col-sm-5"></div>
</div>
<div class="row">
<div class="col-sm-3">電話番号 (*)</div>
<div class="col-sm-3"><input type="text" class="form-control" name="tel" id="tel" value="" placeholder="例）0227966101">
<small>
<div class="pmessage">半角数字のみで入力してください。</div>
</small>
</div>
</div>

<div class="row">
<div class="col-sm-3">郵便番号 (*)</div>
<div class="col-sm-3">
<input name="zipcode" type="text" id="zipcode" size="7" maxlength="7" value="" placeholder="例）9800804"/>
<button type="button" onclick="javascript:zs_search();">自動入力</button>
<div id="ziplist" style="position:absolute; z-index:1000"></div>
<input type="text" class="form-control" name="zip" id="zip" value="" placeholder="例）9800804">
<small>
<div class="pmessage">半角数字のみで入力してください。</div>
</small>
</div>
<div class="col-sm-3">
<button type="button" class="form-control" onclick="javascript:search();">検 索</button>
</div>
</div>
<div class="row">
<div class="col-sm-3">都道府県 (*)</div>
<div class="col-sm-4">
<input type="text" class="form-control" name="address1" id="address1" value="" placeholder="例）宮城県">
</div>
</div>
<div class="row">
<div class="col-sm-3">市区 (*)</div>
<div class="col-sm-7"><input type="text" class="form-control" name="address2" id="address2" value="" placeholder="例）仙台市青葉区"></div>
</div>
<div class="row">
<div class="col-sm-3">町村</div>
<div class="col-sm-7"><input type="text" class="form-control" name="address3" id="address3" value="" placeholder="例）大町"></div>
</div>
<div class="row">
<div class="col-sm-3">ビル名など</div>
<div class="col-sm-7"><input type="text" class="form-control" name="building" id="building" value="" placeholder="例）TAKAYUパークサイドビル5F"></div>
</div>
</form>

送信テストをします。郵便番号を入力し、検索ボタンを押して住所が出力されれば実装完了です。

提供形式：POST
レスポンス形式：JSON（UTF-8）
その他詳しい情報については、APIに関する仕様書を用意しております。
ご要望の際はお問い合わせください。

エンドポイント

リクエスト送信先URLは、トライアルお申し込み後にメールでお知らせします。

入力（POSTパラメータ）

論理名	物理名	型	必須	備考
郵便番号	`zipcode`	文字列（7バイト）	○	半角数字。3桁以上7桁以内で入力
出力形式	`output`	文字列	－	JSON / XML / PHP のいずれか。指定なしの場合は JSON

入力（リクエストヘッダ）

論理名	物理名	型	必須	備考
コンテントタイプ	`Content-Type`	文字列	－	`application/json` を指定
Zipserver認証ヘッダ	`X-Zipserver`	文字列（64バイト）	○	32〜64文字のAPIキーを入力

出力（JSON・UTF-8）

レスポンスは error（処理結果。code が 20000 のとき成功）と address（住所の配列）を含みます。レスポンスの出力サンプルは以下のとおりです。

{
  "error": [
    {
      "code": "20000",
      "title": "成功",
      "detail": "処理に成功しました"
    }
  ],
  "address": [
    {
      "zipcode": "9800001",
      "prefecture": "宮城県",
      "city": "仙台市青葉区",
      "town": "中江",
      "house_number": null,
      "annotation": null,
      "company": null,
      "prefecture_kana": "ミヤギケン",
      "city_kana": "センダイシアオバク",
      "town_kana": "ナカエ",
      "annotation_kana": null,
      "company_kana": null,
      "prefecture_yomi": "みやぎけん",
      "city_yomi": "せんだいしあおばく",
      "town_yomi": "なかえ",
      "annotation_yomi": null,
      "company_yomi": null,
      "city_code": "04101",
      "pref_code_JIS": "04",
      "pref_code_JARL": "06",
      "prefecture_hira": "みやぎけん",
      "prefecture_kata": "ミヤギケン",
      "city_hira": "せんだいしあおばく",
      "city_kata": "センダイシアオバク",
      "town_hira": "なかえ",
      "town_kata": "ナカエ",
      "company_hira": null,
      "company_kata": null,
      "annotation_hira": null,
      "annotation_kata": null
    }
  ]
}

価格とプランについてはこちら

お問い合わせ・よくある質問

導入前相談など、お気軽にお問い合わせください。

WEBでのお問い合わせ
- お問い合わせする
- よくある質問を見る
「無料トライアル」はこちらからお申し込みください。
お電話でのお問い合わせ
0570-086190
土日祝日及び年末年始を除く 10時00分〜17時00分