業務アプリ開発・現場の知恵

プログラミング初学者や未経験者向けの「業務アプリ開発現場はどうやってる?」を疑似書店業務管理アプリの開発を通じて体験しましょう。

Home 画面モックアップと機能概要

画面モックアップ(試作品)と各項目を解説します。 管理システムは画面を大きく縦に3分割します。

概要
最上部の細長いエリアで、以降「PageHeader」と呼びます。システム名とマスタメニューを表示します。すべてのページで共通して表示されます。
PageHeaderのすぐ下で、現在のページ名と親メニューへのLinkを表示します。以降「Breadcrumb」と呼びます。
一覧や明細など機能の本体を表示します。以降「MainContents」と呼びます。

それでは、画面要素について解説していきます。

管理ツール・管理メニューリスト

stock-1

PageHeader

名称概要
Bookmin 本システム名(横にログイン者名を表示しても良いでしょう)
Home 管理メニューリストへ遷移します。
売上管理 在庫管理 マスタ管理 マウスオーバーでそれぞれの子メニューを表示します。
ログアウト セッション情報をすべて破棄し、認証画面へ遷移します。

Breadcrumb

管理メニュー一覧ではトップ画面ですので階層化されたリストは表示されませんが、 例えば本日の売上集計画面でしたら、[ Home / 売上管理 / 本日の売上集計 ]のように表示されます。

MainContents

3つのカテゴリで横に分割し、それぞれの子メニューリストを縦に展開します。 マスタメニューをマウスオーバーした際のイメーです。 stock-1