自分に合うタスク管理ツールが見つからないので作ってみた
背景
- 今日のゴール（今日やること、やらないといけないこと、会議などの予定）をひと目で把握したい
- 今日やらないこと、やらなくていいことは気にしたくない
- 今日のゴールが指定時間（例えば就業時間）内に終わるか把握したい
- ツールを使う上で画面切り替えを頻繁にしたくない（タスクリストの切り替え等）
- 誰かと話したり自分の考えをまとめる際にメモ帳、タスク管理ツール、Googleカレンダーなどを行き来するのが面倒なので一つにまとめたい
という思いのもとタスク管理ツールを探していたのですが、見つからなかったので自分で作ってみました。
作ったもの
「saNote - 今日のタスクに集中できるノート」というノートアプリを作りました。
できること
基本、背景に書いたようなことはできます。今日やることとやらないことを管理したり、今日の予定を管理したり、メモを書けたりが１画面でできるような感じです。
他、主にできることは下記のとおりです。
- 今日やらないことに「いつやるか」を設定可能（設定した日になったら今日やることとして表示される）
- 今日のタスクや予定の時間割がGoogleカレンダーのようなレイアウトで閲覧可能
- Googleカレンダーから今日の予定をインポート可能
- 今日の予定表や今日やること、今日の予定などを画像でダウンロード可能(SlackやSNSで今日の予定や進捗を共有する際に便利)
詳しくはこちらにまとめてあるのでよければご覧ください。
構成
現状、ドメイン以外は無料で利用できる構成にしています。
フロントエンドもバックエンドもmainブランチをpushしたらデプロイする仕組みになっているのでリリースはとても楽です。
CDN
CloudFlare
フロントエンド
Vercel
Next.js(TypeScript)
Chakra UI
ApolloClient
react-beautiful-dnd
react-swipeable-views
html2canvas
...
バックエンド
Heroku(Docker)
Ruby on Rails
graphql-ruby
graphql-batch
...
他
Firebase Authentication
Google Cloud Storage
Sentry
...
主な機能の実現方法
タスク移動
Client側のタスク移動にはreact-beautiful-dndを利用しています。当初はreact-dndとどちらを使うか迷いました。迷った結果、タスクを移動する際のアニメーションが綺麗でタスクが移動されている様がわかりやすかったので、react-beautiful-dndを採用しました。
Backend側のmutationは別途自前で作りました。タスクを移動すると複数のタスクに対してソート番号などのアップデートが必要になります。ここで、１つ１つのタスクに対してアップデートをするのではなく、一括でアップデートするようにしたことがポイントだと思ってます。（余談ですが、GraphQLのqueryでN+1問題が発生しないよう、graphql-batchなども導入してます。ご参考まで！）
予定表の画像ダウンロード
予定表の画像ダウンロードにはhtml2canvasを利用しています。当初はdom-to-imageとどちらを使うか迷いました。試してみた感じ、どちらも期待した通りに動くので判断は難しかったのですが、dom-to-imageは４年前から更新されていなさそうなのでhtml2canvasを採用しました。
実際に利用してみて、Client側で編集したDOMを画像でダウンロードしたり、オプションで細かく制御できるので非常に便利です。ただし、OSやブラウザが違うと、ダウンロードした画像が思ってたレイアウトと違うとか稀にあるので注意が必要です。ある程度の環境で実際に画像をダウンロードしてみてチェックすることをオススメします。
Googleカレンダーの予定取り込み
Google Calendar APIを利用しました。
このAPIを利用してClientの予定を取得するにはGoogleのOAuth認証でGoogleCalendarの予定参照を許可してもらう必要があります。予定参照の許可をOAuth認証でClientにリクエストするためにはGoogleに申請して審査してもらい、承認を得る必要があります。
申請してからのやりとりはメールでおこなわれ、場合によっては何回かやりとりが必要です。メールは送ってからすぐに返ってくるわけではなく、１日後とかに返信があったりするので承認を得るまでは時間がかかります。期限があって急いでいる場合などは注意が必要です。
リリースしてからの反応は？
5/5にリリースしてもうすぐ２週間が経とうとしています。正直、今まで作ったものの中で一番熱量を込めて作りました。当然、自分も使っていて結構気に入ってます。当初の課題「自分に合うタスク管理ツールが見つからない」については自分で作って解決することができました👏
さて、気になるユーザー数ですが10人です。正直、今まで作ったものの中で一番反応がないですが、ユーザー数が1人また1人と増えていくだけで嬉しいものがあります。反応があまりない要因はたくさんあると思いますが、これから１つ１つ紐解いて、解決していくのも面白そうです。
上述のようにリリース後の反応はあまりないのですが、自分が求めているものを作って実際に使っているので後悔はなく、自分で使っているからこそ今後サービスをアップデートしていきサービスをより使いやすくしていけそうなのでワクワクする気持ちが強いです。
フィードバックお待ちしております
ここまでお読みいただきありがとうございます。よろしければお試しいただき、フィードバックをいただけますと今後の励みになります。ご意見お待ちしております！
Discussion