Memorize-Sheet

TypeScriptとOpenCV.jsを使った暗記シートWebアプリ

機能

• 画像の色分離処理: 画像から特定の色を抽出して非表示化
• スポイトツール: 画像上の任意の色を選択して非表示にできる
• 複数色選択: 複数の色を同時に選択可能
• 閾値調整: 色の範囲と最小サイズを調整可能
• HSV色空間での処理: RGB→HSV変換により正確な色検出
• ドラッグ式比較表示: 十字ハンドルをドラッグして元画像と加工後を切り替え表示
• 複数画像対応: ディレクトリ選択で複数の画像を一括処理

開発環境のセットアップ

必要な環境

• Node.js (v16以上推奨)
• npm

インストール

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

開発サーバーの起動

npm run dev

ブラウザが自動的に開き、http://localhost:3000 でアプリケーションが起動します。

ビルド

npm run build

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

プレビュー

ビルド後のアプリケーションをプレビューするには:

npm run preview

使い方

1. 画像を選択: 「画像ファイルを選択」から画像をアップロード（複数選択・ディレクトリ選択可能）
2. スポイトを有効化: 「スポイトで色を選択」ボタンをクリック
3. 色を選択: 画像上の非表示にしたい色（例：赤シート）をクリック
4. 閾値調整: 「色の範囲」スライダーで似た色の検出範囲を調整
5. ノイズ除去: 「最小サイズ」スライダーで小さなノイズを除外
6. 表示切り替え: 十字ハンドルをドラッグして元画像と加工後を比較
   • 左上と右下：元画像
   • 右上と左下：加工後画像
7. 複数色選択: 手順2-3を繰り返して複数の色を選択可能

技術スタック

• TypeScript: 型安全な開発
• Vite: 高速な開発サーバーとビルドツール
• OpenCV.js: 画像処理ライブラリ
• HTML5 Canvas: 画像の描画と処理

プロジェクト構造

Memorize-Sheet/
├── src/
│   ├── main.ts              # エントリーポイント
│   ├── imageProcessor.ts    # 画像処理クラス
│   ├── uiController.ts      # UIコントロールクラス
│   ├── opencv.d.ts          # OpenCV.js型定義
│   └── style.css            # スタイルシート
├── index.html               # HTMLエントリー
├── package.json             # 依存関係
├── tsconfig.json            # TypeScript設定
└── vite.config.ts           # Vite設定