勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

  jQuery JavaScript

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前に似たようなことをメモしたが、こちらの方法だとデータベースを用意しないといけないのが面倒臭い。何か良い方法が無いか探したところAPIを利用することで簡単に実装できた。以下に実装方法をメモ。

 

API公式サイト

http://express.heartrails.com/api.html

無料で使用可能だがその際はクレジット記載が必要とのこと。

 

サンプル

https://taitan916.info/sample/train/

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>エリア→都道府県→路線→駅の絞り込み検索</title>
<style>
#footer{
position: absolute;
bottom: 1px;
right: 1px;
font-size: 10px;
}
p{
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<div>
<p>エリア</p>
<select name="area" id="area">
<option value="">選択してください。</option>
</select>
</div>
<div>
<p>都道府県</p>
<select name="prefecture" id="prefecture">
<option value="">エリアを選択してください。</option>
</select>
</div>
<div>
<p>路線</p>
<select name="line" id="line">
<option value="">都道府県を選択してください。</option>
</select>
</div>
<div>
<p>駅</p>
<select name="station" id="station">
<option value="">路線を選択してください。</option>
</select>
</div>
<div id="msg">
</div>
<div id="footer">
©HeartRails Express
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function(){
const api = '//express.heartrails.com/api/json';
//エリアデータ取得
$.ajax({
dataType : 'jsonp',
url: api + '?method=getAreas',
success: function( result ){
if( result.response.area ){
let area = '<option value="">選択してください。</option>';
$.each(result.response.area, function(index, value){
area += '<option value="' + value + '">' + value + '</option>';
$('#area').html(area);
})
return false;
}else{
alert('エラーが発生しました。');
}
}
});
//都道府県データ取得
$('#area').change(function(){
if( $(this).val() != '' ){
$.ajax({
dataType : 'jsonp',
url: api + '?method=getPrefectures&area=' + $(this).val(),
success: function( result ){
if( result.response.prefecture ){
let prefecture = '<option value="">選択してください。</option>';
$.each(result.response.prefecture, function(index, value){
prefecture += '<option value="' + value + '">' + value + '</option>';
$('#prefecture').html(prefecture);
})
return false;
}else{
alert('エラーが発生しました。');
}
}
});
}
});
//路線データ取得
$('#prefecture').change(function(){
if( $(this).val() != '' ){
$.ajax({
dataType : 'jsonp',
url: api + '?method=getLines&prefecture=' + $(this).val(),
success: function( result ){
if( result.response.line ){
let line = '<option value="">選択してください。</option>';
$.each(result.response.line, function(index, value){
line += '<option value="' + value + '">' + value + '</option>';
$('#line').html(line);
})
return false;
}else{
alert('エラーが発生しました。');
}
}
});
}
});
//駅データ取得
$('#line').change(function(){
if( $(this).val() != '' ){
$.ajax({
dataType : 'jsonp',
url: api + '?method=getStations&line=' + $(this).val(),
success: function( result ){
if( result.response.station ){
let station = '<option value="">選択してください。</option>';
$.each(result.response.station, function(index, value){
station += '<option value="' + value.name + '" data-line="' + value.line + '" data-next="' + value.next + '" data-postal="' + value.postal + '" data-prefecture="' + value.prefecture + '" data-prev="' + value.prev + '" data-x="' + value.x + '" data-y="' + value.y + '">' + value.name + '</option>';
$('#station').html(station);
})
return false;
}else{
alert('エラーが発生しました。');
}
}
});
}
});
//駅選択時
$('#station').change(function(){
if( $(this).val() != '' ){
let msg = '';
const selected = '#station option:selected';
msg += '<p>エリア:' + $('#area option:selected').val() + '</p>';
msg += '<p>都道府県:' + $(selected).data('prefecture') + '</p>';
msg += '<p>駅:' + $(this).val() + '</p>';
msg += '<p>路線:' + $(selected).data('line') + '</p>';
console.log($(selected).data('next'));
if( $(selected).data('next') ){
msg += '<p>次の駅:' + $(selected).data('next') + '</p>';
}
if( $(selected).data('prev') ){
msg += '<p>前の駅:' + $(selected).data('prev') + '</p>';
}
msg += '<p>郵便番号:' + $(selected).data('postal') + '</p>';
msg += '<p>経度:' + $(selected).data('x') + '</p>';
msg += '<p>緯度:' + $(selected).data('y') + '</p>';
$('#msg').html(msg);
}
});
});
</script>
</body>
</html>
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>エリア→都道府県→路線→駅の絞り込み検索</title> <style> #footer{ position: absolute; bottom: 1px; right: 1px; font-size: 10px; } p{ margin: 2px; padding: 2px; } </style> </head> <body> <div> <p>エリア</p> <select name="area" id="area"> <option value="">選択してください。</option> </select> </div> <div> <p>都道府県</p> <select name="prefecture" id="prefecture"> <option value="">エリアを選択してください。</option> </select> </div> <div> <p>路線</p> <select name="line" id="line"> <option value="">都道府県を選択してください。</option> </select> </div> <div> <p>駅</p> <select name="station" id="station"> <option value="">路線を選択してください。</option> </select> </div> <div id="msg"> </div> <div id="footer"> ©HeartRails Express </div> <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script> <script> $(function(){ const api = '//express.heartrails.com/api/json'; //エリアデータ取得 $.ajax({ dataType : 'jsonp', url: api + '?method=getAreas', success: function( result ){ if( result.response.area ){ let area = '<option value="">選択してください。</option>'; $.each(result.response.area, function(index, value){ area += '<option value="' + value + '">' + value + '</option>'; $('#area').html(area); }) return false; }else{ alert('エラーが発生しました。'); } } }); //都道府県データ取得 $('#area').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getPrefectures&area=' + $(this).val(), success: function( result ){ if( result.response.prefecture ){ let prefecture = '<option value="">選択してください。</option>'; $.each(result.response.prefecture, function(index, value){ prefecture += '<option value="' + value + '">' + value + '</option>'; $('#prefecture').html(prefecture); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //路線データ取得 $('#prefecture').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getLines&prefecture=' + $(this).val(), success: function( result ){ if( result.response.line ){ let line = '<option value="">選択してください。</option>'; $.each(result.response.line, function(index, value){ line += '<option value="' + value + '">' + value + '</option>'; $('#line').html(line); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //駅データ取得 $('#line').change(function(){ if( $(this).val() != '' ){ $.ajax({ dataType : 'jsonp', url: api + '?method=getStations&line=' + $(this).val(), success: function( result ){ if( result.response.station ){ let station = '<option value="">選択してください。</option>'; $.each(result.response.station, function(index, value){ station += '<option value="' + value.name + '" data-line="' + value.line + '" data-next="' + value.next + '" data-postal="' + value.postal + '" data-prefecture="' + value.prefecture + '" data-prev="' + value.prev + '" data-x="' + value.x + '" data-y="' + value.y + '">' + value.name + '</option>'; $('#station').html(station); }) return false; }else{ alert('エラーが発生しました。'); } } }); } }); //駅選択時 $('#station').change(function(){ if( $(this).val() != '' ){ let msg = ''; const selected = '#station option:selected'; msg += '<p>エリア:' + $('#area option:selected').val() + '</p>'; msg += '<p>都道府県:' + $(selected).data('prefecture') + '</p>'; msg += '<p>駅:' + $(this).val() + '</p>'; msg += '<p>路線:' + $(selected).data('line') + '</p>'; console.log($(selected).data('next')); if( $(selected).data('next') ){ msg += '<p>次の駅:' + $(selected).data('next') + '</p>'; } if( $(selected).data('prev') ){ msg += '<p>前の駅:' + $(selected).data('prev') + '</p>'; } msg += '<p>郵便番号:' + $(selected).data('postal') + '</p>'; msg += '<p>経度:' + $(selected).data('x') + '</p>'; msg += '<p>緯度:' + $(selected).data('y') + '</p>'; $('#msg').html(msg); } }); }); </script> </body> </html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>エリア→都道府県→路線→駅の絞り込み検索</title>
<style>
#footer{
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 10px;
}
p{
    margin: 2px;
    padding: 2px;
}
</style>
</head>
<body>

    <div>
        <p>エリア</p>
        <select name="area" id="area">
            <option value="">選択してください。</option>
        </select>
    </div>

    <div>
        <p>都道府県</p>
        <select name="prefecture" id="prefecture">
            <option value="">エリアを選択してください。</option>
        </select>
    </div>

    <div>
        <p>路線</p>
        <select name="line" id="line">
            <option value="">都道府県を選択してください。</option>
        </select>
    </div>

    <div>
        <p>駅</p>
        <select name="station" id="station">
            <option value="">路線を選択してください。</option>
        </select>
    </div>

    <div id="msg">

    </div>

    <div id="footer">
        ©HeartRails Express
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script>
    $(function(){

        const api = '//express.heartrails.com/api/json';

        //エリアデータ取得
        $.ajax({
            dataType : 'jsonp',
            url: api + '?method=getAreas',
            success: function( result ){
                if( result.response.area ){
                    let area = '<option value="">選択してください。</option>';
                    $.each(result.response.area, function(index, value){
                        area += '<option value="' + value + '">' + value + '</option>';
                        $('#area').html(area);
                    })
                    return false;
                }else{
                    alert('エラーが発生しました。');
                }
            }
        });

        //都道府県データ取得
        $('#area').change(function(){
            if( $(this).val() != '' ){
                $.ajax({
                dataType : 'jsonp',
                    url: api + '?method=getPrefectures&area=' + $(this).val(),
                    success: function( result ){
                        if( result.response.prefecture ){
                            let prefecture = '<option value="">選択してください。</option>';
                            $.each(result.response.prefecture, function(index, value){
                                prefecture += '<option value="' + value + '">' + value + '</option>';
                                $('#prefecture').html(prefecture);
                            })
                            return false;
                        }else{
                            alert('エラーが発生しました。');
                        }
                    }
                });
            }
        });

        //路線データ取得
        $('#prefecture').change(function(){
            if( $(this).val() != '' ){
                $.ajax({
                dataType : 'jsonp',
                    url: api + '?method=getLines&prefecture=' + $(this).val(),
                    success: function( result ){
                        if( result.response.line ){
                            let line = '<option value="">選択してください。</option>';
                            $.each(result.response.line, function(index, value){
                                line += '<option value="' + value + '">' + value + '</option>';
                                $('#line').html(line);
                            })
                            return false;
                        }else{
                            alert('エラーが発生しました。');
                        }
                    }
                });
            }
        });

        //駅データ取得
        $('#line').change(function(){
            if( $(this).val() != '' ){
                $.ajax({
                dataType : 'jsonp',
                    url: api + '?method=getStations&line=' + $(this).val(),
                    success: function( result ){
                        if( result.response.station ){
                            let station = '<option value="">選択してください。</option>';
                            $.each(result.response.station, function(index, value){
                                station += '<option value="' + value.name + '" data-line="' + value.line + '" data-next="' + value.next + '" data-postal="' + value.postal + '" data-prefecture="' + value.prefecture + '" data-prev="' + value.prev + '" data-x="' + value.x + '" data-y="' + value.y + '">' + value.name + '</option>';
                                $('#station').html(station);
                            })
                            return false;
                        }else{
                            alert('エラーが発生しました。');
                        }
                    }
                });
            }
        });

        //駅選択時
        $('#station').change(function(){
            if( $(this).val() != '' ){
                let msg = '';
                const selected = '#station option:selected';
                msg += '<p>エリア:' + $('#area option:selected').val() + '</p>';
                msg += '<p>都道府県:' + $(selected).data('prefecture') + '</p>';
                msg += '<p>駅:' + $(this).val() + '</p>';
                msg += '<p>路線:' + $(selected).data('line') + '</p>';
                console.log($(selected).data('next'));
                if( $(selected).data('next') ){
                    msg += '<p>次の駅:' + $(selected).data('next') + '</p>';
                }
                if( $(selected).data('prev') ){
                    msg += '<p>前の駅:' + $(selected).data('prev') + '</p>';
                }
                msg += '<p>郵便番号:' + $(selected).data('postal') + '</p>';
                msg += '<p>経度:' + $(selected).data('x') + '</p>';
                msg += '<p>緯度:' + $(selected).data('y') + '</p>';

                $('#msg').html(msg);
            }
        });

    });
    </script>
</body>
</html>

駅選択時に経度緯度や郵便番号を取得できるのでGoogleマップ等とも連携できそう。

 

所感

大規模サイトとかじゃなければ今回の方法を使っていけそう。100万リクエスト / 月を超える場合は有料プランを検討する。

 - jQuery JavaScript

  関連記事

jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法

GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

S