ENTEREAL

たくさんの労力や費用を掛けてようやく訪問してきてくれた潜在顧客をいかに確実/効率的に顧客へと導くのかという事は、すべてのネットビジネスを行っている方の永遠のテーマかと思います。

今回は、EFOの中でも住所入力に特化して書いていきます。

住所を入力する方法3つ

1. 手入力する

一番単純簡素な方法です。画面に表示された入力フォームにキーボードで文字を入力する方法です。

2. 選択肢から選ぶ

都道府県→市区町村→町域を順番に選択肢から選ぶ方法です。
UIとしては、セレクトボックスを複数用意して選択する場合もあれば、地図上の該当区域をクリックしてというものもあります。

3. 郵便番号から住所に自動変換する

上を見て頂く通り、どの方法にもメリット/デメリットがあります。それらメリット/デメリットは、対象とするユーザ層によっては、大きな障壁になったり、逆に全く問題にならない場合もありますので、単純にどれが良いかの結論はありません。

ここでは、いかにキーボード入力を少なくするかに着目し、「2」と「3」の方法についてサンプルを交えて、実装方法を解説します。

住所を選択肢から選ぶ方法

一番わかりやすい例ですと、「都道府県」「市区町村」「町域」の3つのセレクトボックスを用意してそれぞれに値を用意してとなるわけですが、仮に日本全国を対象とすると、都道府県だけで47個の選択肢になり、市区町村は47×数十個の選択肢、町域は47×数十個×数十個と途方もない数字になります。選択肢を一つひとつ用意するには途方もない時間が掛かります。という制約のため、都道府県はセレクトボックスを使い、市区町村以下はテキスト入力の形を持ったサイトも多くみられます。

ここでは、数千の選択肢の生成を自動化しようと考えています。自動化が出来ても選択肢が複数になると探すだけでも一苦労となってしまうので、最初の選択によって次の選択肢が自動的に絞り込まれていく仕組みを考えてみたいと思います。

要するに、機能の要件としては

• 47の選択肢を持つ都道府県セレクトを表示する
• 選択した都道府県に応じて、市区町村の選択肢を絞り込み表示する
• 選択した市区町村に応じて、町域の選択肢を絞り込み表示する
• 一度、選択した後に再度選択変更した場合にも、表示がおかしくならない
• 逆順に選択が出来ないようにする

昔は、国土地理院や郵政省の各種情報からデータベースを作成してたところですが、最近はネット上のフリーのAPIで簡単に実装ができるようになっています。

Yahooデベロッパーネットワーク 住所ディレクトリAPI

http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/addressdirectory.html

APIの仕組みは「東京都」で検索すると、XML/JSON形式のレスポンスの中に、東京都に属する市区町村が含まれます。「東京都港区」で検索すると、港区に属する町域がレスポンスとして得られます。それをJacaScript等でいい感じに操作して表示することで機能を実装できそうです。

処理手順/解説

• 初期処理：
• APIに「JP(日本)」でリクエストを飛ばし、47都道府県名を取得。
• 47都道府県名をセレクトボックスにセット。
• 都道府県が選択されていない状態の時は、市区町村のセレクトボックスを非表示
• 市区町村が選択されていない状態の時は、町域のセレクトボックスを非表示
• 都道府県選択：
• 選択された都道府県を指定してAPIでリクエストを飛ばし、その都道府県に属する市区町村名を取得。
• 市区町村名をセレクトボックスにセット。
• 市区町村名選択：
• 選択された市区町村名を指定してAPIでリクエストを飛ばし、その市区町村名に属する町域名を取得。
• 町域名をセレクトボックスにセット。