フォルダの中身をCSVに変換するブラウザツールを作った – Folder To CSV

// File System Access APIを使ったフォルダ読み取り
async function readWithFileSystemAccess() {
  const dirHandle = await window.showDirectoryPicker({ mode: 'read' });
  state.folderName = dirHandle.name;
  return traverseDirectory(dirHandle, '');
}

// 再帰的にディレクトリを探索
async function traverseDirectory(dirHandle, path) {
  const results = [];
  for await (const entry of dirHandle.values()) {
    if (entry.kind === 'directory') {
      // サブフォルダだったら再帰呼び出し
      const sub = await traverseDirectory(entry, path ? path + '/' + entry.name : entry.name);
      results.push(...sub);
    } else {
      // ファイルだったら情報を取得
      const file = await entry.getFile();
      results.push({
        name: file.name,
        size: file.size,
        lastModified: file.lastModified,
        // ... 他のプロパティ
      });
    }
  }
  return results;
}

// ブラウザ判定とフォールバック
if ('showDirectoryPicker' in window && window.isSecureContext !== false) {
  // File System Access APIが使える環境
  files = await readWithFileSystemAccess();
} else {
  // レガシーモード: webkitdirectoryにフォールバック
  folderInput.click();
}

const exporters = {
  csv(data, cols) {
    const header = cols.map(c => c.label).join(',');
    const rows = data.map(f => cols.map(c => escCsv(getColumnValue(f, c.key))).join(','));
    // UTF-8 BOM付き（Excel対応）
    return { content: '\uFEFF' + header + '\n' + rows.join('\n'), mime: 'text/csv;charset=utf-8', ext: 'csv' };
  },
  json(data, cols) {
    const arr = data.map(f => {
      const o = {};
      cols.forEach(c => { o[c.label] = getColumnValue(f, c.key); });
      return o;
    });
    return { content: JSON.stringify(arr, null, 2), mime: 'application/json;charset=utf-8', ext: 'json' };
  },
  markdown(data, cols) {
    const header = '| ' + cols.map(c => c.label).join(' | ') + ' |';
    const sep = '| ' + cols.map(() => '---').join(' | ') + ' |';
    const rows = data.map(f => '| ' + cols.map(c => String(getColumnValue(f, c.key)).replace(/\|/g, '\\|')).join(' | ') + ' |');
    return { content: header + '\n' + sep + '\n' + rows.join('\n'), mime: 'text/markdown;charset=utf-8', ext: 'md' };
  },
  // ... html, tsv, xml も同様の構造
};

:root {
  --bg-dark: #0a0a1a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.08);
  --cyan: #00f0ff;
  --pink: #ff00aa;
  --yellow: #ffcc00;
}