差分

このページの2つのバージョン間の差分を表示します。

--- resource:environment [2024/11/04 07:12] – [設計方針] zzdcbowl
+++ resource:environment [2024/12/22 06:25] (現在) – zzdcbowl
@@ 行 23: / 行 23: @@
 ===== 設計方針 =====
-<typo fc:red; bg:lightyellow; fs:150%; ff:san-serif;>extended text formatting</typo>.
+;;#
+<typo fc:black; bg:white; fs:150%; ff:SertoMardin;>ܐܶܓܰܪܬܳܟ</typo>
+;;#
   * 文字画像はFastAPIで小サービスをたてる
@@ 行 142: / 行 144: @@
   * 明るさ＋２０
   * コントラスト＋２０
+====== 仕様 ======
+エクスポート機能が漏れていたので、フェーズ6に**エクスポートと共有機能**を統合して追加しました。以下が修正済みの最終バージョンです。
+---
+## **段階的な開発フェーズの詳細 (統合・修正版)**
+---
+### **フェーズ1: 基礎アプリの構築** (MVP: Minimum Viable Product)
+**目標**:
+- ローカルのプレーンテキストファイルを開き、表示する。
+- テキスト選択範囲に簡単なアノテーションを付与できる。
+- アノテーションはメモリ内で保持し、SQLiteはまだ使わない。
+- **デフォルトフォントでテキストを表示**。
+**機能詳細**:
+- ファイル選択ダイアログでローカルのプレーンテキストファイルを開く。
+- テキストをElectronウィンドウ内に表示。
+- 選択したテキスト範囲にコメントやタグを付与できるようにする。
+- アノテーションはJSONファイルとしてローカルに保存。
+- **デフォルトフォントでのプレーンテキスト表示**。
+- 選択範囲をハイライトし、簡易的な可視化を行う。
+**技術要素**:
+- Electronの`dialog.showOpenDialog()`でファイル選択ダイアログを作成。
+- `fs.readFileSync`でテキストファイルを読み込む。
+- Reactの`useState`を使い、選択範囲の取得と状態管理。
+- `window.getSelection()`で選択されたテキストを取得。
+- `fs.writeFileSync`でJSONファイルへの保存処理。
+- Electronの基本ウィンドウ構築 (`BrowserWindow`)。
+---
+### **フェーズ2: アノテーションデータの永続化 (SQLite導入)**
+**目標**:
+- アノテーションデータをSQLiteに保存し、再起動後も復元できる。
+- テキストの表示サイズを変更可能にする。
+**機能詳細**:
+- SQLiteデータベースを初期化し、アノテーションデータを格納するテーブルを作成。
+- アノテーションデータには、選択範囲の`start`と`end`の位置、選択テキスト、タグ、コメントを保存。
+- アプリ起動時にSQLiteからデータを読み込み、該当範囲をハイライト。
+- テキストの表示サイズをスライダーやセレクトボックスで変更できるようにする。
+**技術要素**:
+- `better-sqlite3`または`sqlite3`モジュールを導入。
+- SQLiteデータベースの初期化とテーブル作成（`CREATE TABLE IF NOT EXISTS`）。
+- Reactの状態管理で表示サイズを調整（`useState`でサイズをリアルタイム変更）。
+- CSSで`font-size`を動的に変更。
+- ElectronのIPC通信を使い、React側からElectronプロセスへDB操作リクエストを送る。
+---
+### **フェーズ3: アノテーション管理UIの追加**
+**目標**:
+- 付与したアノテーションを一覧表示し、編集・削除が可能な管理UIを作成。
+- **表示フォントを選択可能にする**。
+**機能詳細**:
+- アノテーションリストを表示するサイドパネルを作成。
+- リスト内のアノテーションをクリックすると該当部分にスクロールしてハイライト。
+- アノテーションの編集・削除が可能。
+- フォント選択用のセレクトボックスを追加し、ユーザーが任意のフォントでテキストを表示できるようにする。
+- フォント変更が即座に反映される。
+**技術要素**:
+- Reactでサイドパネルコンポーネントを作成。
+- SQLiteからアノテーションデータを取得し、リスト表示。
+- フォント選択用の`<select>`要素を作成し、変更時にCSSで`font-family`を適用。
+- フォントリストは`window.getFonts()`で取得可能。
+---
+### **フェーズ4: 高度なアノテーション機能 (ズレ補正・テキストマッチング)**
+**目標**:
+- `TextQuoteSelector`を導入し、プレーンテキストの変更があってもアノテーションが再適用される。
+**機能詳細**:
+- アノテーション付与時に選択範囲のテキスト（`exact`）、前後のテキスト（`prefix`、`suffix`）を保存。
+- ファイル変更後も一致するテキストを特定し、アノテーションを適用する。
+- 一致しない場合は、エラーや候補を表示。
+**技術要素**:
+- `TextQuoteSelector`を実装し、前後関係でズレを補正。
+- 正規表現を使用して、選択テキストの位置を再検索。
+---
+### **フェーズ5: RTL言語のサポート (アラビア語・ヘブライ語など)**
+**目標**:
+- **右から左 (RTL) 言語**の表示とアノテーション付与をサポート。
+- アノテーション本文（body）はLTRで表示され、選択テキスト部分のみRTL。
+**機能詳細**:
+- テキストの一部がRTLでも正しく表示されるように、RTLモード切り替えボタンを追加。
+- アノテーション自体は通常のLTR方向で保存。
+- 選択されたテキストがRTLであることを記録。
+**技術要素**:
+- CSSの`direction: rtl`を適用。
+- `Unicode-bidi: embed`を使用し、特定要素のみにRTLを適用。
+- SQLiteのデータに`isRTL`フラグを追加して、選択テキストがRTLか判別。
+---
+### **フェーズ6: プロジェクト管理・複数ファイル対応 + エクスポート機能**
+**目標**:
+- 複数のファイルを管理し、プロジェクト単位でアノテーションを保存。
+- アノテーションをHTML、Markdown、JSON形式でエクスポートし、他のアプリケーションで利用可能にする。
+**機能詳細**:
+- プロジェクトディレクトリを選択し、フォルダ内の全テキストファイルにアノテーションを付与できる。
+- アノテーションをHTMLまたはMarkdownに埋め込んで出力。
+- Web Annotation Data Model (W3C) に準拠したJSON形式でエクスポート。
+**技術要素**:
+- Electronの`dialog.showOpenDialog()`でディレクトリ選択。
+- SQLiteでファイルごとにレコードを分け、プロジェクトIDで紐付け。
+- `fs.writeFile`を使い、HTML・Markdown・JSONを生成。
+---