◀︎ ▶︎

<html lang="ja"><meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">

<style>
*:focus{outline:none;}
body{justify-content:center;
max-width:390px;
align-items:center;
margin:8px auto;
background-color:#ffffff;
font-family:Arial,sans-serif;}
h1{font-size:1em;}
p{color:red;}
header{position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
z-index:1;
width:100%;
padding:20px;
text-align:center;}
input[type="text"]{width:100%;
box-sizing:border-box;font-size:28px;}
table{display:table;
width:100%;
border-collapse:collapse;}
table tbody tr th{width:140px;
padding:20px 10px;
text-align:left;
border-bottom:8px solid #abcdef;}
table tbody tr td{width:calc(100%-80px);
padding:20px 10px;
border-bottom:1px solid #123456;}
table tbody tr td input{padding:5px;
border:0;
border:1px solid #456789;}
table tbody tr td button{padding:3px 10px;
color:#ffffff;
background-color:#16abcd;
border:0;
font-size:18px;
cursor:pointer;}
table tbody tr td .zipcode{width:170px;}
input{font-size:16pt;
color:#456789;}
#えらー表示{margin:0;
color:#ff0000;
font-size:12px;
font-weight:bold;}
img{margin-top:-24px;margin-left:-24px;}
::placeholder{color:#facebc;}
</style>

<body translate="no">
<main id="記事">
<div style="color:#123456;border:solid 1px #abcdef;padding:6px;border-radius:8px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);">
<h1>郵便番号検索 API</h1>
<p style="font-size:12px;color:red;">※ 郵便番号にハイフン ( - ) を入れても,<br>入れなくてもどちらでもOK.</p>
<form>
<table>
<tbody>
<tr><th>郵便番号</th><td><input id="員"class="zipcode"type="text"name="zipcode"value=""placeholder="1000002"><button id="検索"type="button"style="font-size:20px;margin-top:8px;margin-bottom:8px;padding:4px 25px;border:1px solid #16abcd;background-color:#16abcd;color:white;border-radius:5px;cursor:pointer;">検 索</button>
<br>
<p id="えらー表示"></p></td></tr>
<tr><th>都道府県</th><td><input id="address1"type="text"name="address1"value=""></td></tr>
<tr><th>区(市)</th><td><input id="address2"type="text"name="address2"value=""></td></tr>
<tr><th>地域</th><td><input id="address3"type="text"name="address3"value=""></td></tr>
</tbody>
</table>
</form>
</div>
</main>

<script id="rendered-js">
!function(囲,茶)
{if("function"==typeof define&&define.amd)define(["輸出","文字"],茶);
else if("undefined"!=typeof 輸出&&"undefined"!=typeof 文字)茶(輸出,文字);
else{let 名={輸出:{}};
茶(名.輸出,名),
囲.笛=名.輸出}}(this,function(囲,茶)
{let 名={timeout:555,jsonpCallback:"callback",jsonpCallbackFunction:null};
function 得(茶)
{try{delete window[茶]}
catch(囲){window[茶]=void 0}}
function 符(囲){let 茶=document.getElementById(囲);
茶&&document.getElementsByTagName("head")[0].removeChild(茶)}
茶.輸出=function(有)
{let 項目=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],
史=有,宇=項目.timeout||名.timeout,
絵=項目.jsonpCallback||名.jsonpCallback,弟=void 0;
return new Promise(function(茶,囲)
{let 名=項目.jsonpCallbackFunction||"jsonp_"+Date.now()+"_"+Math.ceil(1e5*Math.random()),
王=絵+"_"+名;
window[名]=function(囲)
{茶({ok:!0,json:function()
{return Promise.resolve(囲)}}),
弟&&clearTimeout(弟),符(王),得(名)},
史+=-1===史.indexOf("?")?"?":"&";
let 愛=document.createElement("script");
愛.setAttribute("src",""+史+絵+"="+名),
項目.charset&&愛.setAttribute("charset",項目.charset),
愛.id=王,
document.getElementsByTagName("head")[0].appendChild(愛),
弟=setTimeout(function()
{囲(new Error("JSONP request to"+有+"timed out")),得(名),符(王),window[名]=function()
{得(名)}},宇),
愛.onerror=function()
{囲(new Error("JSONP request to"+有+"failed")),
得(名),符(王),弟&&clearTimeout(弟)}})}});
let 検索=document.getElementById("検索");
検索.addEventListener("click",()=>
{let 秋="https://zipcloud.ibsnet.co.jp/api/search?zipcode=";
let えらー表示=document.getElementById("えらー表示");
let 員=document.getElementById("員");
let address1=document.getElementById("address1");
let address2=document.getElementById("address2");
let address3=document.getElementById("address3");
let 波=員.value.replace("-","");
let 場所=秋+波;
笛(場所,{timeout:12000}).
then(response=>{えらー表示.textContent="";
return response.json();}).
then(data=>{if(data.status===400)
{えらー表示.textContent=data.message;}
else if(data.results===null)
{えらー表示.textContent="There is No Data";}
else{address1.value=data.results[0].address1;
address2.value=data.results[0].address2;
address3.value=data.results[0].address3;}}).
catch(ex=>{document.write(ex);});},false);
</script>
</body>
</html>