某銀行のネット振込で確認番号の入力を自動化するスクリプト

塞がれたら嫌なので、具体的にどの銀行で使えるのかは言いませんし、どの銀行で使えるかも聞かないでください。(ヒントはSなんとか信託)
使い方と利用用途がわかる方だけ、ご活用ください。

# 追記

Chromeの拡張機能版を作りました。こっちのほうが簡単に使えると思います。

https://github.com/qwe0001/smtb_autofill

※拡張機能版を使う場合、以下に記載するScriptAutoRunnerを使ったやり方は使用しないでください。競合する可能性があるため


# デモ

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="PogOrPw" data-user="qwe001" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/qwe001/pen/PogOrPw">
  某銀行のネット振込で確認番号の入力を自動化するスクリプト</a> by qwe001 (<a href="https://codepen.io/qwe001">@qwe001</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# 実装

スクリプトはChromeの拡張機能の [ScriptAutoRunner](https://chromewebstore.google.com/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja) に登録することで使用可能です。

```javascript
const alphabet = ["A", "B", "C", "D", "E"];
const directCardNumbers = [
  ["01", "02", "03", "04", "05"], // A1,B1,C1,D1,E1 の数字を入力
  ["11", "12", "13", "14", "15"], // A2,B2,C2,D2,E2 の数字を入力
  ["21", "22", "23", "24", "25"], // A3,B3,C3,D3,E3 の数字を入力
  ["31", "32", "33", "34", "35"], // A4,B4,C4,D4,E4 の数字を入力
  ["41", "42", "43", "44", "45"], // A5,B5,C5,D5,E5 の数字を入力
];

/**
 * 確認番号のマッピングデータを作成する
 *
 * @return {Object-array} mappedCardNumbers - アルファベットごとに整理し直した確認番号一覧
 */
function makeDirectNumberMaps()
{
  const mappedCardNumbers = {};
  alphabet.forEach((letter, index) => {
    const columnNumbers = directCardNumbers.map(row => row[index]);
    mappedCardNumbers[letter] = columnNumbers; // e.g. { "A": ["01", "11", "21", "31", "41"] }
  });
  return mappedCardNumbers;
}

/**
 * 全角文字を半角文字に変換する
 *
 * @param {String} str - 変換対象の文字列
 * @return {String} halfWidthText - 変換された半角文字列
 */
function zenkaku2Hankaku(str)
{
  const halfWidthText = str.replace(/[Ａ-Ｚａ-ｚ０-９－]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
  });
  return halfWidthText;
}

/**
 * 現在求められている確認番号のキーを配列で返す
 *
 * @return {Array} currentKeys - 確認番号のキー配列 e.g. ["A-1", "B-2", "D-5"]
 */
function getCurrentKeys()
{
  let currentKeys = [];
  const targets = 'span.kakunin-no-label > nobr';
  const kakuninLabels = document.querySelectorAll(targets);

  kakuninLabels.forEach(label => {
    const labelText = label.textContent.trim().toUpperCase(); // e.g. "Ａ－１"
    const currentKey = zenkaku2Hankaku(labelText); // e.g. "A-1"
    currentKeys.push(currentKey);
  });

  console.log("currentKeys:", currentKeys);
  return currentKeys;
}

/**
 * 現在求められている確認番号の値を配列で返す
 *
 * @param {Array} currentKeys - 確認番号のキー配列 e.g. ["A-1", "B-2", "D-5"]
 * @return {Array} currentNumbers - 現在の確認番号の値配列 e.g. ["01", "12", "44"]
 */
function getCurrentNumbers(currentKeys)
{
  let currentNumbers = [];
  const directNumbers = makeDirectNumberMaps();

  currentKeys.map(currentKey => {
    const [columnLetter, rowNumber] = currentKey.split('-');
    const columnIndex = alphabet.indexOf(columnLetter);
    const rowIdx = parseInt(rowNumber, 10) - 1;

    if (columnIndex >= 0 && rowIdx >= 0 && directNumbers[columnLetter]) {
      const currentNumber = directNumbers[columnLetter][rowIdx];
      currentNumbers.push(currentNumber);
    }
  });

  console.log("currentNumbers:", currentNumbers);
  return currentNumbers;
}

/**
 * 入力欄に確認番号をセットする
 */
function autoFillNumbers()
{
  const currentKeys = getCurrentKeys();
  const currentNumbers = getCurrentNumbers(currentKeys);
  const targets = 'input.kakunin-no-field';
  const inputFields = document.querySelectorAll(targets);

  inputFields.forEach((field, index) => {
    field.value = currentNumbers[index] || ''; // 現在の番号がない場合は空文字列をセット
  });
}

// スクリプト実行
autoFillNumbers();
```

# 追記 [ScriptAutoRunner](https://chromewebstore.google.com/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja) の使い方について

以下の記事の説明がわかりやすかったです

https://qiita.com/itaya/items/36ed8b890c87ac47d9d3