TODO作成ツール作ってみようpart2

こんにちは。向日葵です。

今回は前回に引き続きTODO作成ツールの設計を進めていこうと思います。

まずは画面設計書を作成していきます。ネットで探せばテンプレートがあると思いますが、
正直ピンと来ず以前使っていたものを使いました。お勧めあれば知りたいです。

ではさっそく画面設計書を進めていこうと思います。
以下のような画面イメージを作成しました。

ここで気づいてしまったのです。「保存ボタンなくね？」と。
ここで私は要件を振り返りました。
以前投稿した通り、

• タスク・納期を保存、削除、編集可能
• 納期を過ぎた場合、何かしらの形で検知可能
• タスクを完了したら取り消し線がつく

上記ができるようなツールを作成しようとしています。

ですが私が想定したものでは要件を満たすことができていませんでした。
そこに気づき改めて考え直していると、要件がそもそも固まっていないのではないか疑惑が浮上してきました。

そこで改めてどういうものを作ろうとしているのかをより詳しく決めることにしました。

仕様

• タスク、納期を保存、編集、削除可能
• 納期を過ぎた場合、何かしらの形で検知可能
• タスクを完了したら取り消し線がつく等完了したことが検知可能

この3つが考えていた要件でした。そして最初に考えていたイメージは以下です。

• レイアウトは表形式
• カラム数は2
• 列項目はタスク、納期
• 追加、削除、編集、保存ができる
• 初期表示はヘッダのみ
• 追加ボタンが常時表示され、押すと行が増える
• 削除ボタンは各行に一つずつ表示され、押すと削除される
• 保存ボタンは表の右下（追加ボタンの右方向）付近に1つだけ表示され、押すと保存される

更に詳細に考えていこうと思います。

列項目

最初は「タスク」と「納期」の2列だけで作成することを考えていました。
しかし実際に使うときのことを考えた際、わかるのは以下の情報です。

• Aというタスクが存在
• 納期がいつまで

一方、そのAというタスクがどういう状態にあるかがわからないのではないかと思いました。そのため列数を2→3列に変更することでタスクが今どういう状態にあるのか？というのが把握できるようにしました。

保存機能

最初は「追加ボタンと保存ボタンの2つのボタンが存在する」というのを考えていました。この際保存ボタンは削除ボタンのように各行に存在するのではなく一番下に1つだけ配置するというので考えていました。追加ボタンの右方向に保存ボタンがあるイメージです。

この場合の追加ボタンは行を追加するためのボタンです。初期画面では「表はヘッダーだけ表示して追加ボタンを押すことで行が表示される」というのを想定していました。

しかし追加ボタン押下後のイメージを作成した際にこう感じました。「追加と保存は何が違うのか直感的にわからなくない？というかそもそも追加と保存で別れてるのってどうなの？」と。ここで思いついたのが以下でした。

• 初期表示はヘッダーのみではなく、ヘッダーと空の行が表示
• データを入れたら自動で行が追加
• ボタンは保存ボタンのみ

こちらのほうがユーザは追加だの保存だの気にしなくていいんじゃないかと思いました。
また保存ボタンの表示についてタスクが0件の時は、ボタンを表示しないとすることで誤ってデータのないデータを登録する心配がないのではないかと考えました。しかし、そもそも0件のデータを登録しないように入力チェックをかければ表示制御までかける必要はないと判断したためこの案は没にしました。

削除機能

最初は各行に削除ボタンを配置すること考えていました。仕様を見直しているときに思いついたのが、「ボタンが各行にあるよりは各行にチェックをつけて、チェックがついてるものだけ一括で削除できる」というものでした。こちらはどちらでもよさそうですが、同じボタンが複数あるのはいけてないかなと思ったので基本的にはチェックボックス案を採用しようと思います。またボタンを押してそのまま削除されるのは良くないので、確認ダイアログを表示しようと考えています。

編集機能

編集は編集ボタンを配置するということはせずに、基本的に常時編集できるというようにしようと考えています。

納期を過ぎたタスクの検知方法

要件にも記載していたように納期を過ぎたタスクの検知方法については、何かしらの方法で検知できるというくらいで詳細に考えていませんでした。そのため以下のようなものを考えてみました。

• 納期が過ぎているものは行が赤く表示されるもしくはアイコンがつく
• ステータスで管理して、期限切れのようなステータスで判断
• メールが送信される

一つ目の「納期が過ぎているものは行が赤く表示されるもしくはアイコンがつく」についてです。こちらは行まるまる赤く表示するか、アイコンの枠を設けてアイコンで状態を検知します。二つ目の「ステータスで管理して、期限切れのようなステータスで判断」についてです。こちらは「作成中」「実施中」「期限切れ」「完了」のステータスで管理し、ステータスを確認することで期限切れを検知します。三つ目の「メールが送信される」についてです。こちらはあらかじめ登録していたメールアドレスにメールが送信されることで検知します。こちらは検証作業が必要なため、別途決めたいと思います。

タスク完了

最初はタスクが完了したら取消線をつけようと考えていました。この仕様でいいか考えた結果、前述の「納期を過ぎたタスクの検知方法」にもかかわってきますがステータスごとに管理することを思いつきました。取り消し線の場合、必ずしも完了したもの同士で固まっているとは限らずまばらに取り消し線があると見づらいのではないかと考えました。それを解決するにはどうしたらいいのかというのを考えた結果ステータスで管理すれば完了済みのものでまとめることができ見やすくなるのではないかと感じました。完了したタスクはそこまで重要じゃないため「リストに表示しない」という選択肢もあったと思います。しかし完了したものでも見返すことがあるケースがあります。リストに表示しないとこのケースが発生した場合に不都合があったため没としました。代わりにステータスで管理し、閉じた状態で表示されることで要件を満たします。

以上が希望していた要件を満たす詳細になります。
そして新たに一つ実現可否はおいておいていいなと思った機能があります。

• 上から順に新しいデータが表示

こちらは実現可否が判断できないため、ほかのものと合わせて検証を行いできそうなら機能として追加しようと考えています。追加する場合は昇降順の項目を改めて考えてから追加しようと思います。

次回

今回も最後まで見ていただきありがとうございます。
次回は検証作業のため環境構築等を行う予定です。