👨🏻‍🌾スマートフォン用の表示で見る👨🏻‍🌾この広告は、90日以上更新していないブログに表示しています。このようにチェックボックスになりますスペース含めて5個の記号だけでチェックボックスが出来るので大変便利ですこれを日常的にタスク管理に使いたいと思ったのがきっかけですGitHub上でも似たようなことが出来ますが、いちいちGitHubのissueを建てるのがめんどくさいウェブサービスでやりたいという思いです。追記ktMarkDown.jsというマークダウンパーサがありました。CのようにAの作業のサブタスクとしてBがあってそのBのサブタスクとしてCがある。みたいな状況を再現したかったのです。使い方についてはできるだけ直感的に行えるようにしたつもりです主な使い方はメインタスクを追加してそれにサブタスクを紐付けていき、完了したらチェックを付けると言う形になります。↑に貼っているリンク先に飛ぶとこういう画面が出ます。最初サンプルデータが入っています。飛んだ状態はPreviewモードです。モードはMarkdownモードと2つあります。切り替えは上部にある[Preview]、[Markdown]を押しますPreviewモードPreviewモードはボタンとキーボード入力で進捗バー付きでタスク管理が行えるモードです。Task]を押すとメインタスクを追加出来ます。すると下にカードが追加され、このような画面になったと思います(入力フォームの中のテストは手動で入力しました)入力フォームの横に3つのボタンがあります。左から、サブタスク追加ボタン、コメント追加ボタン、タスク削除ボタンです。サブタスク追加ボタンはメインタスクにサブタスクを追加することが出来ます。下に入力フォームが増えます。追加したサブタスクに対してサブタスク追加ボタンを押すとサブタスクのサブタスクを追加することが出来ますコメント追加ボタンはメインタスクにコメントを追加することが出来ます。下にテキストエリアが増えます。コメントはテキストエリアの右についている×ボタンで削除することが出来ます。隠しているわけではなくて完全に削除します。タスク削除ボタンはメインタスクを削除します。この時、紐付いていたサブタスクやコメントも消えます。メインタスクであれば、3つのボタンの隣に進捗バーがあると思います(サブタスクがあるサブタスクにも出現)チェックを付けると進捗バーが変化します。直近のサブタスクの状況を見ているので、サブのサブにチェックを付けた場合(上の画像の場合)はサブの進捗バーのみ変化します。メインタスクの進捗バーは変化していません。MarkdownMarkdownモードはMarkdownを記述してPreviewモードに反映させることを目的として設けています。サンプルデータの状態でMarkdownモードにするとこんな感じです。メインタスクがありサブタスクが1つ右に下がっていて、サブタスクのサブタスクが2つ右に下がっています。コメントはついているタスクの下についています。Subこの形式でMarkdownを書いてPreviewモードに切り替えるとMarkdownに合わせてPreviewモード画面を再構築します。あとはMarkdownモードは現状では機能がないです。タブはスペース2です今のシステムでは、タスク状態を保存することが出来ないので、Markdownの文字をファイルに保存すると良いと思います。今後、ほしいと思った機能は実装していくつもりですが、何か致命的なバグなどありましたら、このブログかGitHubのリポジトリまで報告して頂けると幸いです。https://github.com/ichiren1/markdown-task-manager開発についてだらだらと思いついたのを実装してみて、使い心地を確かめたかったので凝ったことはしていません。今後、使ってみてイケそうだなと思ったら(便利だと思ったら)React.jsで書き直したいと思います。今はゴリゴリのJS(一応ES)です。サーバーはbottleで建てて、テンプレートエンジンはMako、CSSコンポーネントはbulma、Markdownエディタの部分はAceを使いました。CodeMirrorはちょっとうまく行かなかったですPreview画面についてESでクラスが使えるということでTaskクラスを作り、Taskクラスの子要素としてTaskクラスを付けていくという形で実装しました。Taskクラスに完了しているかの状態も持たせて、Taskクラスベースで描画を行っています。サブのサブの個数もメインタスクの進捗バーに入れても良かったのですが(実装的には問題ない)、サブのサブが1つ終わったこととサブが1つ終わったことが同価値だと思えなかったのでこういう実装にしました。進捗バーの挙動はかなりデバッグしたので多分矛盾がない動きになっていると思います。いうMarkdownをHTMLに変換してくれるものがありました。<li>C</li></ul>になってしまうのでネストしたデータが失われてしまいます。正規表現でネストを保ったままTaskクラスを生成し、Previewモードで描画するという流れです。逆(Preview->Markdown)はTaskクラスがあるのでそれを基にHTMLを生成します。終わりにさくっと実装しようと思いましたが、4日はかかりました。デザイン的にも機能的にも不十分ではあると思っているので開発を続けたいと思います。それでも最低限使える段階には鳴っていると思うので使ってみていただければと思います。GitHubのリポジトリもあるので機能的な要望などありましたらご意見いただけると幸いです。Atomの拡張で以下のようなものがありました。stickyとMarkdownの融合2017年にお金を払った購読型サービスをまとめためかぶ?すだち?Markdownでタスク管理が出来るウェブサービスを作った月別アーカイブ参加グループプログラミングはてなブログをはじめよう!ichir9n1さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。