人月記

テックブログ

2021-12-03

個人向けタスク管理ツール Rydeen の紹介

個人のためのタスク管理ツール Rydeen を PWA で作っている。まだまだ途上だけど、いくつか機能ができて、考えていたことを実現できてきたので紹介する。

外観home

Rydeen とは

一言で表すと、早くてセキュアでプログレッシブなタスク管理ツール。プログレッシブなというのは PWA であることと、段階的にタスク管理できることの2つの意味を持たせている。

特徴

アプリの特徴を並べてみるとこんな感じ。

  • PWA 的特徴
    • 高速
      • 一度開くと次回からブラウザにキャッシュされたアプリが動くため表示が高速
      • 今後アプリのサイズが増えても表示が遅くなりづらい
    • オフラインファースト
      • データの保存にブラウザの IndexedDB を使い、サーバーのレスポンスを待たずに動作する
    • セキュア
      • サーバーにデータを保存しないため、複数端末でデータを同期できない代わりに情報流出のリスクがない
  • 段階的なタスク管理
    • 最初はただのチェックリストとして使い始めて、必要に応じて複雑なタスク管理もできる
    • 単数リストビュー、複数リストビュー、より高度なビュー(ボードなど)を使い分けられる
      • 最初は単数リストビューで始まり、タグを追加すると複数リストビューも使える
      • タグでステータスを有効にすると、ステータスつきリストビューとボードビューも使える

なんで作ったか

個人のタスクを管理するのにテキストファイルをよく使っていたのだけど、もう少しスマートにかつセキュリティレベルを落とさない方法が欲しかった。また、既存のタスク管理ツールを使っていて不満に感じたことを自分なりに解消してみたくなった。

機能の紹介

スター

star

タスクに印をつけてリストの上位に表示できる機能。細かい優先度付けはできないけれど、色々タスクがあるときにどれかにスターをつけてそれをやる、というフローが自然でしっくりくるので作った。

手動並び替え

manual sorting

タスクを細かく順番に並べたいときに使う機能。その日やることを順にしたいときなどに便利。ライブラリを使わずに自作。ドラッグアンドドロップの実装でブラウザによる挙動のずれが大変だった。

タグ

tags

タスクを特定の関心で分類する機能。タグは自由入力で、空白かカンマで区切って複数つけられる。

リストビュー型のタスク管理ツールは最初に色々リストを作ってその中にタスクを追加するものが多いけれど、最初に色々リストを作るというのが案外難しくそこまで使いこなせていない気がしている。

Rydeen では

  • 最初に全てのタスクが一覧できるリストビューがあって、タスクにタグをつけるとタグ向けリストビューが生える
  • タグがなくなればタグ向けリストビューがなくなる

ようにして、最初に色々リストを作るのを考えなくていいようにした。

内部的にはタスクのタグが追加更新削除されたときに、よしなにタグとタスクの紐付けを更新している。

コマンドメニュー

command-menu キーボードショートカットで便利なモーダルを開いて、そこから色々できる予定の機能。タスク管理をマウス使わずキーボードだけでやりたいという夢があって、ひとまず簡単な画面遷移ができるようにした。

ステータス

statuses タスクについて、初期値の未完了/完了以外にも状態を増やせる機能。

どう作るか迷ったのだけど、ステータスを増やしたいというのは要は特定の関心でまとめられたタスクについて増やしたいと仮定して、ステータスはタグの子要素で順序つきのものとした。

動きとしては、タグでステータスを有効にすると初期値の未完了/完了と連動する open, closed のステータスができて、間に任意のステータスを追加できる。タグそれぞれでステータスを定義できるため、タスクの種類に合わせてステータスを使い分けることができる。

ボードビュー

board

ボードビュー上でステータス毎にタスクを表示して管理できる機能。ひとまず1クリックでタスクのステータスを変えられる簡易的なものを作った。これでチェックリストではやりづらい少し混んだタスク管理もできるようになった。

PWA で作ってみた雑感

  • 表示がとにかく高速で、タスクを追加したいときに待つことがなく快適
  • オフラインファーストで落ちないため安心
  • PWA 向けにアイコンを色んなサイズ用意するのが手間
    • 個人的には各クライアント側でよしなにやって欲しい
  • IndexedDB の使い方に慣れていなくて手探り
    • 関連データの削除などを RDB と違い自前で書く必要がある
    • データの持ち方で参考になるものがあれば知りたい
  • ブラウザで最新の js が読まれたあと古い js が動いてエラーになることが稀にあって謎
    • 時間経過で直ってしまうので放置している
  • モバイルでも一部動くけれど、普段デスクトップ向けに開発しているといつの間にか壊れがち
    • いずれ壊れにくいよう調整したい

おわりに

ある程度の機能ができて、個人のタスク管理をそこそこ Rydeen でまかなえるようになってきた。高速かつセキュアで、段階的にタスク管理できるのが快適。

今後の開発としては、UI を洗練させたり、releases ページの Future plans に書いた機能の追加を考えている。

PWA でプログレッシブなタスク管理ツールに興味ある方はお試し下さい。