プロジェクト概要 Project Overview
年齢とともに小さな文字が読みにくくなる問題を解決するため、⌘+スクロールによる直感的なズーム機能を中心に設計したテキストエディターです。Magic Mouse の指スライドと Cmd キーの組み合わせで、50〜400%の範囲で素早く拡大縮小できます。テキスト差分表示（Diff）や検索・置換、3種類のテーマ切り替えなど、日常的なテキスト編集に必要な機能を軽量なVanilla JavaScriptで実装しています。 This text editor was designed around intuitive zoom functionality using Cmd+scroll, solving the challenge of reading small text as we age. Combine Magic Mouse finger-slide with the Cmd key to quickly zoom between 50% and 400%. It includes text diff display, search and replace, three theme options, and all essential text editing features, built with lightweight Vanilla JavaScript.
主な機能 Key Features
直感的な操作性と視認性を最優先に設計された機能群です。 Features designed with intuitive usability and readability as top priorities.
⌘+スクロール ズーム ⌘+Scroll Zoom
⌘（Cmd）キーを押しながらスクロールで、50%〜400%の範囲でテキストを拡大縮小。ズーム中はGPU加速で滑らかに動き、停止後はフォントサイズに反映して鮮明な表示を実現するハイブリッド方式。ツールバーの+/-ボタンやCmd+0リセットにも対応。 Hold ⌘ (Cmd) and scroll to scale text from 50% to 400%. Hybrid approach: GPU-accelerated smooth zooming during scroll, then renders crisp text by adjusting font size when stopped. Also supports toolbar +/- buttons and Cmd+0 reset.
ドラッグナビゲーション Drag Navigation
Alt + マウスドラッグでテキスト表示位置を自由に調整。慣性スクロール付きで自然な操作感を提供します。 Alt + mouse drag to freely adjust text position. Includes inertia scrolling for a natural feel.
差分表示（Diff） Diff Display
Myers Diffアルゴリズムによる行単位+文字単位の差分検出。追加・削除・変更をカラーハイライトし、差分間ジャンプナビゲーションも搭載。 Line-level and character-level diff detection using the Myers Diff algorithm. Color-highlighted additions, deletions, and modifications with jump navigation.
デュアルペイン表示 Dual Pane View
2ファイルを同時に表示して比較。ドラッグ可能なスプリッターで表示比率を調整でき、スクロール同期機能も利用可能です。 View and compare two files simultaneously. Adjustable split ratio with draggable splitter and synchronized scrolling.
検索・置換 Search & Replace
Cmd+F で検索、Cmd+H で置換。大文字小文字区別、正規表現対応、リアルタイム検索ハイライトを搭載しています。 Cmd+F to search, Cmd+H to replace. Supports case sensitivity, regex, and real-time search highlighting.
テーマ切り替え Theme Switching
ライト・ダーク・ハイコントラストの3テーマ。ハイコントラストテーマは老眼ユーザー向けに最適化され、コントラスト比を最大限に高めています。 Three themes: Light, Dark, and High Contrast. The High Contrast theme is optimized for users with presbyopia, maximizing contrast ratio.
技術スタック Technical Stack
外部依存ゼロ。モダンなWeb標準技術のみで構築されたフルスクラッチ実装です。 Zero external dependencies. Built entirely from scratch using modern web standards.
Vanilla JavaScript (ES2022+)
フレームワーク不使用。EventBusパターンによるモジュール間通信で疎結合を実現。 No frameworks. Loosely-coupled modules communicating via EventBus pattern.
CSS Custom Properties
CSS変数によるテーマ管理。3テーマをリアルタイムに切り替え可能。 Theme management via CSS variables. Three themes switchable in real-time.
Myers Diff Algorithm
O(ND)計算量の差分検出。行単位+文字単位のハイブリッド差分。 O(ND) complexity diff detection. Hybrid line-level and character-level diffing.
File System Access API
ネイティブファイル操作。上書き保存・名前を付けて保存に対応。 Native file operations. Supports Save and Save As with direct file system access.
Hybrid Zoom System
CSS Transform(GPU加速)でスムーズ表示、停止後にフォントサイズ変更で鮮明化。 GPU-accelerated CSS Transform for smooth display, then crisp font-size adjustment on stop.
WCAG 2.1 AA
アクセシビリティ対応。ARIA属性、キーボードナビゲーション、色コントラスト4.5:1以上。 Accessibility compliant. ARIA attributes, keyboard navigation, color contrast 4.5:1+.
開発プロセス Development Process
AI支援による効率的な開発プロセスで、高品質なアプリケーションを短期間で実現しました。 Efficient AI-assisted development process delivering a high-quality application in a short timeframe.
Phase 1
要件定義・設計 Requirements & Design
2案の並列計画生成と自律評価。保守的アプローチと革新的アプローチを比較し、最適な設計を選択。WBS作成とクリティカルパス分析を実施。 Parallel generation of two planning approaches with autonomous evaluation. Compared conservative and innovative architectures to select the optimal design. WBS creation with critical path analysis.
Phase 2
並列実装（3プロトタイプ） Parallel Implementation (3 Prototypes)
3つの異なるアーキテクチャで並列実装。UX評価で最優秀プロトタイプを自律選択。コンポーネントベースアーキテクチャが採用されました。 Parallel implementation across three different architectures. Best prototype selected autonomously via UX evaluation. Component-based architecture was chosen.
Phase 3
テスト（238テスト合格） Testing (238 Tests Passed)
ユニットテスト・統合テストを238件作成し、全テスト合格を確認。クリティカルパス（Diff、ズーム、ファイル操作）は100%カバレッジ。 Created 238 unit and integration tests, all passing. Critical paths (Diff, Zoom, File Operations) achieved 100% coverage.
Phase 4
品質改善 Quality Improvement
パフォーマンス最適化とコード品質向上。テストカバレッジ80%以上を達成し、アクセシビリティ対応を強化しました。 Performance optimization and code quality improvement. Achieved 80%+ test coverage and enhanced accessibility compliance.
Phase 5
ドキュメント・公開準備 Documentation & Release
README.md、about.html（日英切替）、音声解説を生成。公開用ファイルのパス検証とレスポンシブ確認を実施。 Generated README.md, about.html (bilingual), and audio explanation. Verified public file paths and responsive design.
品質メトリクス Quality Metrics
テスト駆動開発により、高い品質基準を達成しています。 High quality standards achieved through test-driven development.
238
テスト数 Tests
100%
テスト合格率 Pass Rate
80%+
カバレッジ Coverage
0
外部依存 Dependencies
~100KB
総ファイルサイズ Total File Size
7
JSモジュール数 JS Modules