【kintone】銀行名と支店名から、金融機関コードと店番を検索

銀行くんのAPIを使用。銀行名と支店名の入力をサジェストで補助し
選択された銀行や支店に応じて、自動的に金融機関コードと店番を設定する。

(() => {
  'use strict';

  // 金融機関コードの一時保存用変数
  let selectedBankCode = null;

  // 追加画面と編集画面の表示時に処理開始
  kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
    const record = event.record;

    // コードは自動入力するので編集不可
    record.金融機関コード.disabled = true;
    record.店番.disabled = true;

    // 支店名は銀行名が未入力なら編集不可
    record.支店名.disabled = !record.銀行名.value;

    // 銀行名と支店名のinput要素を取得
    const getInput = (label) => {
      const labels = [...document.querySelectorAll('.control-label-gaia span')];
      const labelElement = labels.find(x => x.textContent.trim() === label);
      return labelElement?.closest('.control-gaia')?.querySelector('input');
    };

    const bankInput = getInput('銀行名');
    const branchInput = getInput('支店名');

    if (!bankInput || !branchInput) return;

    // 銀行名と支店名のサジェストを作成
    const makeSuggestBox = (input) => {
      const box = document.createElement('div');
      box.style = `
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        z-index: 9999;
        width: ${input.offsetWidth}px;
        max-height: 200px;
        overflow: auto;
        font-size: 13px;
        display: none;
      `;
      document.body.appendChild(box);
      return box;
    };

    const bankBox = makeSuggestBox(bankInput);
    const branchBox = makeSuggestBox(branchInput);

    // 銀行名が入力されたときの処理
    bankInput.addEventListener('input', async (e) => {
      const query = e.target.value.trim();
      if (!query) return bankBox.style.display = 'none';

      // 銀行名を銀行くんで部分一致検索
      const res = await fetch(`https://bank.teraren.com/banks/search.json?name=${encodeURIComponent(query)}`);
      const data = await res.json();

      bankBox.innerHTML = '';
      selectedBankCode = null;

      data.slice(0, 10).forEach(bank => {
        const div = document.createElement('div');
        div.textContent = `${bank.name}（${bank.code}）`;
        div.style = 'padding:6px;cursor:pointer';
        div.onclick = () => {
          // 銀行名を選択したときの値設定とサジェスト消去
          record.銀行名.value = bank.name;
          record.金融機関コード.value = bank.code;
          selectedBankCode = bank.code;
          record.支店名.value = '';
          record.店番.value = '';
          record.支店名.disabled = false;
          branchInput.value = '';
          bankBox.style.display = 'none';
          branchBox.style.display = 'none';
          kintone.app.record.set({ record });
        };
        bankBox.appendChild(div);
      });

      // 銀行名のサジェストの表示位置を設定
      const rect = bankInput.getBoundingClientRect();
      bankBox.style.top = `${window.scrollY + rect.bottom}px`;
      bankBox.style.left = `${window.scrollX + rect.left}px`;
      bankBox.style.display = 'block';
    });

    // 銀行名の候補以外をクリックしたときはサジェストを消す
    document.addEventListener('click', (e) => {
      if (!bankBox.contains(e.target) && e.target !== bankInput) {
        bankBox.style.display = 'none';
      }
    });

    // 支店名を銀行くんで部分一致検索
    branchInput.addEventListener('input', async (e) => {
      const query = e.target.value.trim();
      if (!selectedBankCode || !query) return branchBox.style.display = 'none';
      const res = await fetch(`https://bank.teraren.com/banks/${selectedBankCode}/branches/search.json?name=${encodeURIComponent(query)}`);
      const data = await res.json();

      branchBox.innerHTML = '';

      data.slice(0, 10).forEach(branch => {
        const div = document.createElement('div');
        div.textContent = `${branch.name}（${branch.code}）`;
        div.style = 'padding:6px;cursor:pointer';
        div.onclick = () => {
          // 支店名を選択したときの値設定とサジェスト消去
          record.支店名.value = branch.name;
          record.店番.value = branch.code;
          kintone.app.record.set({ record });
          branchBox.style.display = 'none';
        };
        branchBox.appendChild(div);
      });

      // 支店名のサジェストの表示位置を設定
      const rect = branchInput.getBoundingClientRect();
      branchBox.style.top = `${window.scrollY + rect.bottom}px`;
      branchBox.style.left = `${window.scrollX + rect.left}px`;
      branchBox.style.display = data.length ? 'block' : 'none';
    });

    // 支店名の候補以外をクリックしたときはサジェストを消す
    document.addEventListener('click', (e) => {
      if (!branchBox.contains(e.target) && e.target !== branchInput) {
        branchBox.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 = '';
      record.支店名.disabled = true;
      selectedBankCode = null;
    } else {
      record.支店名.disabled = false;
    }

    // 支店名が未入力なら店番をクリア
    if (!record.支店名.value) {
      record.店番.value = '';
    }

    return event;
  });
})();