Markdownでタスク管理が出来るウェブサービスを作った

きっかけ

  • Markdownでタスク管理が出来るウェブサービスを作りました
  • GitHubでissueやPRのタスクを管理するときに使っている人もいると思います
- [ ] タスク全消し
  • と書くとf:id:ichir9n1:20170201004817p:plainこのようにチェックボックスになります
  • スペース含めて5個の記号だけでチェックボックスが出来るので大変便利です
  • これを日常的にタスク管理に使いたいと思ったのがきっかけです
  • GitHub上でも似たようなことが出来ますが、いちいちGitHubのissueを建てるのがめんどくさいウェブサービスでやりたいという思いです。(多分既存サービスはない?一応調査しました)

2017/2/1 追記

- [ ] A
 - [ ] B
  - [ ] C
  • のようにAの作業のサブタスクとしてBがあってそのBのサブタスクとしてCがある。みたいな状況を再現したかったのです。

使い方

  • 使い方についてはできるだけ直感的に行えるようにしたつもりです
  • 主な使い方はメインタスクを追加してそれにサブタスクを紐付けていき、完了したらチェックを付けると言う形になります。

  • まず↑に貼っているリンク先に飛ぶと f:id:ichir9n1:20170201005243p:plain

  • こういう画面が出ます。最初サンプルデータが入っています。
  • 飛んだ状態はPreviewモードです。モードはMarkdownモードと2つあります。切り替えは上部にある[Preview]、[Markdown]を押します

Previewモード

  • Previewモードはボタンとキーボード入力で進捗バー付きでタスク管理が行えるモードです。
  • [Add Parent Task]を押すとメインタスクを追加出来ます。 f:id:ichir9n1:20170201010020p:plain
  • すると下にカードが追加され、このような画面になったと思います(入力フォームの中のテストは手動で入力しました)
  • 入力フォームの横に3つのボタンがあります。
  • 左から、サブタスク追加ボタン、コメント追加ボタン、タスク削除ボタンです。
  • サブタスク追加ボタンはメインタスクにサブタスクを追加することが出来ます。下に入力フォームが増えます。
  • 追加したサブタスクに対してサブタスク追加ボタンを押すとサブタスクのサブタスクを追加することが出来ます
  • f:id:ichir9n1:20170201010421p:plain
  • コメント追加ボタンはメインタスクにコメントを追加することが出来ます。下にテキストエリアが増えます。
  • コメントはテキストエリアの右についている×ボタンで削除することが出来ます。隠しているわけではなくて完全に削除します。
  • f:id:ichir9n1:20170201010536p:plain
  • タスク削除ボタンはメインタスクを削除します。この時、紐付いていたサブタスクやコメントも消えます。
  • メインタスクであれば、3つのボタンの隣に進捗バーがあると思います(サブタスクがあるサブタスクにも出現)
  • チェックを付けると進捗バーが変化します。f:id:ichir9n1:20170201010719p:plain
  • 直近のサブタスクの状況を見ているので、サブのサブにチェックを付けた場合(上の画像の場合)はサブの進捗バーのみ変化します。なので、メインタスクの進捗バーは変化していません。

Markdown

  • MarkdownモードはMarkdownを記述してPreviewモードに反映させることを目的として設けています。
  • f:id:ichir9n1:20170201011151p:plain
  • サンプルデータの状態でMarkdownモードにするとこんな感じです。
  • メインタスクがありサブタスクが1つ右に下がっていて、サブタスクのサブタスクが2つ右に下がっています。
  • コメントはついているタスクの下についています。
- [ ] Main
 - [ ] Sub
  - [ ] Sub Sub
  • この形式でMarkdownを書いてPreviewモードに切り替えるとMarkdownに合わせてPreviewモード画面を再構築します。
  • あとはMarkdownモードは現状では機能がないです。タブはスペース2です
  • 今のシステムでは、タスク状態を保存することが出来ないので、Markdownの文字をファイルに保存すると良いと思います。

全体

  • 今後、ほしいと思った機能は実装していくつもりですが、何か致命的なバグなどありましたら、このブログかGitHubリポジトリまで報告して頂けると幸いです。

https://github.com/ichiren1/markdown-task-manager

開発についてだらだらと

  • 思いついたのを実装してみて、使い心地を確かめたかったので凝ったことはしていません。
  • 今後、使ってみてイケそうだなと思ったら(便利だと思ったら)React.jsで書き直したいと思います。今はゴリゴリのJS(一応ES)です。
  • サーバーはbottleで建てて、テンプレートエンジンはMakoCSSコンポーネントはbulma、Markdownエディタの部分はAceを使いました。

https://bottlepy.org/docs/dev/

http://www.makotemplates.org/

http://bulma.io/

Ace - The High Performance Code Editor for the Web

  • bottleはルーティングのみ
  • Makoは殆ど使っていない
  • bulmaはめっちゃ使いました
  • Ace最高! CodeMirrorはちょっとうまく行かなかったです

Preview画面について

  • ESでクラスが使えるということでTaskクラスを作り、Taskクラスの子要素としてTaskクラスを付けていくという形で実装しました。
  • Taskクラスに完了しているかの状態も持たせて、Taskクラスベースで描画を行っています。
  • サブのサブの個数もメインタスクの進捗バーに入れても良かったのですが(実装的には問題ない)、サブのサブが1つ終わったこととサブが1つ終わったことが同価値だと思えなかったのでこういう実装にしました。
  • 進捗バーの挙動はかなりデバッグしたので多分矛盾がない動きになっていると思います。
  • メインタスクしかない時にチェックをしても完了になる
  • 子要素が全て完了したときに親要素を完了にする
  • 既に完了していたタスクにサブタスクが増えたときにメインタスクの完了が外れる
  • 完了していないサブタスクが削除され、それにともなってメインタスクの全てのサブタスクが完了になっているときにメインタスクを完了にする

Markdown画面について

  • Ace最高!なんでも出来る

HTML ⇔ Markdownについて

  • Marked.js https://github.com/chjj/marked というMarkdownをHTMLに変換してくれるものがありました。
  • しかし、これで変換するとネストした部分は同階層になってしまいます
- [ ] A
 - [ ] B
  - [ ] C

と書くと得られるHTMLは

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
</ul>
  • になってしまうのでネストしたデータが失われてしまいます。なので、正規表現です。
  • 正規表現でネストを保ったままTaskクラスを生成し、Previewモードで描画するという流れです。
  • 逆(Preview->Markdown)はTaskクラスがあるのでそれを基にHTMLを生成します。

終わりに

  • さくっと実装しようと思いましたが、4日はかかりました。
  • まだまだデザイン的にも機能的にも不十分ではあると思っているので開発を続けたいと思います。
  • それでも最低限使える段階には鳴っていると思うので使ってみていただければと思います。
  • GitHubリポジトリもあるので機能的な要望などありましたらご意見いただけると幸いです。実装するかは話が別だとして

2017/07/31 追記 - Atomの拡張で以下のようなものがありました。 atom.io