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

のえる のえる
2020.03.06

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

 

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

 

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

はじめに

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

 

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

基礎画面を作る

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

 

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

 

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



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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

名前で検索できないの?

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

 

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

 

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

 

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

さいごに

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

 

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

 

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

 

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

スポンサーリンク

POPULAR

のえる

のえる

Full-stack Developer