【API/マッシュアップ】都道府県→市町村のドリルダウン検索 | Wood-Roots:blog

2013
02/14

都道府県→市町村のドリルダウン検索

以前に都道府県→路線→駅というドリルダウン検索を実装する方法を紹介しましたが、同様にAPIを使って都道府県→市のドリルダウン検索を実装するスクリプトを紹介します。
スクリプトの基本構造はほぼ同じです。

今回はYahoo!の住所ディレクトリAPIを使用しています。

以下のコードでは市（都道府県の1階層下とみなされるエリア・・という解釈でいいでしょうか）までで止めていますが、市の住所コードをAPIに投げると町名まで取得することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//市町村検索
//初期設定
        var area_pref = $('#area_pref'); //都道府県が入るselect
        var area_city = $('#area_city'); //市町村が入るselect
        
        //最初に都道府県を読み込む
        $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?',
            {
             appid: 'あなたのアプリケーションID',
             ac: 'JP',
             output: 'json'
            },
            function(json){
                area_pref.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除
                $.each(json.Feature[0].Property.AddressDirectory,function(key,value){
                    var txt = String(this.Name);
                    var code = String(this.AreaCode);
                    area_pref.append('<option value="'+code+'">'+txt+"</option>");
                });
        });
                
        //都道府県から市町村を検索
        area_pref.on('change',function(){
            $.getJSON('http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/addressDirectory?callback=?',
            {
             appid: 'あなたのアプリケーションID',
             ac: area_pref.val(),
             output: 'json'
            },
            function(json){
                area_city.children().not(':first').remove();//一つ目のoption(選択してください）のみ残して削除
                $.each(json.Feature[0].Property.AddressDirectory,function(key,value){
                    var txt = String(this.Name);
                    area_city.append('<option value="'+txt+'">'+txt+"</option>");
                });
            });
        });

HTMLで重要なのはselectのID名だけで、ほかはどんなかたちでもかまいません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="module">
<h2>地域から探す</h2>
<dl class="table">
<dt>都道府県</dt>
<dd>
<select id="area_pref">
<option value="">都道府県を選択してください</option>
</select>
</dd>
</dl>
<dl class="table">
<dt>市町村</dt>
<dd>
<select id="area_city">
<option value="">市町村を選択してください</option>
</select>
</dd>
</dl>
</div>

この住所検索と路線検索を組み合わせることで、全国規模のポータルサイト・データベースサイトなどでも楽に検索機能を実装することが可能となります。
いずれもAPIの利用規約を順守してご利用ください。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

ブログを拝見し参考にしようとしたところ、私が今やろうとしていることはYOLPの利用規約に引っかかりそうだったのでお蔵入りとなったのですが、利用規約等の確認をしていた中で以下の記述を見つけました。

”アプリケーションIDは、Yahoo! JAPANのAPIの使用状況を把握し、不正行為を防ぐために使用されます。第三者に開示したり、第三者が参照できる場所に記載しないでください。”

（全文は以下）
http://www.yahoo-help.jp/app/answers/detail/p/537/a_id/43397

実際に公開されているソースを丸ごとコピー＆ペーストで見た目上は何の問題もなく動いてしまうため、appidはマスクした方が良いかと思います。

  • h_gatya_u
  • 2016年9月8日 8:37 PM

h_gatya_u様
コードを記述してそのままコピペしてしまってました。。。
ご指摘ありがとうございます。

Category

Archive

Search

Social