README.md

task-circle/frontend

JavaScriptのライブラリ「React」を使ったフロントエンドWebアプリケーションです。

🌟 機能

ボード形式のタスク管理

タスクをドラッグ移動で並べ替えることができます。Todoリストの列を追加し、タスクを別の列へ移動することもできます。

直前の操作を元に戻す

リセットや削除をした直後に、その操作をキャンセルして元に戻すことができます。

ドラッグ移動＆リサイズ可能なタイマーボタン

PCではタイマーボタンのドラッグ移動と拡大縮小ができます。右クリックでタイマーの種類の切り替えができます。

ポモドーロタイマーに対応

作業と休憩を一定のサイクルで繰り返す時間管理術「ポモドーロ・テクニック」のためのタイマーに切り替えることができます。

タスク選択カーソルでもタイマーの開始/停止が可能

1つの記号▶に2つの意味を持たせることで、シンプルな見た目で快適な操作性を実現しました。

動的favicon＆動的タイトル

タイマー開始時や終了時にfaviconが変化し、タスク名や経過時間、残り時間がタイトルに反映されます。

ルーム機能

現在入室しているユーザーの状態をリアルタイムで表示します。

YouTubeの動画をBGMとして再生する

設定でYouTubeの動画のURLを貼ると、タイマー作動中にBGMとして流せます。

チクタク音

デフォルト設定ではGoogle Chromeのタブにスピーカーアイコンがギリギリ付くくらいの小さな音量で、タイマー作動中に毎秒チクタク音を鳴らします。これによって、アプリを開いたタブが非アクティブになっていても優先度が下がらず、タイマーのカウントの遅れを抑制することができます。

デスクトップ通知

タイマー終了時の通知をオンにできます。

Googleアカウントでログイン

ログインすると、異なるデバイス間でToDoリストや設定を同期できます。

※データは基本的にローカルストレージに保存され、ログイン時はサーバーのデータベースにも保存されます。 ※2022年11月21日追記: 現在不具合のため使えません。

クリップボードにコピー

タスクごとの経過時間や合計作業時間をクリップボードにコピーできます。

(クリップボード出力の例)

タスク1
01:13:44

課題
00:50:00

計 02:03:44

ツイートボタン

タスクや合計時間をツイートするボタンを表示させることができます。定型文として、よく使うハッシュタグなどを事前に登録しておくこともできます。

ダークモードに対応

ダークモードへの切り替えができます。

PWA(プログレッシブウェブアプリ)に対応

キャッシュが残っていればオフラインでも使えます(通信が必要な機能を除く)。アプリとしてホーム画面などに追加することもできます。

バージョン確認

このアプリはPWAに対応しているので、アプリのキャッシュがクライアント側に残っていると、古いバージョンのものが表示されることがあります。

そのため、手元のアプリのバージョンが最新のものかどうか確認できるようにしたかったのですが、アップデートのたびにわざわざバージョンの数字を書き換えるのは面倒でした。

そこで、クライアント側(フロントエンド)のアプリケーションのビルド時刻とサーバー側(バックエンド)のアプリケーションのビルド時刻を比較し、差が少なければ最新バージョンと判定するようにしています。