Markdownで作ったメモを簡単にチケット風のタスク管理ができる「task.Notes」を開発したよ!

はじめに

Markdownを使って書いたメモを手軽にチケット風のUIでタスク管理できるtask.Notes (タスクドットノート)を開発しました! tasknotes.nklab.dev

私は結構、メモや議事録を整理しながら個人作業用のタスクを作って管理をするので、そういうのにはまるタスク管理ツールが欲しくて作りました。JIRAやREDMINEのようなチケット管理は便利ですが、ちょっと個人のタスクを管理するのには面倒というかチケット作成の作業が重いんですよね。

task.NotesはまずMarkdownでメモを書き、それを簡単なルールに合わせることで自動的にチケット風のUIで管理できるようにしています。なので、議事録やメモを整理しながら軽快にタスクを作りたい人に最適です。

■ 動作イメージ

www.youtube.com

開発のモチベーション

一言でいえば「MS Wordより便利なタスク管理システムが欲しい!」という事です。

はい。言いたいことは分かります。でも待ってほしい。ちゃんと理由はあるんです。

元々、備忘録というか「後でこれする」的な内容をMTG中や思いついたはしからTODO化してたのですが、Redmineでは重いしVS Codeでは利便性が悪いしと思っていました。それをRebuild.fmの配信で誰かがG-Suiteでタスク管理をしてる的な話をされていたので、代わりにMS Word (+Sharepoint) を試してみたところ、ブラウザから使えて自動保存ですし見出しとアウトラインレイアウトで一覧性は見れますしスクショを直接貼り付けたりとなかなかメモ帳兼タスク管理ツールとして快適でした。

ただ、やはりWordはタスク管理ツールでは無いので問題点は山のようにあり、もうちょっとチケット的に管理できたらなぁ、とかいくつか不満もたまっていました。そんなおりにたまたまGoogleの「Tables」を試してみたところそれ自体も便利だったのですが、なによりUIを切り替えるという発想にインスピレーションをうけ、ちょうどMarkdown EditorのSimpleMDEを別プロダクトでも触っており作れそうだったので「試しに作ってみるか!」と始めたのが本プロダクトです。

そのためこのツールは「メモを思いついたはしから書いて後から整理しながら個人向けのチケットにする」「自身の作業記録的に一つのテーマに積み重ねて書いていく」という用途に特化しています。プロジェクト管理とか複数人での利用とかは今のところサポートしてないのでご注意ください。

使い方

まず、大きく分けて「Editモード」と「Ticketモード」があります。この二つは単に見た目を切り替えているだけで、内部のデータは同じものを見ています。

Editモード

f:id:pascal256:20201018193005p:plain

最も基本となるUIです。SimpleMDEをベースにしたMarkdownエディタです。半WYSIWYGなので書いたそばから見た目も変わります。また、元のSimpleMDEを少し拡張して画像を貼り付けると自動でアップロードして埋め込むようにしたので、スクリーンショット等をコピペすると色々と捗ります。

基本的にただのMarkdownですが、特定の記法に従うことでタスク化する事が出来ます

  • #のh1要素はタスク名になる
  • ## bodyマジックワードでそれ以降が本文になる
  • ## metaマジックワード### bodyの間に挟むことで期日やステータスを記述できる。このセクションは省略可能
  • メタセクション内に書けるメタ情報は以下の2つ
    • due_date:
    • status
# ここにタスク名
## meta
- due_date:2020-12-31
- status:Closed
## body
### ここにコンテンツ。
![image.png](https://storage.googleapis.com/ajfgeay8733/image/bb0c1b12-b2bc-4443-bbe3-9dd12870a2c1.png)

# タスク2
## body
* アイテム1

# タスク3
## meta
- due_date:2020/12/31
## body
ここにコンテンツ。

なおテキストは自動保存なので特にSaveなどのオペレーションは不要です。

Ticketモード (一覧)

f:id:pascal256:20201018194653p:plain

EditモードのMarkdownを自動的にJIRAやRedmineのようなチケットで表示します。

一覧画面では見出しをクリックすることで項目ごとに並べ替えをしたり、レコードをドラッグ&ドロップすることで移動させたりすることができます。

EditモードとTicketモードでは見てる値は同じため、こちらで順番を変えるとMarkdown側の中身も同時に変更されます。

Ticketモード (詳細)

Ticketモード (一覧)のリンクをクリックすると詳細ページに遷移します。

f:id:pascal256:20201018195341p:plain

詳細ページではタスク毎の詳細を確認したり編集したりできます。

特に、ステータス部分はクリックする事で「Open」「In Progress」「Close」の3つのどれかになります。

今後の予定

作ったばかりで色々機能不足ですが当面以下のあたりを強化しようと思います

  • Excelのシートのような用途毎のワークスペース機能
  • Closeしたタスクは自動で下にソート
  • 編集画面のアウトラインから任意の場所へのジャンプ
  • 認証の永続化
  • タグなどのメタ情報の拡充
  • デザインの改善

まとめ

私のようにメモや議事録をベースに自分の個人タスクを管理したい人がどのくらいいるか次第ですが、そういった人にはかなりはまるサービスなんじゃないかと思いますので、良ければぜひ使ってみてください。

まだとりあえず作ったレベルなので色々機能不足な面やUIがイケてないところもあるので、徐々に改修していきたいと思います。

それではHappy Hacking