TodoMemo

「今すること」を一番上に置き、Taskをまとめて管理できるシンプルなWebアプリです。

主な機能

• タスクの追加・編集・削除・完了、ドラッグやボタンによる優先順位変更
• 完了とは別の「アーカイブ」。あとから資料やリンクを見返したいタスクを、一括削除の対象外で残せます
• 完了とは別の「中止」。やらずに取りやめたタスクを、完了したタスクと区別して残せます
• Task番号の自動採番、Project、分類タグ、関連リンク、期限の管理
• 今月から3か月分の期限カレンダーと休日設定
• Markdown対応の内容欄と、Task情報のクリップボードコピー
• すべてのデータのJSONバックアップ／復元
• 複数のPCで使えるSupabase同期。Supabaseが最新の正本で、localStorage はその控え
• 古い内容が新しい内容を上書きしない仕組みと、上書き前の内容を戻せるクラウド履歴

タスクの状態

タスクは「すること」「完了」「中止」「アーカイブ」の4つの状態を行き来します。

状態	置き場所	使いどころ
すること	「すること」セクション	これから手を動かすタスク。優先順位を並び替えられます
完了	「Completed」セクション	終わったタスク。「先月以前の完了をすべて削除」でまとめて片づけられます
中止	「Canceled」セクション	やらずに取りやめたタスク。完了とは分けて残り、一括削除では消えません
アーカイブ	「Archived」セクション	終わったあとも、そのとき作った資料やリンクを見返したいタスク。一括削除では消えません

• 「すること」のカードの「•••」メニューから「中止にする」「アーカイブへ移動」を選ぶと、それぞれ中止・アーカイブへ入ります。
• 完了・中止・アーカイブのカードは、右上の「完了／中止／アーカイブ」のラジオボタンで直接切り替えられます。
• 中止・アーカイブのカードの「•••」メニューから「することに戻す」で元に戻せます。
• 中止・アーカイブしたタスクは、関連リンク・内容・期限・分類タグをそのまま保持します。カードからそのままURLの取り込みやコピーもできます。
• バックアップファイルの件数表示や、復元前の比較表にも中止・アーカイブの件数が並びます。

ローカルで開く

このアプリはビルドを必要としない静的Webアプリです。リポジトリのルートで任意のHTTPサーバーを起動し、表示されたURLへアクセスしてください。

python3 -m http.server 8000

その後、http://localhost:8000/ を開きます。file:// で直接開くのではなくHTTPサーバーを利用してください。

Vercelへ公開する

1. このリポジトリをVercelへインポートします。
2. Framework Presetは Other のままにします。
3. Build CommandとOutput Directoryは未指定のままデプロイします。
4. Project Settings → Environment Variablesに SUPABASE_URL と SUPABASE_ANON_KEY を登録し、再デプロイします。値はリポジトリへコミットしないでください。SUPABASE_SERVICE_ROLE_KEY は不要で、ブラウザーへ公開してはいけません。

index.html が通常のURL（/）のエントリーポイントです。Vercel用設定は vercel.json に含まれています。

データ保存について

ログインしていれば、Supabaseの <ユーザーID>/TodoMemo-latest.json が最新の正本です。localStorage は、その控え（オフライン用のコピー）として同じ内容を持ちます。ログインしていないときは従来どおり localStorage だけに保存され、そのPCの中だけで完結します。

通信に失敗してもローカル保存とアプリ操作には影響しません。接続が戻ったときにまとめて同期します。従来のJSONダウンロードとファイルからの復元も引き続き利用できます。

先祖帰り（古い内容での上書き）を防ぐ仕組み

複数のPCで使うと、しばらく開いていなかったPCが古い内容をクラウドへ書き戻してしまう事故が起こりがちです。TodoMemoは次の4つでこれを防ぎます。

1. 版番号による確認 — クラウドのファイルには sync.revision という版番号が入っています。各PCは「自分の内容が何版をもとにしているか」を覚えていて、書き込む直前にクラウドを読み直します。版が進んでいたら書き込みません。版番号は内部的な仕組みなので、画面には表示しません。
2. 自動で新しい方へ追いつく — そのPCに未同期の変更がなければ、クラウドの新しい内容を黙って取り込みます。ブラウザーのデータを消したPCや、新しく使い始めたPCも、クラウドを消すことなく最新を受け取ります。
3. 食い違ったときだけ確認する — 「他のPCが進んでいる」かつ「このPCにも未同期の変更がある」ときだけ、どちらを残すか尋ねます。決めるまで同期は止まり、クラウドは書き換わりません。選ばなかった方はクラウド履歴へ退避するので、選び間違えても戻せます。
4. 消えすぎ検知 — クラウドより件数が半分以下になる変更（全消去を含む）は、そのまま送らずに確認します。
5. 古いファイルからの復元をせき止める — 「バックアップから復元」は、時刻を見て現在のデータより古いファイルを判別します。古い場合は赤い警告と、現在／バックアップの件数を並べた比較表を出し、チェックボックスで確認するまで復元ボタンを押せません。件数が近くても時刻が古ければ止まります。

クラウド履歴（戻せる履歴）

クラウドが上書きされるたびに、上書き前の内容が <ユーザーID>/TodoMemo-history/ へ1件ずつ保管されます。画面上部の「クラウド履歴」からいつでも戻せます。バケットは他のアプリと共有できるよう、ファイル名・フォルダー名をアプリ名で始めています（TodoMemo-latest.json と TodoMemo-history/）。

• ファイルが増えるのは「クラウドが実際に書き換わった」ときだけです。編集しても内容が変わらなければ増えません。同期は約1.5秒でまとめられるため、連続した編集は1件にまとまります。
• 保持数は、直近30件はすべて、それより古いものは1日1件で最大30日分です。直前の操作ミスも、数日前の状態も戻せるようにしています。
• 一覧の先頭には「現在のクラウド」を表示します。その下が、クラウドがすでに次へ進んだ過去の状態です。
• 各項目に、その時点のタスク・Project・分類タグの件数を表示します。先頭の「現在のクラウド」と見比べて、どこまで戻るのかを判断できます。
• 各項目は日時（秒まで）で見分けます。連続した編集で同じ分に複数並ぶことがあるためです。
• 旧版が <ユーザーID>/history/ に保存した履歴も引き続き一覧に並び、戻せます。新しい履歴は TodoMemo-history/ にのみ保存されます。
• 件数はファイル名に含めているため、一覧はすぐ表示されます。件数を持たない古いファイルだけ、一覧を表示したあとに読み込んで補います。
• 戻す操作も新しい版として記録するため、他のPCは版番号が進んだものとして安全に追従します。

画面上部の表示の意味は次のとおりです。

表示	状態
クラウドと同期済み	最新。最終同期時刻を併記します
変更を同期待ち／クラウドと同期中…	送信の準備中・通信中
同期を保留中（…）	確認待ち。「同期の確認」から残す方を選びます
クラウドに接続できません（ローカルに保存済み）	通信不可。ローカルには保存済みで、復帰時に同期します
クラウド同期は未設定（ローカル保存のみ）	環境変数が未設定。localStorage だけで動作します

同期は、変更の約1.5秒後・タブに戻ったとき・1分ごと・「今すぐ同期」を押したときに実行します。

バックアップファイルからの復元

「バックアップから復元」を押すと、現在のデータとファイルの内容を並べて比較できます。

	現在のデータ	バックアップ
最終更新	2026年8月12日(水) 21:02	2026年8月12日(水) 18:01
タスク	13件（未完了13・完了0・中止0・アーカイブ0）	13件（未完了13・完了0・中止0・アーカイブ0）
分類タグ	0件	3件
Project	12件	12件

ファイルが現在のデータより古いときは、失われる時間の長さを示した赤い警告が出ます。復元ボタンは「古い内容で上書きする」に変わり、チェックボックスで確認するまで押せません。件数が同じでも時刻が古ければ止まるため、時間をさかのぼる操作を見落とさずに済みます。

「最終更新」は、データを最後に書き換えた時刻を記録して判定します。記録がない場合は、タスクやProjectの作成日時から推定します。どちらも読み取れないときは、その旨を表示して件数での判断を促します。

既存データからの移行

以前の自動バックアップで作られたファイルには版番号がありません。初回ログイン時に、そのPCの内容とクラウドの内容が同じであれば版番号を付けるだけで移行が完了します。内容が違う場合は、どちらが新しいか判断できないため一度だけ確認画面が出ます。以降は自動です。

Supabase同期の設定

1. Supabase Authenticationで Email プロバイダーを有効にし、利用者を作成します。
2. 作成済みの todo-backups バケットが Publicではないことを確認します。
3. StorageのSQL Editorで次のRLSポリシーを作成します。ユーザーIDを先頭フォルダーにすることで、本人のファイルだけを読み書きできます。

create policy "TodoMemo users can read own backup"
on storage.objects for select to authenticated
using (bucket_id = 'todo-backups' and (storage.foldername(name))[1] = (select auth.uid()::text));

create policy "TodoMemo users can create own backup"
on storage.objects for insert to authenticated
with check (bucket_id = 'todo-backups' and (storage.foldername(name))[1] = (select auth.uid()::text));

create policy "TodoMemo users can update own backup"
on storage.objects for update to authenticated
using (bucket_id = 'todo-backups' and (storage.foldername(name))[1] = (select auth.uid()::text))
with check (bucket_id = 'todo-backups' and (storage.foldername(name))[1] = (select auth.uid()::text));

-- 古いクラウド履歴の削除に必要です。未設定でも同期は動作しますが、履歴が増え続けます。
create policy "TodoMemo users can delete own backup"
on storage.objects for delete to authenticated
using (bucket_id = 'todo-backups' and (storage.foldername(name))[1] = (select auth.uid()::text));

4. Supabase Project Settings → APIでProject URLとanon/publishable keyを確認し、Vercelの SUPABASE_URL、SUPABASE_ANON_KEY に設定します。anon keyはRLS適用下で使う公開用キーですが、環境ごとの設定として管理します。
5. デプロイ後、画面上部からメールアドレスとパスワードでログインします。Supabaseクライアントがセッションをブラウザーに永続化するため、同じPC・同じブラウザーではログイン状態が保持されます。複数のPCで使う場合は、すべてのPCで同じアカウントにログインしてください。

ローカル開発でクラウド同期も確認する場合は vercel dev を使い、Vercel CLIの環境変数（例: .env.local。Git管理対象外）に同じ2変数を設定してください。単純なHTTPサーバーでは /api/supabase-config.js が動作しないため、クラウド同期は「未設定」と表示され、ローカル保存だけで動作します。