TASK-M2026

授業の課題として作成しました。Gemini君に概要をまとめてもらったら、以下のようになるようです。 noteにも紹介を書いてます。 https://note.com/vivid_daphne3387/n/nd7bb8f558b0d?sub_rt=share_sb

1. システム概要・アーキテクチャ 本システムは、Node.js / Expressをバックエンド、SQLite3をデータベース、純粋なHTML5/CSS3/JavaScript (ES6+) をフロントエンドに採用したフルスタックWebアプリケーションである。外部の重厚なフロントエンドフレームワークに依存せず、軽量かつ保守性の高いSPA (Single Page Application) 構造を実現している。RESTful APIを介して非同期通信 (Fetch API) を行い、ページ遷移を伴わないリアルタイムなデータ更新を提供する。

2. 主要機能とシステム構造 タスク・ジャンル管理構造: タスクはジャンル（カテゴリ）、期限（日時）、優先度（5段階）、リピート設定（間隔・回数）を保持し、SQLiteの外部キー制約を用いてジャンルテーブルとリレーショナルに結合・一元管理される。 データ可視化エンジン (HTML5 Canvas): 時系列統合グラフ: 向こう8日間のタスク負荷と優先度の総和を算出・集約し、スタックバー（積み上げ棒グラフ）で描画。 当日分析円グラフ: 当日期限の未完了タスク割合をジャンル別に色分けして可視化。 動的ビュー・多角的なソート: 画面上で任意のジャンルを選択して並列表示できる動的フィルタリング機能に加え、残り時間・期限・優先度等による双方向ソートロジックを実装。

3. セキュリティおよび安全性の特徴 閲覧用と書き込み用の分離認証: 閲覧専用パスワード (Yomitori) と書き込み権限用パスワードを明確に分離。 クライアントサイドでの動的マスキング機能: 閲覧パスワード未解除時には、タスク名やコメントだけでなく、ドロップダウンやグラフ上のジャンル名に至るまで文字列長に応じた伏字 (●●●) に即座に変換し、情報漏洩を防ぐ。 堅牢性・安全対策: APIヘッダー (x-write-password) による書き込みアクセス制御、パラメータ化クエリ（Prepared Statement）によるSQLインジェクション対策、および出力時のサニタイズ処理によるXSS (クロスサイトスクリプティング) 防御を全域で徹底している。

4. 総括 直感的なUI/UXと堅牢なセキュリティ・アクセス制御、さらにはデータ分析視点を兼ね備えた、実用性と拡張性の高いタスク管理システムである。