シンプルながらユーザビリティに大きな貢献。郵便番号から住所を入力補完する「js-zip2address」 // MOONGIFT Archived

js-zip2addressはGoogle日本語入力APIを使い、Webブラウザ上での郵便番号から住所を入力補完する。

[/s2If]

zip2address.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトをはじめとして個人情報の入力フォームでは一般的になってきている郵便番号から住所を引く機能。実装方法は様々だか、この郵便番号と住所の変更は意外と回数が多い。

サンプル

回数が多いということはメンテナンスコストが大きいことを意味している。都度アップデートされるだけでなく、削除されるデータも多い。そこでメンテナンスフリーで使える手法を紹介しよう。それがzip2address.jsになる。

zip2address.jsの特徴は大きく分けて二つある。一つはデータ元としてGoogle日本語入力APIを利用しているという点だ。確かにGoogle日本語入力では郵便番号を入れると住所を返却する機能がある。しかも返却フォーマットはJSONなので扱いが簡単だ。

処理の書き方

更新頻度も適切なようで、新しい郵便番号の変換も問題ない。もう一つはjQueryなどの外部ライブラリに依存していないことで、扱いがシンプルということだ。ともすれば管理が煩雑になりそうな郵便番号と住所の入力補完、zip2address.jsを使ってメンテナンスフリーでユーザビリティを高めよう。

[s2If !current_user_can(access_s2member_level1)]

[/s2If]

MOONGIFTはこう見る

住所、市町村区も区別して取得できるのでドロップダウンの表示を変更する場合や、テキストボックスに全て入力する場合などにも幅広く対応できるだろう。ライブラリ自体70行程度のシンプルなものなので、導入も行いやすい。

いちいちポップアップが開いたり、選択しないといけないようなやり方を提供する所も多いが、あまりにも使いづらい。js-zip2addressのようなスマートな解決法がベストではないだろうか。

[/s2If]