開発実況「Web日報登録システム」(Vol.2)

この記事は約 2 分 で読むことができます。

開発実況シリーズは、毎回テーマアプリを決めて、
アプリを実際に作っていきながら、その過程をブログでご紹介していく企画です。

今回作成するアプリは「Web日報登録システム」です。

それでは、進めていきましょう!

前回までは

前回は第1回ということで、作成するアプリの概要と機能一覧を作成しました。

>前回の記事はこちら

また、開発の進め方としてTODOを洗い出しました。

TODOリスト
・画面設計
・データベース設計
・プロジェクト基礎環境構築
・画面フロー作成
・機能開発
・本番サーバーデプロイ
・テスト&仮運用

今回からは、TODOを上から潰していきます。

画面設計(社員側)

最初は、画面設計を行っていきましょう。

今回のアプリは「社員側」と「管理者側」という2種類の機能区分があるので
画面設計もそれぞれ分けて作ります。

まずは、社員側の画面設計から作っていきましょう。

いつものように作成ツールを起動して、書いていきます。
ツール上でパーツをドラッグ&ドロップで置いていくだけなので簡単です。

実際に自分がユーザーとして、アプリを使っていることをイメージしながら
画面を想像して書いていくことがポイントです。

機能設計で洗い出した必要機能(今回の場合は以下の4つ)が
しっかり実現出来るように画面を書いていきましょう。

[社員側の必要機能]
・ログイン
・出勤、退勤時間記録
・業務報告登録
・月別一覧表示

完成!

ひとまず、こんな感じになりました。

画面は3つとシンプルな構成なので、作業は30分ほどで完了。

後は、作りながら「もっとこうした方が良い」と思ったことがあれば、
随時調整していきましょう。

次回予告

次回は引き続き、管理者側の画面設計を行っていきます。

これまでの作業時間

STEP1:10min
STEP2(今回):30min
合計:40min

開発実況「Web日報登録システム」(Vol.2)
この記事はあなたのお役に立てましたか?

この記事があなたのお役に立てましたら、
いいね!クリックをお願いします!

あなたも楽しくプログラミングを学んでみませんか?

コメントを残す