Subscribed unsubscribe Subscribe Subscribe

JavaScriptで住所入力支援

「郵便番号から住所を補完する」的なJavaScriptはよくあるけれど、「郵便番号も分からない見知らぬ土地の住所を入力する」というときに簡単に入力できるものがあればいいな、と思ってちょっと作ってみた。
http://www1216u.sakura.ne.jp/address/
最初のロードにちょっと時間かかるかも…


郵便番号データを下記からダウンロードし、
郵便番号データダウンロード - 日本郵便
下記のようなコードでCSVファイルからjsonもしくはjsonp連想配列に変換した。

#!/usr/bin/env perl
use strict;
use warnings;
use utf8;

use Encode 'decode_utf8';
use JSON::XS 'encode_json';
use Unicode::Japanese;
use Text::CSV;

my $file = shift or die;

my $csv = Text::CSV->new;
open my $fh, "<:encoding(sjis)", $file or die "$file: $!";

my $dict = +{};
while (my $row = $csv->getline($fh)) {
    next if ($row->[8] eq '以下に掲載がない場合');
    $dict->{$row->[6]}{''}                       = decode_utf8(Unicode::Japanese->new($row->[3])->h2z->kata2hira->get);
    $dict->{$row->[6]}{$row->[7]}{''}            = decode_utf8(Unicode::Japanese->new($row->[4])->h2z->kata2hira->get);
    $dict->{$row->[6]}{$row->[7]}{$row->[8]}{''} = decode_utf8(Unicode::Japanese->new($row->[5])->h2z->kata2hira->get);
}
$csv->eof or $csv->error_diag();

my $json = encode_json($dict);
print "callback($json)";

各県ごとに作成したファイルを静的に配置し、クライアントJavaScriptでは最初にそれらを読み込む。入力があるごとに現在の入力とマッチするものを検索し候補をinput要素の下に出す。

上下キーで候補を選択し、右キーで確定(もしくはマウスクリック)、さらに先の候補があればそれを出す。半角スペースで 県/市/町 を区切る形になる仕様になってしまっている。。ひらがな対応しているので、上図の例のように読みを途中まで入力するだけでも絞り込める。
最初に挙げたURLでは東北6件のjsonデータをajaxで読み込んで使っている。最初の読み込みは遅いけど一度読み込めばキャッシュされるのかな? 結構はやくなる。
クロスドメインではどうだろう、と思ってjsdo.itでjsonpデータを取得して使うように作ってみたけど、正直いって最初の読み込みが遅すぎて使えない…。東京のデータだけで300KBとかになっちゃってるとは言え、転送が遅すぎるような…うーん なんでだろ

簡易住所入力補完 - jsdo.it - share JavaScript, HTML5 and CSS