zipcode_나는 jp로 아주 좋은 주소 입력 표를 만들 수 있다

개요

이전에 zipcode_제가 jp라는 주소 검색 API를 만들었어요.github를 소개한 적이 있지만 이후에도 점차 기능이 증가했다.결과적으로 비교적 좋은 주소 입력표를 만들 수 있기 때문에 추가 기능을 소개한다.

zipcode_jp를 개발한 이유

각종 서비스를 통해 우편 번호 검색 기능을 실현하였다.

우편번호 검색 기능을 위한 DB를 유지하는 것은 매우 번거롭다.ken-all.csv를 해야 하는 퍼스.

외부 서비스 이용 비용, 이용 제한, 서비스 정지 시 대응 등을 고려하면 다른 번거로운 일도 증가할 수 있다.

원래 그렇게 대단한 일을 하려고 한 것은 아니다.우편번호 검색에 대응하는 주소 정보만 다운로드하면 됩니다. 원래 동적 서버 프로그램을 준비할 필요가 없죠?

을 생각해 봤는데 괜찮은 것 같아요.

나는 우편 번호에서 주소를 검색할 수 있는 API를 만들었다 기사에 이렇게 적혀 있습니다.

이후

그리고 zipcode_실제 서비스에서 jp를 사용할 기회가 있었는데, 당시에 기능을 확장하고 싶은 요구를 제기했다.
결과적으로 다음과 같은 기능이 추가되었습니다.

도도부현 일람 기능 획득

도도부현의 시내군마다 기능

각 시내 군의 정촌이 기능을 얻는다

마을당 우편번호 취득 기능

프레젠테이션

TypeScript+React에서 zipcode_나는 jp의 주소표를 사용하는 샘플을 만들어 보았다.
소스 코드는 GitHub에 있습니다.
주소 양식 예

제공되는 기능

우편 번호에서 주소 찾기 기능

도도부현을 선택한 후 시내군 일람을 싣고, 시내군 후가마치촌 일람을 선택

우편번호를 입력하지 않고 도도부현 -> 시내군 -> 마치촌을 선택하면 우편번호 자동 입력

주소를 입력하면 저장된 주소 정보 표시줄에 저장하고 표시됩니다.
아마 주소를 잘 입력할 수 있을 것 같습니다.

zipcode_jp 사용 방법

제작 설정

zipcode_jp나 fork를 닫고 웹 서버에docs 디렉터리 아래의 내용을 공개하십시오.
그때는 브라우저가 주소 데이터를 캐시하지 않도록 아파치와nginx를 설정하는 것이 가장 좋다.
그렇지 않으면 데이터를 업데이트해도 브라우저에서 캐시한 주소 데이터를 사용할 위험이 있습니다.
또한 다른 도메인의 Ajax 액세스를 허용하려면 액세스를 허용하는 CORS 제목을 추가합니다.
nginx의 경우 다음과 같이 설정합니다.

    location ^~ /zipcode_jp/ {
        root   /var/www;
        index  index.html index.htm;

        # CORS start
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;
        # CORS end

        add_header Cache-Control no-cache;
        sendfile off;
        etag off;
        if_modified_since off;
    }

프런트엔드 구현

zipcode_jp의 주소 데이터는 Github 페이지에서도 공개됐는데 테스트 용도와 샘플에 사용된다면 이걸 사용하는 것이 가장 간단합니다.실제 프레젠테이션 페이지에서 zipcode_jp의 Github 페이지에서 데이터를 읽고 있습니다.
JavaScript(TypeScript)에서 주소 데이터에 액세스하는 방법은 주소 양식 샘플 페이지의 코드를 참조할 수 있습니다.
또한 jsfiddle도 주소 데이터가 불러온 샘플을 실었으니 가능하면 이쪽을 보십시오.
대체적인 사용 방법은 다음과 같다.

script 태그에서 zipcode_jp 주소 데이터에 포함된api.js를 읽습니다.

ZipCodeJp.setRootUrl()에서 주소 데이터 URL 설정

ZipCodeJp.getAddressesOfZipCode(): 우편 번호와 일치하는 주소 얻기

ZipCodeJp.getPreffectures(): 도도부현 목록 가져오기

ZipCodeJp.getCities OfPreffecture(): 시군 목록 가져오기

ZipCodeJp.getTownsOfCity(): 마을 목록 얻기

데이터 업데이트 방법

zipcode_jp 주소 데이터는 zipcloud씨에서 제공하는 x-ken-all입니다.csv를 기반으로 제작되었습니다.
x-ken-all.csv를 업데이트하면 CircleCI가 zipcode_를 자동으로 감지합니다.jp의 데이터도 자동으로 업데이트됩니다.
따라서 주소 데이터를 업데이트할 때 데이터 라이브러리gitpull만 사용하면 최신 주소 데이터를 사용할 수 있습니다.

총결산

zipcode_jp는 주소 양식을 구현하는 데 사용할 수 있는 주소 검색 API입니다.

gitclone은 인터넷 공개 후 사용할 수 있다.

무료입니다.동적 서버 프로그램을 설치할 필요가 없습니다.

주소 데이터를 업데이트할 때gitpull하면 됩니다.

추가 기능으로 괜찮은 주소 입력표를 만들 수 있다.아마도 응용 프로그램에서 사용할 수 있을 것이다.

꼭 사용하세요.