■ いろいろな API
<html> <meta charset="utf-8"> <style> スタイル </style> <p style="color:#456789;font-size:20px;font-weight:bold;margin:40px;"> ※ ローカルから https://zipcloud.ibsnet.co.jp/ にアクセスして, <br>(APIを利用し)郵便番号で地域名を検索できます.</p> <p style="color:#ff4567;font-size:14px;font-weight:bold;margin:40px;"> インターネット接続が必要です.<br> この html ファイルをサーバに設置しても作動いたしません.</p> <p style="color:#ff4567;font-size:14px;font-weight:bold;margin:40px;"> ハイフンを入れて入力すること / 例: → 100-0002<br> <span style="color:gray;font-size:16px;">結果: → 東京都千代田区皇居外苑</span></p> <script> すくりぷと </script> <form> <input id="表示"type="text"size="9"maxlength="8"class="サーチ"placeholder="100-0002"> <script>document.write("<button type='button'onclick='検索結果();'>地域名 を 検索</button>"); </script> <input type="text"id="ぼたん"size="46"class="サーチ"> </form> <hr> <input type="button"value=" リロード "onclick="window.location.reload(false);"class="リロード"> </html>
<style> p{text-align:center;} button{font-size:16pt; margin:20px;} input.サーチ{font-size:20pt;margin:40px;} input.リロード{font-size:12pt; color:#ff0000; margin:0 auto; display:block;} form,button{text-align:center; margin:0 auto; display:block;} ::placeholder{color:#facebc;} </style>
<script> function 検索結果() {document.getElementById("ぼたん").value=""; let zipcode=document.getElementById("表示").value; let 新_たぐ=document.createElement("script"); 新_たぐ.type="text/javascript"; 新_たぐ.charset="utf-8"; 新_たぐ.src="https://zipcloud.ibsnet.co.jp/api/search?zipcode="+zipcode+"&callback=郵便番号"; document.body.appendChild(新_たぐ);}; function 郵便番号(接続) {let 絞り込み=document.getElementById("ぼたん"); 絞り込み.value=""; if(接続.status !=200) {alert(接続.message); return false;} if(!接続.results) {alert("そのデータはありません"); return false;} let 都道府県=接続.results[0].address1+接続.results[0].address2; if(接続.results.length==1) {都道府県+=接続.results[0].address3;} 絞り込み.value=都道府県;}; </script>
sample_STUDY_html_031_E サンプル・ダウンロード