PostcodeJP Playground

住所入力の体験を、実際の操作で確かめる。

住所を選ぶ、郵便番号や住所項目から条件検索する、既存フォームを補完する。登録前に、PostcodeJPの3つの製品をブラウザ上で実際に試せます。

利用準備中

Address Selector

住所選択からフォーム入力までを試す

Address Selectorで住所を選び、ECサイトなどのフォームへ反映して、番地・建物名を入力し、住所を完成させる流れを体験できます。

該当Docsを見る
STEP 1

Address Selectorで住所を選択

「住所を選択」を押して、郵便番号・住所・事業所名から検索します。

表示位置に近づくと住所選択ウィジェットを読み込みます。

STEP 2

番地・建物名を入力

ここからは、組み込み先サイトのフォーム入力です。

フォームへ反映された住所

Address Selectorで住所を選択すると、ここに反映されます。

番地・建物名は、住所を選択したあとにサイト側フォームで入力します。

この欄への入力だけでは、新しい住所検索は行いません。
STEP 3

完成住所を確認

完成した住所

住所を選択し、番地・建物名を入力すると、ここに完成した住所を表示します。

利用準備中

Address Search API

郵便番号・住所検索APIを試す

検索項目・条件・値を選ぶと、APIで使うfilter式と実際のJSONレスポンスを並べて確認できます。

サンプル条件

クリックするとフォームとfilter previewだけを更新します。選択しても検索は始まりません。

Basic条件
最大3条件。ANDは;、ORは,として生成します。Basic modeでは括弧groupを扱いません。
高度な条件

展開中はrange、IN、OUT、Regexを選択できます。生成filterはread-onlyです。

RegexなどAdvanced filterの制約を見る

返す項目
部分指定では選んだfieldだけが返り、postcodeも自動追加されません。

APIで使うfilter

値を入力するとfilterを表示します。
Request
GET /api/v6/postcodes
limit
10
API keyはURLやpreviewへ表示しません。

検索条件を入力してください。

検索結果

検索前です。

検索後、ここに住所を表示します。

JSON

検索後、ここにJSONを表示します。
利用準備中

Address AutoComplete JavaScript

住所補完JavaScriptを試す

既存フォームに住所補完を追加した場合の動作を、そのまま試せます。

該当Docsを見る
入力例: 1000001
自動補完後、番地・建物名を入力して住所を完成できます。

表示位置に近づくと住所補完JavaScriptを読み込みます。

補完結果

7桁の郵便番号を入力すると、自動補完された項目をここで確認できます。