ZIPSERVER

技術サポートIMPLEMENTATION

  • HOME>
  • 技術サポート

ワードプレスプラグイン版モニター募集

ZIPSERVERの実装方法

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

JavaScriptでの実装方法

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


<script type="text/javascript" src="https://t01.zipserver.jp/zipserver/php/api/zs.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
  const zs_site_id="5a9e69642e9df937";
  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://t01.zipserver.jp/zipserver/php/api/zs.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
  const zs_site_id="5a9e69642e9df937";
  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>

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

APIでの実装方法

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

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

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