タスク管理・かんばんボード(ドラッグ&ドロップ対応)

未着手,進行中,レビュー,完了の4レーンでタスク,ラベル,期限を整理できます.データは同じブラウザ内に未暗号化の状態で保存されます.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

ブラウザ内の4列でタスクの状態を管理します.

まず試せること

「資料を確認」というテスト用カードを追加し,次の列へ移動します.同じブラウザで再読み込みしてもカードの位置を確認できます.

利用条件

同じブラウザに保存します.クラウド同期や共同編集はありません.

データ保存とエクスポートに関する仕様

データは同じブラウザかつ同一オリジン(サイト)のlocalStorageに平文で保存され,クラウド同期やリアルタイム共同編集の機能はありません.サイトデータの削除やプライベートブラウズの終了によりデータを失うことがあります.

現在のタスクJSONおよび保存済みの生データの手動ダウンロードに対応していますが,ファイルの取り込み,自動バックアップ,過去履歴の復元には対応していません.ダウンロードしたJSONファイルを本ツールに再取り込みすることはできません.

別タブでの変更検知時やストレージ容量制限などのエラー発生時は書き込みを停止し,未保存の内容を画面のメモリ上に保持しますが,ページ再読み込み前に必要なJSONを手動で保存してください.競合制御はデータベーストランザクションではないため,完全な安全性を保証するものではありません.タッチ操作でカードをドラッグしづらい場合は,タスク編集画面からステータスを選択してレーンを移動してください.

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

四段階のステータス遷移とレーン構造

本カンバンボードは,タスクの状態を「todo(未着手)」「in-progress(進行中)」「review(レビュー)」「done(完了)」という4つの固定レーンで管理します.画面では全体のタスク配列(tasks)から各レーンの識別子(lane.id)に合うタスクをfilter関数で抽出して描画します.

WIP(仕掛かり中)の上限設定,同じレーン内での手動並べ替え,レーンの追加・削除には対応していません.

各レーンには未着手,進行中,レビュー,完了を見分ける色を設定しています.ドラッグ中は移動先候補のレーンに枠線と背景色の変化を加え,ドロップ先を視覚的に示します.ドロップするとカードのstatusが移動先レーンの値へ変わり,件数表示も現在の配列から再計算されます.

この画面は,WIP上限を超えたら移動を止めるような工程管理や,担当者別の権限管理を行いません.各レーンの件数は状況把握の表示であり,作業量の適否を自動判定する指標ではありません.4つの状態へ用途を絞っているため,自由度の高いプロジェクト管理機能よりも,カードの作成・編集・状態変更を中心とした簡易ボードです.

第2章

カード項目の構成とReactによる状態管理

タスクは,ID,タイトル,詳細,ステータス,期限,ラベル名,ラベル色,作成日時の8項目で構成され,Reactの状態として一つの配列に保持されます.作成・編集フォームでは各入力値を個別の状態へ結び付け,保存時に新しいタスクを追加するか,該当IDのタスクだけを置き換えます.ステータス変更でも配列内の該当要素だけを書き換えるため,他のタスクの内容は変更しません.

新規タスクのIDには,Date.now()のタイムスタンプ文字列を基盤とし,現在のタスク配列内で同一IDが衝突した場合にのみ数値サフィックス(-1, -2...)を付加する簡易IDを使用しています.これはランダム文字列や常時付与ではなく,画面内の一意性を保つ仕組みであり,複数端末や分散環境で重複を防ぐUUIDではありません.

日本語版のラベルは機能追加,バグ修正,文書,設計,開発,デザイン,テストの固定7種から選択しますが,編集時に別の選択肢へ明示変更しない限り,既存の英語ラベルや未知の追加ラベル,対応する表示色もそのまま保持されます.カードの並び順の手動ソート機能はなく,4レーン間の移動と状態管理が主目的です.

また,タスクのデータモデルに更新日時は存在せず,未知のプロパティとともに作成時刻を示す既存のcreatedAt(有限数値のタイムスタンプ)も編集操作によって変更されることなく維持されます.

第3章

HTML5 ドラッグ&ドロップAPIを用いた直感的な操作

カード移動にはブラウザ標準のHTML Drag and Drop APIを使用しています.カードのdraggable属性とonDragStartで対象IDを保持し,移動先レーンのonDragOverでドロップを許可します.ドロップ時は一致するタスクのstatusだけを移動先レーンへ変更し,同じ保存処理を通して画面とlocalStorageへ反映します.

ドラッグ中のレーンは枠線と背景色を変え,onDragEndで選択状態を解除します.

HTML Drag and Drop APIは,デスクトップのマウス操作では利用しやすい一方,タッチ端末やブラウザによって操作性が異なります.dataTransferへIDを入れる処理はありますが,すべてのiOS・Android端末でドラッグできることを保証するものではありません.

ドラッグしにくい環境では,カードを開いて編集画面のステータス選択からレーンを変更できます.この代替操作を用意することで,移動手段をドラッグだけに限定しない設計です.

第4章

localStorageによる同一オリジン保存とデータ揮発性の理解

タスクデータの保存にはブラウザ標準のlocalStorageを使います.作成,編集,移動,削除のたびにタスク配列をJSON文字列化し,agy-kanban-tasksというキーで現在のオリジンへ書き込みます.初回読取時のアクセス例外や解析失敗はすべて捕捉され,未ロード中の不用意な上書きを防ぎます.

不正な形式や破損した保存値が存在してもデモ用タスクで勝手に上書きすることはなく,既存データを残したまま空のボードとして表示します.書き込み時の例外や容量制限エラーも検知され,タブ内の最新編集内容は破棄せずに画面上へ未保存状態を表示し,最新状態での再試行や現在の配列JSONおよび保存生データの退避エクスポートを行えます.

外部変更やストレージ消去はstorageイベントと保存前の比較で検知され,編集中の下書きを保護するため自動上書きを停止します.

localStorageは端末全体やアカウント間で同期される領域ではなく,ブラウザとオリジンの組み合わせごとに独立して管理されます.プロトコル,ホスト名,ポート番号が異なれば別の保存先となります.本ツールにはクラウド同期,リアルタイム共同編集,履歴復元,ファイルからのインポート復元機能は備わっていません.

手動退避用のJSONエクスポート機能は提供していますが,別タブでの同時編集による競合やABA問題を完全に防ぐトランザクション機能はないため,同一ボードの編集は単一のタブで行う運用を推奨します.競合や保存失敗が発生した場合は,退避を行った上で明示的な再読込を行ってください.

また,サイトデータの消去やプライベートブラウズ終了,ブラウザの容量制限によるデータ喪失のリスクは残るため,恒久的な記録は別の管理システムへ転記してください.

第5章

期限表示の動的レンダリングと視覚的フィードバック

期限はYYYY-MM-DD形式の文字列から年月日を数値として取り出し,実在する暦日であることを検証した上で,端末のローカル当日カレンダー成分と日単位の指標で比較します.単なるDateインスタンスの文字列解釈や24時間の経過時間差に依存しないため,夏時間(DST)の切り替わりがあっても日付のズレを生じさせずに判定します.

完了レーンのタスクは期限の長短に関わらず一律で完了バッジを表示し,未完了タスクは期限超過で期限切れ,当日で今日が期限,2日以内は残り日数,それ以降は設定日付を表示します.このバッジ表示は描画時に再計算される仕組みであり,深夜0時の自動更新タイマーやプッシュ通知機能は備わっていません.

この期限機能は,ページを表示した時点の視覚的な目印です.メール,プッシュ通知,カレンダー連携,バックグラウンドでのリマインドは行いません.ページを閉じている間に期限が近づいても通知は届かないため,確実な予定管理が必要なタスクはカレンダーや通知対応の管理サービスと併用してください.

第6章

ブラウザ単一環境における個人作業での適切な使い分け

このカンバンボードは,同じ端末・ブラウザで扱う短期的な個人タスクの整理に向きます.4レーンと固定ラベルで,その日の作業,数日間の小さな進行表,試作中のチェック項目をまとめる用途です.アカウント,共同編集,クラウド同期,コメント,担当者,通知,変更履歴はないため,複数人のプロジェクト管理や長期ロードマップの正式な記録には向きません.

タスクの入力,状態変更,localStorageへの保存処理はブラウザのクライアント側コードで完結して実行されます.しかし,データは平文のJSON形式で保持され暗号化は施されていないため,端末のセキュリティや完全な並行データ安全性を保証するものではありません.

ブラウザ拡張機能の干渉,共有端末での閲覧,画面共有,プライベートブラウズの終了やストレージ初期化によるデータ消失のリスクが存在します.未保存の編集がある場合は離脱時に警告を表示しますが,モバイル環境やブラウザの強制終了,クライアント遷移では確実に動作するとは限りません.

万一のトラブルに備えて現在のタスク配列や保存生データのJSON退避機能を用意していますが,インポートによる自動復元機能はないため,機密情報や消失が許されない重要データは入力せず,正式な管理システムへ転記してください.

よくある質問(FAQ)

A.
データはお使いのブラウザの「localStorage(同一オリジン)」領域にのみ保存されます.クラウド同期やアカウント機能は実装されていないため,別のPCやスマートフォンから同じデータにアクセスすることはできません.ご利用中の特定の端末・ブラウザ専用のツールとなります.
A.
現在編集中のタスク配列をJSONファイルとしてダウンロードするエクスポート機能と,破損調査にも使えるストレージの生保存データをテキストとして書き出す退避機能を備えています.ただし,外部ファイルからデータを読み込んで復元するインポート機能や移行UI,クラウド同期や履歴管理機能は提供していません.そのため,手動で退避したJSONファイルは別環境への自動復元用ではなく,内容を手動で確認・参照するための控えとなります.
A.
カードのドラッグ移動にはHTML Drag and Drop APIを使用しており,タッチ端末やブラウザによっては操作できない,または操作しにくい場合があります.専用のタッチドラッグ処理はありません.ドラッグできない場合は,カードの編集画面でステータスを選んで移動できます.
A.
タスクカードの期限は画面描画時に端末のローカル日付と暦日単位で比較され,視覚的なバッジとして表示されます.完了レーンのタスクは期限に関係なく完了と表示され,未完了タスクは期限超過で期限切れ,当日は今日が期限,2日以内は残り日数,それより先は指定日付が表示されます.夏時間の切り替えにも安全なカレンダー日数計算を行っていますが,深夜0時の自動切り替えタイマーやプッシュ通知,メール通知機能はありません.
A.
データはブラウザのlocalStorageに保存されるため,単なるCookieの削除ではなく対象サイトの保存データを含む消去操作を行った場合や,プライベートブラウズを閉じた場合に失われ得ます.別プロファイルへの切替は参照先領域が変わるだけで元データ自体が消えるわけではなく,元のプロファイルに戻れば記録が残っている場合もあります.本ツールが保存データを自動削除やローテーションすることはなく,容量上限に達した場合も既存の保存データが消去されるのではなく新しい変更の保存が失敗します.書き込みエラー時は編集中の最新draftを退避して保存を再試行し,競合時は退避後に再読み込みを行ってください.形式破損時は自動復旧しないため,原本データを退避した上で手動修復してから明示的に再読み込みを行う必要があります.