WixStudioでVeloを使う Step 32 「郵便番号から住所を入力」
はじめに
郵便番号を入力すると住所が自動入力されるフォームをよく見かける。これを今回はWixStudioで実現する。ウェブサイトにこのようなフォームを組み込むにはJavascriptを利用するが、それなりに手順や情報を容易に取得出来るので組み込みに苦労することは少ない。応用すればWixStudioにも同様の仕組みを用意することが出来る。でも、ちょっと考えた。WixStudioにはWixStudioに向いた組み込み方があるのではないだろうか。今回はこれを研究する。
目的
WixStudio版郵便番号を入力すると住所が自動入力されるフォームを作成する。
準備
特別な要素は使わない。標準で用意されている入力欄とWixStudioで Velo(コーディング) が使えれば大丈夫。
要素を配置する
今回は要素としてテキスト入力と住所入力を使う。
テキスト入力と住所入力
これらの要素は好きなところに配置すればいい。
ここで注意！テキスト入力と住所入力の用途について確認する。
- 住所入力は郵便番号の入力用に使うことになる。
- テキスト入力は住所が自動入力される要素として使う。
それぞれ項目タイトルは適切なものに変えておく。同時に要素のIDも変更しておく。
住所入力には「郵便番号」を入力させる
テキスト入力には「住所」を自動入力させる
それぞれの要素は以下の通り設定した。
| 項目タイトル | ID | タイプ |
|---|---|---|
| 郵便番号 | postalCodeInput |
住所入力 |
| 住所 | addressInput |
テキスト入力 |
郵便番号入力用に使う住所入力要素は設定を一部変更しておく。具体的には 住所のオートコンプリート... について。検索候補を日本に限定しておく。
住所の検索候補を日本に限定する
住所入力は優秀
住所入力は結構優秀。住所入力は住所の一部を入力すると候補が列挙される。この記事で一番重要な特徴。今回の種明かしになるけど「住所の一部を入力すると候補が列挙される」と言うことは、(住所の一部である)郵便番号を入力すると住所の候補が列挙されることにもなる。
住所の一部を入力すると候補が列挙される
通常、住所の自動入力を実現するならJavascript用に提供されているライブラリなどを利用する。しかし、WixStudioに用意されている住所入力要素は入力値から該当しそうな住所を探す処理が組み込まれている。そのため外部のライブラリをわざわざ用意する必要は無い。この特徴を活かせば良い。
これで準備完了。
スクリプトを書く
今回、必要になるコードは以下の通り。
/* L.00 */ $w.onReady(function () {
/* L.01 */ const $postalInput = $w('#postalCodeInput');
/* L.02 */ const $addressInput = $w('#addressInput');
/* L.03 */ $postalInput.onChange( event => {
/* L.04 */ const address = event.target.value;
/* L.05 */ if(address.hasOwnProperty('postalCode') && address.postalCode){
/* L.06 */ address.formatted = address.postalCode;
/* L.07 */ if(address.hasOwnProperty('subdivisions')){
/* L.08 */ $addressInput.value = address.subdivisions.map( subdivision => {
/* L.09 */ const re = /^ADMINISTRATIVE_AREA_LEVEL_\d$/i;
/* L.10 */ if( re.test(subdivision.type) ){
/* L.11 */ return subdivision.name;
/* L.12 */ }
/* L.13 */ return '';
/* L.14 */ }).join(' ')
/* L.15 */ $postalInput.value = address
/* L.16 */ }
/* L.17 */ }else{
/* L.18 */ $postalInput.value = null;
/* L.19 */ }
/* L.20 */ })
/* L.21 */ });
まずコードの前提としてL.01〜02で、住所入力要素を$postalInput、テキスト入力要素を$addressInputと扱うようにしている。以降のコードを読む際に注意。
さて、ポイントは5箇所。1つ目のポイントは処理のタイミング。今回は住所入力要素に変化が生じたときとしている(L.03:$postalInput.onChange( event => {... )。要するに郵便番号を入力し、候補を選択したタイミングで住所が自動入力されるようにしている。
2つ目のポイントはL.04で住所入力要素の戻り値を取得する点。住所入力要素に郵便番号を入力し、候補を選択された際にどのような情報を取得出来るのかと言うこと。結論としては以下のようなAddressオブジェクトが取得出来る。
{
"formatted": "日本 〒100-0001",
"country": "JP",
"location": {
"latitude": 35.6844651,
"longitude": 139.7537082
},
"streetAddress": {
"number": "",
"name": "",
"apt": "",
"formattedAddressLine": "100-0001"
},
"postalCode": "100-0001",
"subdivision": "13",
"subdivisions": [
{
"code": "13",
"name": "東京都",
"type": "ADMINISTRATIVE_AREA_LEVEL_1"
},
{
"code": "千代田区",
"name": "千代田区",
"type": "ADMINISTRATIVE_AREA_LEVEL_3"
},
{
"code": "",
"name": "",
"type": "ADMINISTRATIVE_AREA_LEVEL_4"
},
{
"code": "千代田",
"name": "千代田",
"type": "ADMINISTRATIVE_AREA_LEVEL_5"
},
{
"code": "JP",
"name": "日本",
"type": "COUNTRY"
}
],
"city": "千代田区"
}
この結果は住所入力要素に1000001と入力し、候補を選択した場合の結果。
住所入力に「1000001」と入力する
住所入力要素は、住所の一部(今回は、郵便番号)を入力し、列挙された候補を選択することで構造化された住所の情報を取得することが出来る。構造化されたという表現はやや難しい。ここではプログラムとして扱いやすい形式という理解でもいいと思う。扱いやすいというのも難しいか。例えば、東京タワーの住所は東京都港区芝公園。これを東京都,港区,芝公園というように区切っておくほうが含まれる情報の意味や役割がわかりやすい。住所には国や都道府県情報や市区町村や郵便番号など複数の情報で構成されているので、ある程度整理されている方が処理上都合が良い。住所入力要素は選択された住所の情報をプログラムで扱いやすい形式で取得出来る。
3つ目のポイントはL.05のif(address.hasOwnProperty('postalCode') && address.postalCode)。住所情報には郵便番号の情報が含まれる。郵便番号情報はpostalCodeとして扱われる。住所情報にこれが含まれているかどうかを確認する処理がこの判定処理になる。もしpostalCodeが含まれていない場合はL.18の$postalInput.value = null;で住所入力を空にしている。postalCodeが含まれている場合はL.06のaddress.formatted = address.postalCode;で住所入力欄の表示内容を郵便番号だけに整えている。※L.15も関連する。
4つ目のポイントはL.07からのaddress.subdivisionsに対する処理。ここには住所の情報(例：東京都港区芝公園)が整理されている。要は、住所を国・都道府県・市区町村というように行政区分(ADMINISTRATIVE_AREA)で分けて配列として用意されている。address.subdivisionsの情報から国以外の情報を、単なる文字列として結合し、テキスト入力(#addressInput)の値として登録する処理がL.08~14。これで郵便番号から特定される住所情報が自動入力が完成する。
動作確認
以下、今回作成したサンプルサイト。
郵便番号に105-0011を入力する。
住所入力に「105-0011」と入力する
候補が表示されるので選択すると住所が自動入力される。
住所が自動入力された
まとめ
郵便番号から住所を自動入力される仕組みをWixStudioで実現するならということで試しに作成してみた。外部のライブラリを導入する必要はなく、住所入力要素を活用する事で十分実現出来る。ただ、住所入力要素の使い方としては正直イマイチだと思う。そもそも、住所入力要素は郵便番号に限らず地域や施設名を入れることでも住所を検索し候補を提案してくれる。かなり優秀な要素だと思う。敢えて入力を郵便番号に制限する必要は無い。そして、住所と分ける必要も無い。でも、郵便番号と住所が分かれているフォームはたくさんあるためそちらに似せてフォームを作成してみるならということで実験的に作成してみた。
つづき
Discussion