銀行くんのAPIを使用。銀行名と支店名の入力をサジェストで補助し
選択された銀行や支店に応じて、自動的に金融機関コードと店番を設定する。
フィールドを以下の通り配置する。
スペースの要素IDは、左から space1 space2 とする。
PC用のJavaScript / CSSファイル を下図のように設定。
ライブラリは以下のページにある。
sample.js は下記のように書く。
sample.js
(() => {
'use strict';
let selectedBankCode = null;
let bankText = null;
let branchText = null;
let bankAutocompleteInit = false;
let branchAutocompleteInit = false;
// オートコンプリート設定関数
const createAutocompleteForInput = (inputEl, type, getSource, onSelect) => {
if (!inputEl) return;
// jQuery UI のオートコンプリートを設定
$(inputEl).autocomplete({
// 候補を取得して表示する処理
source: async (request, response) => {
const q = request.term.trim(); // 入力された文字列を取得してトリミング
if (!q) {
response([]); // 空なら候補を返さず終了
return;
}
try {
// 非同期でデータ取得し、上位10件のみ整形して返す
const data = await getSource(q);
response(
data.slice(0, 10).map((item) => ({
label: `${item.name}(${item.code})`,
value: item.name,
code: item.code
}))
);
} catch (err) {
// 通信やAPIのエラーが出たら、ログ出力し、候補は空で返す
console.error(`${type} 検索エラー:`, err);
response([]);
}
},
// 選択された候補をTextコンポーネントを入力
select: (ev, ui) => {
onSelect(ui.item);
return false; // デフォルト動作を抑制
},
minLength: 1, // 最低1文字入力で候補検索を実行
delay: 300 // 過剰通信防止のため入力後300msの待機を設定
});
};
// 追加作成か編集画面が表示されたときに実行
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
// 初回のみスペースの位置調整用CSSを挿入
if (!document.getElementById('kuc-custom-styles')) {
const style = document.createElement('style');
style.id = 'kuc-custom-styles';
style.textContent = `
.bank-space { margin-left: 8px; display: inline-block; }
.branch-space { margin-left: 8px; display: inline-block; }
`;
document.head.appendChild(style);
}
const record = event.record;
// ユーザーが手動でコードを入力できないようにフィールドを非活性化
record.金融機関コード.disabled = true;
record.店番.disabled = true;
// [銀行名][支店名]フィールドを非表示にする
kintone.app.record.setFieldShown('銀行名', false);
kintone.app.record.setFieldShown('支店名', false);
// kintone UI Component の Textコンポーネント を配置するスペースを取得
const space1 = kintone.app.record.getSpaceElement('space1');
const space2 = kintone.app.record.getSpaceElement('space2');
if (!space1 || !space2) {
console.error('スペースフィールドが見つかりません');
return event;
}
// 銀行名の入力コンポーネントを生成
bankText = new Kuc.Text({
label: '銀行名',
requiredIcon: false,
value: record.銀行名.value || '',
error: '',
className: 'bank-text'
});
// 支店名の入力コンポーネントを生成
branchText = new Kuc.Text({
label: '支店名',
requiredIcon: false,
value: record.支店名.value || '',
error: '',
className: 'branch-text'
});
// スペースに生成したコンポーネントを追加
space1.classList.add('bank-space');
space2.classList.add('branch-space');
space1.appendChild(bankText);
space2.appendChild(branchText);
// 既存データに銀行コードがあれば状態を保持
if (record.銀行名.value && record.金融機関コード.value) {
selectedBankCode = record.金融機関コード.value;
}
// 銀行名コンポーネントの値が変更されたときの処理
bankText.addEventListener('change', (e) => {
const newVal = e?.detail?.value ?? '';
record.銀行名.value = newVal;
// 値がクリアされたらフィールドの値もクリア
if (!newVal) {
record.金融機関コード.value = '';
record.支店名.value = '';
record.店番.value = '';
if (branchText) branchText.value = '';
selectedBankCode = null;
}
// フィールドの値クリアをレコードに反映
kintone.app.record.set({ record });
});
// 支店名コンポーネントの値が変更されたときの処理
branchText.addEventListener('change', (e) => {
const newVal = e?.detail?.value ?? '';
record.支店名.value = newVal;
// 値が空になったら店番も消す
if (!newVal) record.店番.value = '';
kintone.app.record.set({ record });
});
// 銀行名が初めてフォーカスされたときにオートコンプリートを設定
bankText.addEventListener('focus', () => {
if (bankAutocompleteInit) return; // 初期化済みなら再設定しない
const input = bankText.querySelector?.('input');
if (!input) return;
// 銀行くんを利用して候補を取得
createAutocompleteForInput(
input,
'銀行',
async (q) => {
const res = await fetch(`https://bank.teraren.com/banks/search.json?name=${encodeURIComponent(q)}`);
return await res.json();
},
// 候補選択時に値を反映
(item) => {
bankText.value = item.value;
record.銀行名.value = item.value;
record.金融機関コード.value = item.code;
selectedBankCode = item.code;
// 銀行が変わったら支店情報はリセット
branchText.value = '';
record.支店名.value = '';
record.店番.value = '';
kintone.app.record.set({ record });
}
);
// 一度設定したら再実行しないようフラグを立てる
bankAutocompleteInit = true;
});
// 支店名が初めてフォーカスされたとき
branchText.addEventListener('focus', () => {
if (branchAutocompleteInit) return; // 初期化済みなら終了
const input = branchText.querySelector?.('input');
if (!input) return;
// 銀行コードが選択されてない場合は検索しない
createAutocompleteForInput(
input,
'支店',
async (q) => {
if (!selectedBankCode) return [];
const res = await fetch(`https://bank.teraren.com/banks/${selectedBankCode}/branches/search.json?name=${encodeURIComponent(q)}`);
return await res.json();
},
// 候補が選択されたら値を反映
(item) => {
branchText.value = item.value;
record.支店名.value = item.value;
record.店番.value = item.code;
kintone.app.record.set({ record });
}
);
// 初期化済みフラグをセット
branchAutocompleteInit = true;
});
return event;
});
// 表示崩れ防止のため詳細画面でスペースを隠す
kintone.events.on('app.record.detail.show', (event) => {
requestAnimationFrame(() => {
const spaceCodes = ['space1', 'space2'];
for (const code of spaceCodes) {
const el = kintone.app.record.getSpaceElement(code);
if (!el) continue;
// 親要素を探索して表示中のブロックを非表示にする
let p = el.parentElement;
while (p && p !== document.body) {
if (p.getBoundingClientRect().height > 1) {
p.style.display = 'none';
break;
}
p = p.parentElement;
}
// スペース自体も非表示にする
el.style.display = 'none';
}
});
return event;
});
// [銀行名][支店名]フィールドの値変更に連動して他フィールドを更新
kintone.events.on(
[
'app.record.create.change.銀行名',
'app.record.edit.change.銀行名',
'app.record.create.change.支店名',
'app.record.edit.change.支店名'
],
(event) => {
const record = event.record;
// 銀行名が空欄になったら、関連する全フィールドをクリア
if (!record.銀行名.value) {
record.金融機関コード.value = '';
record.支店名.value = '';
record.店番.value = '';
selectedBankCode = null;
if (branchText) branchText.value = '';
}
// 支店名が空欄になった場合は店番のみクリア
if (!record.支店名.value) {
record.店番.value = '';
}
return event;
}
);
})();