住所フォームの作り方の記事を読んだ
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
読んだ。
住所フォームの最適解、知りたい。
オートコンプリートに最適化する
ブラウザのオートコンプリートで一番いい感じに入力できるように、作るフォームをオートコンプリート側が最適に入力できるようなものにする。
オートコンプリートの定義は
ここにある。
英語〜〜と思ったけど、Googleの開発者向けサイトに例が載っている。ありがたい。
最適なフォームの作成 | Web | Google Developers
- 郵便番号： postal-code
- 国名： country
- 都道府県： address-level1
- 市区町村： address-level2
- 住所（1フィールド形式）： street-address
- 住所（2フィールド形式）： address-line1 および address-line2
記事内の例のHTMLのように、これらをautocompleteに設定することでオートコンプリートが効く。
郵便番号は1フィールドにする
3桁-4桁みたいな入力フォームを見るが、これは良くないらしい。なぜならオートコンプリートに対応できないから。
オートコンプリートのpostal-codeはtextなのでnumberで定義しないようにする(そもそも0始まりがあるのでnumberで定義したらまずいけど)
そしてハイフンのありなしはどちらでも対応できるようにしておいて、APIが求めるハイフンのありなしの処理を行ってからリクエストをする。
住所補完
郵便番号を入力したあとの住所の補完機能について。
この記事で例が出ているように、
- 郵便番号を入力したら自動で住所が補完される
- 郵便番号を決定するボタンを用意し、そのボタンが押されたら住所が補完される
というのがある。住所補完専用の別画面はほぼ見ない。
このうち、ボタンを用意せず自動で補完されるような実装にする場合、オートコンプリートとの補完タイミングに気をつける。
オートコンプリートで補完されたあとに郵便番号の住所補完が自動で入ると、オートコンプリートで入力された値を上書きしてしまう。
また、ひとつの郵便番号に対し複数の住所候補がある場合がある。この場合は補完された住所が想定していたものにならない可能性があるので、補完されたあとに正しく編集できるようにする必要がある。
ボタンを用意する場合は手間が増えるが明示的で分かりやすい。
ボタンを用意する際の注意点は、郵便番号レコードの最大個数。
ひとつの郵便番号が色々な町にまたがっていることがあり、記事にあるように66件の町にまたがっているところもある。
そのため、補完する住所の選択肢を出す場合は、8件までモーダルで出し、それより多い場合はスクロールするなどの工夫が必要(90%は8件以内とのこと)
エラー処理
入力した郵便番号が間違っているなどの場合は正しいエラー文言を出す。
住所補完に失敗した場合は、補完ボタンを用意している場合はあえてエラーを出さなくても手入力してもらってもいいし、補完ボタンを用意している場合は意図して補完をしようとしているので、エラーを表示する。
住所のフィールド設計
住所の構造は色々あるんだな……。
この記事でおすすめされていたのは、
- 都道府県
- 市区町村
- 町名以下
に分ける。
地域情報の階層ごとに分けているので分析に使いやすいし、それぞれに入力ルールを適用できるため。
住所フィールドをひとつにまとめると、オートコンプリートがうまく効かなかったり、表記揺れなどを防ぐためのルールの適用が難しかったりする。
まとめ
ケンオールめちゃくちゃありがたい。API使いたくなる。