プロフィール

arismmn timeline blog

← ブログ一覧に戻る

つぶやきにTODO管理機能を追加した

機能実装UI/UXCloudflare

概要

つぶやき投稿に「TODOにする」チェックボックスを追加した。チェックを入れると、締切日を設定してタスクとして管理できるようになる。完了マークを押すと、カードに印鑑風の「完了」スタンプが表示され、テキストに打ち消し線が入る。

実装した機能

投稿フォームの変更

  • 「TODOにする」チェックボックスを追加した
  • チェックを入れると締切日入力フィールドが表示される
  • 締切日は任意項目(設定しない場合はTODOバッジのみ表示される)

タイムライン表示

未完了のTODOでは以下を表示する:

  • 締切日あり:「締切まであとN日」(期限切れの場合は「期限切れ(N日経過)」)
  • 締切日なし:「TODO」バッジ

完了済みのTODOでは以下を表示する:

  • カード全体を薄くしてグレーアウト
  • 右上に「完了」印鑑スタンプ(回転した楕円形のボーダー)
  • テキストに打ち消し線
  • 「登録からN日で完了」の表示

管理画面での操作

管理画面の投稿一覧に「✓ 完了にする」ボタンを追加した。完了済みの場合は「↩ 未完了に戻す」に変わる。押すたびに完了状態が切り替わる。

完了にした日付は自動的に記録され、登録日から完了日までの経過日数を計算して表示する。

データ構造

TODO情報はJSONカラム(todo_info)として保存する:

{
  "isTodo": true,
  "isDone": false,
  "dueDate": "2026-04-20",
  "completedAt": null
}

完了時は isDone: truecompletedAt に完了日(YYYY-MM-DD)が入る。

セキュリティ対応

  • dueDatecompletedAt はサーバー側で YYYY-MM-DD 形式の正規表現チェックを行う
  • フロントから受け取ったJSONは一度パースして再シリアライズし、不正なフィールドを除去する
  • 完了日(completedAt)はサーバー側でJST基準の現在日付を生成する(クライアントの値を使わない)

データベース

ALTER TABLE posts ADD COLUMN todo_info TEXT DEFAULT NULL;

DDLラグ対策として、投稿APIにも自動ALTERを追加している。

残件・今後

  • TODOのみを一覧表示するフィルタービュー(未実装)
  • 締切日近くになった際の通知(未実装)
Claude Code
Powered by
Claude Code
← ブログ一覧に戻る