郵便番号から住所を検索する（複数の住所がヒットする郵便番号対応）

郵便番号検索
複数候補から選択できるようにする
見た目を調整する
猫
全体サンプル

郵便番号検索

日本郵便がzipcloudという郵便番号検索APIを公開しているため、検索自体は郵便番号をパラメータにセットしてfetchで呼び出すだけで実現できる。fetchにつきもののasync,await構文については、他の記事で簡単に触れているためそちらを見てみてほしい。 neko-gas.hatenablog.com

(async ()=>{
    let param = new URLSearchParams({"zipcode": "102-0082"});
    let results = (await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param)
        .then(res=>res.json(),e=>console.log(e)))
        .results;
    console.log(results[0].address1+results[0].address2+results[0].address3);
})();

複数候補から選択できるようにする

郵便番号にひもづく住所が一つなら問題ないが、中には複数の住所がヒットする郵便番号もある。例えば、「029-4205」という郵便番号を検索すると2024年4月の執筆時点で20の住所がヒットする。こういう場合に対応できるよう、VueJSで住所の選択ポップアップを作ってみる。ポップアップの使い方については過去の記事を参考にしてほしい。VueJSでは候補を格納する配列としてcantidates、ポップアップの表示制御をするBooleanとしてshowCandidates、結果の住所を格納する文字列としてaddressを定義している。 neko-gas.hatenablog.com

(async ()=>{
    let param = new URLSearchParams({"zipcode": "029-4205"});
    let results = (await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param)
        .then(res=>res.json(),e=>console.log(e)))
        .results;
    if (!results || results.length < 1) return;
    this.candidates=results.map(result=>result.address1+result.address2+result.address3);
    this.showCandidates=true;
})();

  <div id="background" v-show="showCandidates">
    <div id="dialog">
      <div id="candidatesArea">
        <label class="checkLabel" v-for="candidate in candidates">
          {{ candidate }}
          <input type="radio" name="candidate" class="hidden" :value="candidate" v-model="address" />
        </label>
      </div>
      <button id="okButton" @click="showCandidates=false">OK</button>
    </div>
  </div>
  <input id="zipcode" v-model="zipcode" />
  <button id="searchButton" @click="search">検索</button>
  <div>{{ address }}</div>

見た目を調整する

今回は検索ボックスもおしゃれにしてるし、候補を選択する部分も若干工夫している。cssでどう実現しているか解説しておく。

 #zipcode, #searchButton {
   line-height: 1.4;
   border: 1px solid gray;
 }
 #zipcode {
   border-radius: 0.5rem 0 0 0.5rem;
 }
 #searchButton {
   border-radius: 0 0.5rem 0.5rem 0;
   background-color: gray;
   color: white;
 }
 #background {
   width: 100vw;
   height: 100vh;
   background-color: #000c;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
 }
 #dialog {
   background-color: white;
   border-radius: 10px;
   padding: 10px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 #candidatesArea {
   max-height: calc(90vh - 2rem);
   overflow-y: scroll;
 }
 #okButton {
   border-radius: 1rem;
   background-color: blue;
   color: white;
   width: 100%;
 }
 .hidden {
   display: none;
 }
 .checkLabel {
   width: 100%;
   display: block;
   border-block-end: 1px solid darkgray;
 }
 .checkLabel:has(input:checked) {
   background-color: lightskyblue;
 }

猫

わたじいは窓から外を眺めるのが大好きで、尻尾だけでもその可愛さは十二分に伝わってくる。向かいの家の住所でも眺めているのだろうか。いや、そんなはずはない。外を眺めているようで実はこの日は雨戸が閉まっており、何も見えていないはずなのだから。。。

【猫砂2袋プレゼント中!!】 [自動猫トイレ CATLINK SCOOPER PRO-X 本体] 猫ねこネコ自動ネコトイレ自動トイレ猫トイレ大きめ自動フルカバーシニアキャットリンクスマホスマートフォンおすすめおしゃれアプリ

価格: 59900 円
楽天で詳細を見る

全体サンプル

コード.gs

function doGet(e) { return HtmlService.createTemplateFromFile("無題").evaluate(); }

無題.html

<html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?> </head> <script> function onload() { Vue.createApp({ data: ()=>( { zipcode:"", // 郵便番号 address:"", // 住所 showCandidates: false, // 住所選択ダイアログの表示フラグ candidates: []　// 住所候補 } ), methods: { search() { (async ()=>{ let param = new URLSearchParams({"zipcode": this.zipcode}); let results=(await fetch("https://zipcloud.ibsnet.co.jp/api/search?"+param) .then(res=>res.json(),e=>console.log(e))) .results; if (!results || results.length < 1) return; this.candidates=results.map(result=>result.address1+result.address2+result.address3); if (this.candidates.length > 1) { this.showCandidates=true; } else { this.address=this.candidates[0]; } })(); } } }) .mount("#main"); } </script> <body onload="onload()"> <div id="main"> <div id="background" v-show="showCandidates"> <div id="dialog"> <div id="candidatesArea"> <label class="checkLabel" v-for="candidate in candidates"> {{ candidate }} <input type="radio" name="candidate" class="hidden" :value="candidate" v-model="address" /> </label> </div> <button id="okButton" @click="showCandidates=false">OK</button> </div> </div> <div><input id="zipcode" v-model="zipcode" /> <button id="searchButton" @click="search">検索</button></div> <div>{{ address }}</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@3.1.5"></script> </body> </html>

css.html