はじめに
作ったとか言ってますがプロトレベルです。
ソースコードは
https://github.com/MosasoM/todo_baloon
です。
こちらで試すことができます。
https://mosasom.github.io/Todo_pages/
何が新しいか。
Todoリストを使うのって難しくないですか？
できるだけタスクは大小構わず突っ込んじゃうほうが楽だけど、それをやるとTodoにタスクが氾濫して何の優先順位が高いのかどうかがわからない。
カレンダーだと、予定とTodoの区別がつかない。
結局、僕がTodoリストにもとめていたのは、
- 今直ぐやらなきゃいけない事がどのくらいあるのか
- どのくらい将来のタスクが溜まってきていて、早い段階から頑張る必要があるのか
を知ること何じゃないか？と考えてそれを満たすべくTodoを作ることに決めました。
どんなのを作ったか。
1.基本はTodoリスト
2.優先度と期限までの時間でTodoのサイズや色が変わる。
3.優先度の順にソートされる。
スタイルは、
１.緑小サイズ
2.緑中サイズ
3.緑大サイズ
4.黄大サイズ
5.赤大サイズ
の5段階で、タスクのprority低〜高に対して初期値が1-3、それに7日前になると+1,3日まで+2されるように鳴っていて、この和によって上のスタイルが割り振られます。
このスタイルの決め方は迷っていて、最後に書きますがこの先変わるかもしれません。
こちらで試すことができます。
https://mosasom.github.io/Todo_pages/
右上の+でタスク追加、タスクのDoneはタスクをクリックするとできます。
どうやって実現したか。
Vue.jsを使っていますが、予想の通りあまり難しいことはしていないです。
データの保存にはlocalStorageを使用しています。タスクはテキストベースでどんなに貯め込む人でも3桁行かないくらいだと思うので、容量は問題ないと思っています。
並び替えにはvueのComputed,色やサイズ変えにはv-bind:class=を利用しています。
特に面白いことも無いですね。
少し面倒な点
Vueタスクマネージャーを作り、しかもそれをcomputedによって自動的に並びかえる場合、問題となるのがタスクが完了したときの処理です。追加は後ろにpushして並び替えを翔るだけですが、消去の場合は、
- Doneするのは並び替え後のタスクを選択する
- computedは副作用防止のためにソート前に.slice()で複製している
- つまり、タスクデータを消すのは並び替え前のデータ
ということで少々面倒です。また、コンポーネントの分割の問題もあって実装がほんの少し複雑になりました。
結局概念図がこんな感じになりました。
ラッパーにタスクデータをもたせて、並び替え及びスタイル用の子コンポーネントに渡しています。
あと、元タスクの変更は$emitで与えたデータを元に処理することにしています。
ソース
https://github.com/MosasoM/todo_baloon
はこのようになってます。
builｄのときに困ったこと。
どうやらVue-cliは初期設定だと絶対パスらしい。そのためbuildしたのをそのまま動かそうとするとFile not foundがでてしまう。
ここに解決方法がありました。
これから
まずは使ってみようと思います。そのためのプロトタイプなので
その上で自分が継続して使いたいと思うようならば、以下の点が課題です。
- 優先度及びスタイルが、最初の優先度+期日までの和になっている。和を取らずにそれぞれに基づいてそれぞれスタイルを適用したほうが、良いのか？その場合の並び替えは？
- コンポーネントが切り分けられきってない。
- トランジションを少し導入してUXをよく
- 今は期日が3,7日で二つのしきいちで設定されている。個別に設定できるようにすべき？連続関数にするべき？
とまぁいろいろ荒いですが、作ってみることに意味があるということにしています。