ファイルチャンク分割ツール

大きなテキストファイルをClaudeで読み込める大きさに分割するWebアプリケーションです。

特徴

• テキストファイルを指定した文字数ごとにチャンク分割
• Claude 3.5 Sonnetの推奨サイズ（約20万文字）にプリセット対応
• オーバーラップ機能で前後のチャンクに重複部分を設定可能
• 各チャンクのプレビュー・個別ダウンロード機能
• 全チャンクの一括ダウンロード
• クリップボードへの簡単コピー機能

技術スタック

• React 18
• TypeScript
• Vite
• CSS

プロジェクト構造

チャンク/
├── src/
│   ├── components/          # Reactコンポーネント
│   │   ├── FileUploader.tsx      # ファイルアップロード
│   │   ├── ChunkSettings.tsx     # チャンク設定
│   │   ├── ChunkList.tsx         # チャンク一覧表示
│   │   └── DownloadActions.tsx   # ダウンロードアクション
│   ├── utils/               # ユーティリティ関数
│   │   └── chunker.ts            # チャンク分割ロジック
│   ├── types/               # TypeScript型定義
│   │   └── index.ts
│   ├── App.tsx             # メインアプリケーション
│   ├── App.css             # スタイル
│   └── main.tsx            # エントリーポイント
├── input/                  # サンプルデータ
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

インストール

# 依存関係をインストール
npm install

使い方

開発サーバーの起動

npm run dev

ブラウザで http://localhost:5173 を開いてアクセスできます。

ビルド

npm run build

ビルドされたファイルは dist/ ディレクトリに出力されます。

プレビュー

npm run preview

機能説明

1. ファイルアップロード

• 対応ファイル形式: .txt, .md, .json, .csv, .log
• ドラッグ&ドロップまたはボタンクリックでファイル選択
• ファイル情報（名前、サイズ、文字数）を表示

2. チャンク設定

• プリセット: 小(5万文字)、中(10万文字)、大(20万文字)
• カスタム設定:
  • 1チャンクあたりの最大文字数
  • オーバーラップ文字数（前後のチャンクで重複する文字数）

3. チャンク一覧

• 各チャンクの情報表示（番号、文字数、位置）
• プレビュー機能（100/200/500/1000文字）
• 個別ダウンロード

4. 一括操作

• 全チャンクの一括ダウンロード
• 全チャンクのクリップボードコピー
• クイックコピー（最初の5チャンク）

コンポーネント設計

FileUploader

ファイル選択とアップロード機能を提供します。

Props:

• onFileLoad: (fileInfo: FileInfo) => void - ファイル読み込み完了時のコールバック
• currentFile: FileInfo | null - 現在読み込まれているファイル情報

ChunkSettings

チャンク分割の設定を管理します。

Props:

• config: ChunkConfig - 現在の設定
• onConfigChange: (config: ChunkConfig) => void - 設定変更時のコールバック
• disabled?: boolean - 無効化フラグ

ChunkList

分割されたチャンクの一覧表示とプレビュー機能を提供します。

Props:

• chunks: TextChunk[] - チャンクの配列
• fileName: string - 元のファイル名

DownloadActions

チャンクのダウンロードとコピー機能を提供します。

Props:

• chunks: TextChunk[] - チャンクの配列
• fileName: string - 元のファイル名

ユーティリティ関数

chunkText

テキストをチャンクに分割します。

function chunkText(text: string, config: ChunkConfig): TextChunk[]

formatFileSize

ファイルサイズを人間が読みやすい形式に変換します。

function formatFileSize(bytes: number): string

downloadChunk

チャンクをテキストファイルとしてダウンロードします。

function downloadChunk(chunk: TextChunk, fileName: string): void

downloadAllChunks

全チャンクを一括ダウンロードします。

function downloadAllChunks(chunks: TextChunk[], fileName: string): void

型定義

ChunkConfig

interface ChunkConfig {
  maxCharsPerChunk: number;  // 1チャンクあたりの最大文字数
  overlapChars: number;      // オーバーラップ文字数
}

TextChunk

interface TextChunk {
  id: number;          // チャンクID
  content: string;     // チャンクの内容
  startIndex: number;  // 開始位置
  endIndex: number;    // 終了位置
  charCount: number;   // 文字数
}

FileInfo

interface FileInfo {
  name: string;    // ファイル名
  size: number;    // ファイルサイズ（バイト）
  type: string;    // MIMEタイプ
  content: string; // ファイルの内容
}

サンプルデータ

input/ ディレクトリにサンプルのテキストファイルが含まれています:

• 08-16 経営戦略ミーティング_ AI導入による業務効率化と人材獲得戦略-transcript.txt
• 総合レポート_ AIビジネス支援・風俗業界運営・建築事業分析-transcript.txt

ライセンス

MIT