自作Webアプリを作る!その3 - 画面仕様を考える

システム開発

こんにちは、いちのです!

相変わらず三日坊主の私、やるやるって2つだけ記事書いて半年放置しましたごめんなさい。
(こっそり名前も変えたのは内緒)

さて、前回の記事では作りたいアプリにつけたい機能をどんどこ書き出しました。
今回はその機能をどんな画面構成で作りたいかを考えていきます。

必要な画面を書き出す

まずはどんな画面が必要かを考えます。
前回の記事で書いた通り、今回はログインしてタスク管理するアプリを作ろうと思っています。

まず最初は最低限必要な画面にとどめておきます。

  • ログイン画面
  • タスク一覧画面
  • タスクの登録、編集画面

え、これだけか・・?ほんと?

と自分でも思いましたがまあ最初はほんと、ね。これでいいや。

ゆるくいきましょう。個人的なやつだし。

画面遷移順を考える

どの画面からどの画面に移動できるようにするか考えます。

今回は画面3つしか考えてないのでいたってシンプルですが、一応図におこしてみます。

ログイン画面でログインしたら、メインのタスク一覧画面に行きます。

そこから、新規登録ボタンや編集ボタンでタスク登録画面に移動できます。

削除は一覧画面でできるようにして、編集は登録画面と同じものをIFで表示切替して使います。多分どのフレームワーク使ってもそれでいけるんじゃないかな・・タブン・・・。

各画面に表示したいものを考える

作る画面が決まったら、次はそれぞれの画面に何を表示したいかを考えます。

①ログイン画面

  • アプリの名前(考えなきゃ・・・忘れてたどうしよう・・・)
  • メールアドレス
  • パスワード

完全に忘れていましたがアプリケーション名は表示したいところですね。こういうの考えるの苦手なので開発とかより大変です。どうしよう。

ログインIDは特に作らず、メールアドレスでログインできるようにしようと思っています。

今回この画面は凝った配置やデザインにするようなつもりはないので、画面配置は割愛します。

②タスク一覧画面

このアプリケーションのメイン画面になります。

  • 新規タスク登録ボタン
  • ログアウトボタン
  • タスク一覧(優先順)

タスク一覧、といってもタスク名だけ並べてもちょっとわかりにくいですよね。とりあえず、前回の記事での要件を満たすために必要なものを書き出します。

タスク一覧の内容
  • やったらチェックするチェックボックス
  • タスク名(やる予定日に近いもの・予定日過ぎたものは文字色を変える)
  • 前回やった日からの経過日数
  • 削除ボタン

とりあえずこんなものでしょうか。

そしたら手書きでもなんでもいいのでざっくりと、画面の配置案を考えます。

これはひどい・・・やる気なくなってきました まあ作っていくうちに良くなると信じましょう。

③タスク登録画面

これは主に項目内容を書き出すかんじでしょうか。

  • タスク名
  • 【コンボボックス】タスクの頻度(○日おき・毎週○曜日・毎月○日・1回だけ)
  • ↑の「○」部分の中身(「タスクの頻度」の選択に応じて入力フォームを変える)
  • 予定日を何日過ぎたら警告するか
  • 次回予定日

とりあえずこんな予定です。もし過不足に気づいたら後ほど修正します。

これもとりあえず入力欄を並べるつもりでいるので配置図は割愛です。

おしまい

結構簡単なものを作ろうとしていますが、それでも画面を具体的に考えようとすると結構大変ですね。でもここまで考えると少し自分の中で形がはっきりし始めて、わくわくしてきたりもするのではないでしょうか。

次はこの画面を実現するために、何をどうDBに保存するかを考えていきます。

すでに大分ボロが見えてきてるかと思いますが、どなたかの参考になればいいなぁ・・・。