kintoneで外部CSVを自動読み込み！JavaScriptで外部データを一覧に表示する方法

(function () {
  'use strict';

  // CSVファイルのURL（CORS対応されている必要あり）
  const CSV_URL = 'http://example/sample-csv/data.csv';

  // CSVを取得してパースする関数
  async function fetchAndParseCSV(url) {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const csvText = await response.text();
    return parseCSV(csvText);
  }

  // シンプルなCSVパーサー（カンマ区切り、ヘッダーあり）
  function parseCSV(data) {
    const lines = data.trim().split('\n');
    const headers = lines[0].split(',');

    return lines.slice(1).map(line => {
      const values = line.split(',');
      const row = {};
      headers.forEach((header, i) => {
        row[header.trim()] = values[i]?.trim();
      });
      return row;
    });
  }

  // 一覧画面でCSVを読み込んで表示
  kintone.events.on('app.record.index.show', async function (event) {
    if (document.getElementById('csv-view')) return;

    const container = document.createElement('div');
    container.id = 'csv-view';
    container.style.margin = '20px 0';
    container.style.padding = '10px';
    container.style.border = '1px solid #ccc';
    container.style.backgroundColor = '#f9f9f9';

    try {
      const records = await fetchAndParseCSV(CSV_URL);

      const table = document.createElement('table');
      table.border = 1;
      table.style.borderCollapse = 'collapse';
      table.style.width = '100%';

      const headerRow = document.createElement('tr');
      Object.keys(records[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        th.style.padding = '5px';
        headerRow.appendChild(th);
      });
      table.appendChild(headerRow);

      records.forEach(record => {
        const row = document.createElement('tr');
        Object.values(record).forEach(value => {
          const td = document.createElement('td');
          td.textContent = value;
          td.style.padding = '5px';
          row.appendChild(td);
        });
        table.appendChild(row);
      });

      container.appendChild(table);
    } catch (error) {
      container.textContent = 'CSVの読み込みに失敗しました: ' + error.message;
      container.style.color = 'red';
    }

    kintone.app.getHeaderSpaceElement().appendChild(container);
  });
})();