# TODOリストアプリ 使用マニュアル 対象ファイル: `todo_app.html` CSVファイルをデータベースとして使う、ブラウザだけで完結するTODOリストアプリです。家計簿アプリと同じ仕組み（CSV読み書き・自動保存・単一HTMLファイル）で作られています。サーバーやインストール作業は不要で、ファイルをダブルクリックするだけで使えます。 ## 1. 起動方法 `todo_app.html` をダブルクリックすると、既定のブラウザで開きます。初回はサンプルデータが表示されます。 推奨ブラウザ: Google Chrome または Microsoft Edge（最新版）。Safari / Firefox でも一覧表示・追加編集削除・CSVの読み込み/保存は問題なく使えますが、「同じファイルに上書き保存」機能のみ Chrome 系ブラウザ限定です（4-3節参照）。 ## 2. 画面構成 - **タスク一覧**: 登録済みのタスクが表形式で並びます。列見出しをクリックすると並び替えができます（初期状態は期限の昇順＝近い順）。 - **フィルタ**: 状態（未着手/進行中/完了）、カテゴリ、優先度、期限（開始日〜終了日）、タスク名・メモのキーワード検索で絞り込めます。 - **サマリー**: 現在表示中のタスク数・完了数・期限超過数を表示します。 - **グラフ**: カテゴリ別の未完了タスク数（表示範囲内）と、月別（期限ベース）の完了／未完了件数の推移を表示します。 期限超過（赤字表示）は、期限が今日より前で、かつ状態が「完了」でないタスクに対して自動的に判定されます。この判定はアプリを開いた時点の実際の日付を基準に行われます。 ## 3. 基本操作 ### 3-1. 新規登録 「＋ 新規登録」ボタンを押し、タスク内容・期限（任意）・状態・優先度・カテゴリ・メモを入力して「保存」を押します。タスク内容のみ必須で、期限は空欄でも登録できます。 ### 3-2. 編集・削除・完了切り替え 一覧の各行にある「完了にする」（完了タスクでは「未完了に戻す」）で状態をワンクリックで切り替えられます。細かく「進行中」に変更したい場合は「編集」から状態を選び直してください。削除時は確認ダイアログが出ます。 ### 3-3. 検索・フィルタ・並び替え フィルタ欄に条件を入力すると即座に一覧が絞り込まれます。列見出し（期限・状態・優先度・カテゴリ・タスク・メモ）をクリックすると、その列で並び替わります（もう一度クリックすると逆順）。状態は「未着手→進行中→完了」、優先度は「低→中→高」の順で並び替わります（アルファベット順ではありません）。 ## 4. データの保存・永続化 家計簿アプリと同様、3種類の保存の仕組みがあります。 ### 4-1. 自動保存（ブラウザのlocalStorage） タスクを追加・編集・削除・完了切り替えするたびに、内容は自動的にブラウザの保存領域（localStorage）に記録されます。次に**同じファイルを同じブラウザで**開いたときは、このデータが復元され、サンプルデータには戻りません。 別のブラウザ・シークレットモード・サイトデータ削除・別コピーのファイルを開いた場合は自動保存が引き継がれず、サンプルデータで開始します。自動保存は正式なバックアップではないため、重要なデータは次項のCSV保存で残してください。 ### 4-2. CSVとして保存（エクスポート） 「CSVとして保存」を押すと、現在の全データが `todo_YYYY-MM-DD.csv` としてダウンロードされます。作業の区切りごとにこれを行っておくと安心です。 ### 4-3. CSVを開く（インポート）／同じファイルに上書き保存 「CSVを開く」から既存のCSVファイルを読み込むと、現在のデータが読み込んだ内容に置き換わります。Chrome系ブラウザでは、読み込み後に「同じファイルに上書き保存」ボタンが有効になり、元のファイルへ直接上書きできます（File System Access APIを使用、Safari/Firefoxでは非対応）。 ### 4-4. サンプルに戻す 現在のデータを破棄し、最初のサンプルデータに戻します。取り消しはできないため、必要なデータは先にCSV保存してください。 ## 5. CSVファイルの形式 | 列名 | 内容 | 例 | |---|---|---| | date | 期限（YYYY-MM-DD形式、空欄可） | 2026-09-10 | | status | 状態（`todo` / `doing` / `done`） | todo | | priority | 優先度（`high` / `medium` / `low`） | high | | category | カテゴリ名（自由記述可） | 仕事 | | title | タスク内容 | 資料を作成する | | memo | メモ（任意、カンマや改行を含む場合は自動でダブルクォートで囲まれます） | 水曜の会議用 | 1行目はヘッダー行（`date,status,priority,category,title,memo`）である必要があります。保存時はExcelで文字化けしないようBOM付きUTF-8で出力されます。 ## 6. 標準カテゴリ・状態・優先度 - **カテゴリ**: 仕事 / プライベート / 学習 / 健康 / 買い物 / その他 - **状態**: 未着手（todo） / 進行中（doing） / 完了（done） - **優先度**: 高（high） / 中（medium） / 低（low） 一覧に無いカテゴリ名を含むCSVも読み込めますが、その場合は登録・編集フォームのプルダウンには表示されません（一覧・フィルタ・グラフでは問題なく扱われます）。 ## 7. トラブルシューティング - **データが急にサンプルに戻った** → 4-1節を参照。別ブラウザ／シークレットモード／サイトデータ削除が原因である可能性が高いです。直前にエクスポートしたCSVがあれば「CSVを開く」で復元できます。 - **期限超過の件数が思ったより多い/少ない** → 判定は「アプリを開いたその日」を基準に行われるため、日をまたぐと件数は変わります。固定の日付ではありません。 - **CSVをExcelで開くと文字化けする** → 本アプリが出力するCSVはBOM付きUTF-8のため、通常のExcelでは問題なく開けます。文字化けする場合は、Excelのインポート機能で文字コードをUTF-8に指定して読み込んでください。 - **「同じファイルに上書き保存」ボタンが出ない** → Safari／Firefoxなど、File System Access APIに対応していないブラウザでは表示されません。「CSVとして保存」でのダウンロードをご利用ください。