Postcode API

郵便番号から住所を取得するAPIです。

APIの使用方法

（準備ができ次第ご案内いたします。）

Javascriptライブラリの使用方法

デモ

使用例

HTML & CSS

<style>
  .hidden{display:none;}
</style>
<form>
  <div>
    <label for="postcode-1">郵便番号</label>
    <input id="postcode-1" type="text" maxlength="3"/>
    -
    <input id="postcode-2" type="text" maxlength="4"/>
    <!-- <button type="button" id="fill">郵便番号から住所を取得</button> -->
    <!-- <div id="error" class="hidden"></div> -->
  </div>
  <div>
    <label for="pref">都道府県</label>
    <select id="pref">
        <option>-</option>
        <option value="北海道">北海道</option>
        <option value="青森県">青森県</option>
        <option value="秋田県">秋田県</option>
        <option value="岩手県">岩手県</option>
        ...
        <option value="東京都">東京都</option>
        <option value="神奈川県">神奈川県</option>
        <option value="新潟県">新潟県</option>
        ...
    </select>
  </div>
  <div>
    <label for="city">市区町村</label>
    <input id="city"/>
  </div>
  <div>
    <label for="address">住所</label>
    <input id="address"/>
  </div>
</form>

Javascript

<!-- See documentation on our website https://api.dahlbeck.net/postcode/manual -->
<script src="https://api.dahlbeck.net/js/postcode/postcode.js?key=xxxxxxxxxx"></script>
<script>
postcode.init(
    [
        '<ボタンのID>',
        [
            '<郵便番号入力欄1のID>',
            '<郵便番号入力欄2のID>'
        ],
        '<都道府県選択のID>',
        '<市区町村入力欄のID>',
        '<住所入力欄のID>',
        '<エラーメッセージ表示欄のID>'
    ]
    [
        {
            'id':'<ボタンのID>',
            'label':'<ボタンのラベル>',
            'class':'<ボタンのclass>'
        },
        {
            'id':'<エラーメッセージ表示欄のID>',
            'class':'<エラーメッセージ表示欄のclass>'
        }
    ],
    <ターゲットウィンドウ>,
    <コールバックメソッド>
);
const callback = function(config){
    // do something
}
</script>

引数			型	概要
第1引数			配列	-
-	ボタンのID		文字列	住所検索のトリガーになるボタン要素のidを指定します。自動配置^※することが可能です。
-	郵便番号入力欄のID		文字列または配列	郵便番号のinput要素のidを指定します。郵便番号欄が2つに分かれている場合は配列、1つの場合は文字列で指定します。
-	都道府県選択のID		文字列	都道府県のselect要素のidを指定します。
-	市区町村入力欄のID		文字列	市区町村のinput要素のidを指定します。
-	住所入力欄のID		文字列	住所のinput要素のidを指定します。市町村入力欄のIDと同一のものが指定された場合は、市町村と住所が繋がって入力されます。
-	エラーメッセージ表示欄のID		文字列	エラーメッセージ表示欄のblock要素（div等）のidを指定します。自動配置^※することが可能です。
第2引数			配列（任意）	-
-	ボタンの設定		オブジェクト（任意）	郵便番号欄の横にボタンを自動的に配置する必要がある時のみ指定します。
-	-	id	文字列	ボタンのIDと同じIDを指定します。
-	-	label	文字列	自動配置する住所検索ボタンのラベルを指定します。
-	-	class	文字列	自動配置する住所検索ボタンのclassを指定します。
-	エラーメッセージ表示欄の設定		オブジェクト（任意）	郵便番号欄の横にボタンを自動的に配置する必要がある時のみ指定します。
-	-	id	文字列	エラーメッセージ表示欄のIDと同じIDを指定します。
-	-	class	文字列	自動配置するエラーメッセージ表示欄のclassを指定します。
第3引数			変数(任意)	通常はターゲットのグローバル変数windowを指定します。javascriptがframeやiframe内で実行される等でターゲットの指定が必要な時のみ指定します。
第4引数			変数(任意)	郵便番号検索後にコールバックされるメソッドを指定します。引数には第1引数の配列を次のオブジェクトに変換したものが渡されます。 { 'triggerId': configlist[0], 'postcodeId': configlist[1], 'prefId': configlist[2], 'cityId': configlist[3], 'addressId': configlist[4], 'errorId': configlist[5] }

※ボタンとエラーメッセージ表示欄は自動的に配置することができます。自動配置する場合は、第2引数に各設定を渡します。

エラーメッセージ

APIキーが無効です

APIキーが無効になっているか、間違っています。発行されたAPIキーが正しいかご確認ください。

APIキーが間違っています

APIキーは存在しますが、このAPIでの使用権限がありません。このAPI用に発行されたAPIキーが正しいかご確認ください。

住所が見つかりません

郵便番号に該当する住所が見つかりませんでした。郵便番号入力欄のIDの設定が正しいか、また入力された郵便番号が正しいかご確認ください。

住所データの取得に失敗しました

APIとの通信に失敗しました。CSPやCORS等のセキュリティ設定をご確認ください。なお、レスポンスコードが500（内部エラー）などの場合、APIがメンテナンス中である可能性もあります。