入力が楽になる！？金融機関の自動入力を5分で作ろう

のえる

2020.03.06

入力をスムーズに行う機能は、UXを大きく向上させます。

しかし、入力補助にはそのためのデータが必要不可欠！

というわけで、今回は金融機関に関する自動入力補助機能の作り方を書いてみます。

1 はじめに
2 基礎画面を作る
3 金融機関コードから金融機関名を出す
4 支店コードからの支店情報を取得する
5 名前で検索できないの？
6 さいごに

はじめに

今回は ZenginCode / 統一金融機関コードを使用した方法です。

データを Clone or Download しておきましょう。

基礎画面を作る

まずは簡単な画面を用意しましょう。

サンプルでは下記のようなものを用意しました。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="js/jquery.min.js"></script>
        <title>テスト</title>
    </head>
    <body>
        <fieldset>
            <legend>銀行</legend>
            <input type="text" class="code" id="bank_code" value="" placeholder="0001" maxlength="4" />
            <input type="text" class="name" id="bank_name" value="" placeholder="みずほ" />
        </fieldset>
        <fieldset>
            <legend>支店</legend>
            <input type="text" class="code" id="bank_branch_code" value="" placeholder="001" maxlength="4" />
            <input type="text" class="name" id="bank_branch_name" value="" placeholder="東京営業部" />
        </fieldset>
    </body>
</html>

<!doctype html>

<head>

</head>

<body>

</fieldset>

</fieldset>

</body>

</html>

また、ファイル構成は下記のような感じです。

金融機関コードから金融機関名を出す

では金融機関コードから金融機関名を引き当てましょう。

そのためにはまず金融機関情報を取得するところから始めます。

<script>
    $(function() {
        var banksList = [];

        // 金融機関データJSONを読み込む
        $.getJSON('json/banks.json', function(json){
            banksList = Object.values(json);

        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log('JSONデータ[banks]の取得に失敗');
        });
    });
</script>

$(function() {

var banksList = [];

// 金融機関データJSONを読み込む

$.getJSON('json/banks.json', function(json){

banksList = Object.values(json);

}).fail(function(jqXHR, textStatus, errorThrown) {

console.log('JSONデータ[banks]の取得に失敗');

});

</script>

同一ドメイン限定ではありますが、これで金融機関情報のJSONデータを取得することができます。

ポイントは Object.values(json) でしょうか。

後々の取り回しのしやすさを考えてオブジェクト配列へと変換しています。

そして、金融機関コードが変更された時のイベントを追加していきます。

<script>
    $(function() {
        var banksList = [];

        // 金融機関データJSONを読み込む
        $.getJSON('json/banks.json', function(json){
            banksList = Object.values(json);

        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log('JSONデータ[banks]の取得に失敗');
        });

        // 金融機関コード変更時
        $('input#bank_code').on('change', function(e){
            let bankCode = $(this).val().toString();

            let bank = banksList.find((data, idx) => {
                return data.code === bankCode;
            });
            if(bank != void 0) {
                $('input#bank_name').val(bank.name);
            } else {
                $('input#bank_name').val('');
            }
        });
    });
</script>

$(function() {

var banksList = [];

// 金融機関データJSONを読み込む

$.getJSON('json/banks.json', function(json){

banksList = Object.values(json);

}).fail(function(jqXHR, textStatus, errorThrown) {

console.log('JSONデータ[banks]の取得に失敗');

});

// 金融機関コード変更時

$('input#bank_code').on('change', function(e){

let bankCode = $(this).val().toString();

let bank = banksList.find((data, idx) => {

return data.code === bankCode;

});

if(bank != void 0) {

$('input#bank_name').val(bank.name);

} else {

$('input#bank_name').val('');

}

});

</script>

これで金融機関コードを入力すると、名前が表示されます。
サンプルを下記に用意しましたので、試してみましょう。

金融機関コード	金融機関名
0001	みずほ
0005	三菱ＵＦＪ
0009	三井住友
0010	りそな
0036	楽天
9900	ゆうちょ

支店コードからの支店情報を取得する

次は金融機関ごとの支店情報を取得しましょう。

今のままでは金融機関のデータのみなので、支店情報も取得する必要があります。

プログラム部分を下記のように改修しましょう。

<script>
    $(function() {
        var banksList = [];

        // 金融機関データJSONを読み込む
        $.getJSON('json/banks.json', function(json){
            banksList = Object.values(json);

        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log('JSONデータ[banks]の取得に失敗');
        });

        // 金融機関コード変更時
        $('input#bank_code').on('change', function(e){
            let bankCode = $(this).val().toString();

            let bank = banksList.find((data, idx) => {
                return data.code === bankCode;
            });
            if(bank != void 0) {
                $('input#bank_name').val(bank.name);
            } else {
                $('input#bank_name').val('');
            }

            // 支店情報をクリア
            $('input#bank_branch_code').val('');
            $('input#bank_branch_name').val('');
        });

        // 金融機関 支店コード変更時
        $('input#bank_branch_code').on('change', function(e){
            let bankCode = $('input#bank_code').val().toString();
            let bankBranchCode = $(this).val().toString();

            $.getJSON('json/branches/'+bankCode+'.json', function(json) {
                let bankBranchList = Object.values(json);
                let bankBranch = bankBranchList.find((data, idx) => {return data.code === bankBranchCode});
                if(bankBranch != void 0) {
                    $('input#bank_branch_name').val(bankBranch.name);
                } else {
                    $('input#bank_branch_name').val('');
                }

            }).fail(function(jqXHR, textStatus, errorThrown) {
                console.log('JSONデータ[branches]の取得に失敗');
            });
        });
    });
</script>

$(function() {

var banksList = [];

// 金融機関データJSONを読み込む

$.getJSON('json/banks.json', function(json){

banksList = Object.values(json);

}).fail(function(jqXHR, textStatus, errorThrown) {

console.log('JSONデータ[banks]の取得に失敗');

});

// 金融機関コード変更時

$('input#bank_code').on('change', function(e){

let bankCode = $(this).val().toString();

let bank = banksList.find((data, idx) => {

return data.code === bankCode;

});

if(bank != void 0) {

$('input#bank_name').val(bank.name);

} else {

$('input#bank_name').val('');

}

// 支店情報をクリア

$('input#bank_branch_code').val('');

$('input#bank_branch_name').val('');

});

// 金融機関支店コード変更時

$('input#bank_branch_code').on('change', function(e){

let bankCode = $('input#bank_code').val().toString();

let bankBranchCode = $(this).val().toString();

$.getJSON('json/branches/'+bankCode+'.json', function(json) {

let bankBranchList = Object.values(json);

let bankBranch = bankBranchList.find((data, idx) => {return data.code === bankBranchCode});

if(bankBranch != void 0) {

$('input#bank_branch_name').val(bankBranch.name);

} else {

$('input#bank_branch_name').val('');

}

}).fail(function(jqXHR, textStatus, errorThrown) {

console.log('JSONデータ[branches]の取得に失敗');

});

</script>

これで支店情報も取得することができます。

金融機関コードを入れた後に、支店のコードを入力してみましょう。
こちらも一応サンプルのコード一覧を置いておきます。

金融機関コード	金融機関名	支店コード	支店名
0001	みずほ	001	東京営業部
		440	大阪
		431	名古屋
0009	三井住友	015	東京中央
		710	大阪中央
		481	名古屋
0010	りそな	593	東京中央
		133	新大阪駅前
		710	名古屋
0036	楽天	101	本店
		716	楽天
		302	ＯＫＢ
9900	ゆうちょ	008	〇〇八
		648	六四八
		998	九九八

名前で検索できないの？

普通は 金融機関や支店の名前からコードを知りたい という意見が圧倒的に多いと思います。

これについては リアルタイム検索候補を出す、シノニム登録によるマッチングを実装する など、様々な方法があります。

ここではご紹介しませんが、様々なライブラリやサービスを駆使することで、よりユーザビリティを上げることができます。

ここまで実装出来た方はぜひ挑戦してみてください。

さいごに

この記事を書くとき、金融機関を検索するという情報があまり見つかりませんでした。

そのため、ニッチな記事になるかもしれません。

ですが、これを読まれた少数の方のお役に立てればと思います。

さいごになりますが、金融機関の情報は日夜変わりますので、そこはいろいろ工夫した方が良いでしょう。

おすすめ記事

POPULAR

のえる

Full-stack Developer

記事一覧

システムの一部を公開したい？それならリンクサーバーはどうでしょう

CocoaPodsからSwift Package Managerへ移行するには

のえる

Full-stack Developer

お休みはゲーム三昧。目指すは生涯自由人。ツナ缶大好き。

記事一覧

入力が楽になる！？金融機関の自動入力を5分で作ろう

はじめに

基礎画面を作る

金融機関コードから金融機関名を出す

支店コードからの支店情報を取得する

名前で検索できないの？

さいごに

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

イラストレーターで座標に変な小数点が入ったときに消す方法

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない

入力が楽になる！？金融機関の自動入力を5分で作ろう

はじめに

基礎画面を作る

金融機関コードから金融機関名を出す

支店コードからの支店情報を取得する

名前で検索できないの？

さいごに

【JavaScript】たった一行でconsole.logの出力を便利に制御する方法

jQueryはもう不要？2019年のフロントエンド事情を考えてみる

簡単にドラッグ&ドロップができるjquery.pep.jsを実装する【デモ有り】

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

イラストレーターで座標に変な小数点が入ったときに消す方法

Windows10, 11でタッチパッドを無効化できない方に試して欲しいこと

WebブラウザからWindowsアプリケーションを開く[追記あり]

非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法

イラストレーターで座標に変な小数点が入ったときに消す方法

Windows10, 11でタッチパッドを無効化できない方に試して欲しいこと

node.js のアプリを永続化(デーモン化)させる

iPadアプリがフルスクリーンにならない

WindowsのDockerでMySQLが起動しない