見出し画像

お仕事をする個人向けのタスク計画・実行をサポートするWebアプリを作ってます

コピペテック

ご無沙汰しております。遠藤です。

前回の記事「お仕事をする個人向けのタスク計画・実行をサポートするWebアプリを作ってみることにした話」から半年以上経ってしまいましたが、ぼちぼち画面ができたので紹介したいと思います。

前回の記事の後、すぐには実装に手をつけず改めてPlanを使ってタスク管理を運用してみることにしていました。ところが、年が変わる頃に「Internal Server Error」が出てしばらく使えないことがあり実装を再開ことにしました。
今は、データこそクラウド（Firestore）に入っていますが、まとまった時間も取れてないので、アプリ自体はローカルで動かしている状況で公開はできていません。認証とFirestoreのデータモデルが固まったら公開したいところですがもうしばらく先になりそうです。

どのくらいできてきているか

前回の記事で紹介した画面イメージはこんな感じでした。

現在できているところは、こんな感じです。

左側のプロジェクトごとのタスク管理と右側のカレンダーで予定・作業記録をつけられるようなところまでは出来上がっており、データをマスクしていることからもわかりますが実際に仕事で使える程度にはできてきています。

ここまでで解決していることはだいたい以下のことができるようになってます。

  • 追加したタスクの実行予定を立てられる。

  • 実施したタスクを記録できる。

  • 現在表示している期間の作業時間をプロジェクトごとに集計してみることができる

Planを使用していて管理していたことは、概ね実現できています。

まだできないがすぐに実装したいこととしては

  • カレンダーアプリの予定を表示する。自分の場合はGoogleカレンダーを使っているのでGoogleカレンダーの予定を表示したい

  • タスク管理の基本機能、期限の設定やメモの入力、リンクの追加など

  • サブタスクの管理 (しかし予定を追加した後に件名を変えられるのでそれで事足りてはいて不要な気もしてきている)

  • 外部のアプリのタスクの取り込み (Github、Issues、他のタスクアプリ)

上記に加えて、実装していきたい昨日としては、タスクの優先度を確認して計画を立てるUIがほしいところです。

直近では優先度に関しては期限を設定できるようにして、優先度は並び替えで表すのでも十分かと思っていますが、プロジェクト横断的に直近数日にやらなければならないことを整理するビューが欲しいところです。
Todoistでいうところの「近日予定」ビューのようなものか、オリジナルのPlanの「Weekly Agenda」や最近試したsunsumaの実装されている以下のビューのようなイメージです。

※ 実際のところ、Sunsamaではカレンダーに落とすというような使い方は想定されていないので、残念ながら上記のような使い方には合わないです。

どのアプリも「課題管理システム(自分はGithubやJIRAなど)からタスクを収集 > 計画に落とす」という流れは意外とやりにくかったりするのでそこを解決できればと思っています。

やらないこと

今後も実装しない方針のものも改めて整理しておこうと思います。

  • チーム機能

  • 軽めのタスクの管理

  • モバイルアプリ

あくまで個人のためのタスク管理を対象とします。
また、このアプリで管理したいのは、日付をまたがるような重めタスクの管理が中心となります。GTDで言うところの2分以内に終わるようなタスクの管理はTodoistなどの既存のタスク管理の方が向いているので、瞬発的なタスクを管理するアプリと併用することを前提としています。
また、モバイルアプリも予定がないので、そこを補完するための他のタスクツールとの連携は実装したいところです。

システム構成、決まったもの

UIはReactで作っていますが、加えて以下のようなライブラリを選定しています。

Reduxは定番のステート管理モジュールですが、Toolkitになって以前よりだいぶ書くのが楽になりました。

ドラッグ & ドロップは今のトレンドはよくわからないのですが、よくできていそうなので選択しています。FullCalendarとの統合も考えて居るので変更するかもしれません。

Chakra-UIは、ReactのUIコンポーネントライブラリで最近採用を決めました。Tailwind-CSSと比較して、とっつきやすさから選んでいます。

以下はChakra-UIに置き換え中の画面ですが、ライブラリを使用することでデザインはだいぶきれいになりました。

技術的な課題

あくまでメモですが、悩んでいる課題を挙げておきます。

FullCalendarへのドロップとタスクの並べ替えが独立していて予定の追加のUXが悪い

FullCalendarのドラッグは3rdパーティライブラリの利用ができるので、FullCalendarのDroppableもDnDKitと統合したいと思ってます。

https://fullcalendar.io/docs/third-party-dragging

Firestoreの読み取りドキュメント数を軽減したい

Firestoreの読み取りの課金は、ドキュメント数での課金となります。タスクや予定がすべて1ドキュメントとして保存しているので、タスクと1週間の予定を表示するとそこそこ読み込みが発生します。
無料枠は5万回ですが、結構消費するので工夫しないとすぐに上限に達してしまいそうです。

Chakra-UIは細かいスタイル調整が難しい

例えば以下のCheckboxコンポーネント、チェックボックスのBorderを1pxにしてスリムにしたいのですが、そういった細かい調整が意外と難しいです。

一旦、Chakra-UIを選択してみましたが、社内で標準のUIライブラリの選定中だったりするので、それも兼ねて別のものも試そうかとも思ってます。

まとめ

とこんな感じで、社内のコピペテックもくもく会と気が向いた時間にぼちぼち開発していく予定です。

とりあえずの公開は、あとはFirestoreのセキュリティ設定とfirebase hostingへデプロイできれば可能そうなので、近々触れるものを公開したいところです。

この記事が気に入ったらサポートをしてみませんか？