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

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

管理システム.Home画面をHTMLで作ってみよう

Home画面

トップページをHTMLで組んでいきます。(HTMLとCSSの解説は「プログラミング言語」を参照してください。) トップページのファイル名をindex.phpとし、managerディレクトり直下に作成してください。

まず、全体の枠組みをHTMLで書いてみましょう。管理システムでは大きく縦に３分割します

stock-1

それぞれを「PageHeader, Breadcrumbs, MainContents」として、コメントタグを使って領域を明示します。それぞれのコメント中に必要なタグを書き入れていきます。PHP等のサーバー言語の開発時もそうなのですが、いきなりソースコードを書くのではなく、先にコメントでここに何を書くのかを明示しておくことはのちの作業効率やつまらないバグを入り込ませないためにとても有効です。自分がこれから何をしようとしているのかを整理するのにも役立ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
	<!-- PageHeader -->

	<!-- /PageHeader -->

	<!-- Breadcrumbs -->

	<!-- /Breadcrumbs -->

	<!-- MainContents -->

	<!-- /MainContents -->
</body>
</Html>

全体の区切りを明示しましたので、以降はブロックごとに解説していきます。 その前に事前準備として<head>タグへ最低限必要な要素を追記しておきます。各要素の解説は[ プログラミング言語 / HTML ]を参照してください。

<head>
	<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
	<title>Bookmin 管理</title>
	< link rel="stylesheet" href="assets/css/bootstrap.css" type="text/css" charset="utf-8">
</Head>

PageHeader

[PageHeader]はシステム全体のナビゲーションになりますので、<nav>タグを用います。 システム名Bookminは左寄せ、MasterMenuは右寄せリストになっています。ですので、左右でブッロック分けをします。MasterMenuの各項目はそれぞれのページへ遷移しますので、Linkも付加します。Link先URLは後で追記します。

<!-- PageHeader -->
<nav>
	<!-- システム名 -->
	<div>Bookmin</div>
	<!-- MasterMenu -->
	<div>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">売上管理</a></li>
			<li><a href="#">在庫管理</a></li>
			<li><a href="#">マスタ管理</a></li>
			<li><a href="#">ログアウト</a></li>
		</ul>
	</div>
	<!-- /MasterMenu -->
</nav>
<!-- /PageHeader -->

このように表示されます。

stock-1

MasterMenuを横並びにします。ulタグに下記のbootstrapのclass属性を追記します。

<ul class="nav navbar-nav navbar-right">
nav
bootstrap.css 4022行目あたり
リストのマークを非表示にし、文字列の周りに余白を設け見栄えを整えます。
navbar-nav
bootstrap.css 4371行目と4407行目あたり
リスト要素を横並びにします。
navbar-right
bootstrap.css 4535行目あたり
MasterMenu全体を画面の右側に寄せます。

このように表示されます。

stock-1

システム名とMasterMenuが横一列になっていませんし、文字と画面に余白がなく張り付いています。ついでに黒背景にしてみましょう。

まず、システム名ブロックとMasterMenuブロックを<div>で囲みます。そこにcontainer-fluidclassを追記します。これで、左右に余白ができて見やすくなります。

<div class="container-fluid">
	<!-- システム名 -->
	<!-- MasterMenu -->
</div">
container-fluid
bootstrap.css1606行目あたり
左右に15pxずつ余白も受けています。

続いて、<nav>にnavber-inverseclassを追記します。

<nav class=“navbar navbar-inverse”>
navbar
bootstrap.css 4214行目あたり
このブロックの高さを50pxに指定しています。
navbar-inverse
bootstrap.css 4639行目あたり
背景色を黒くし、明るい文字をグレーにしています。
<!-- システム名 -->
    <div class="navbar-brand">Bookmin</div>
navbar-bland
bootstrap.css 4643行目あたり
文字色を明るいグレーにし、マウスオーバーで白色に変化させています。

このように表示されます。

stock-1

もう一息、ブロックの四隅が角丸になっていて、小さな余白がります。これを消します。

navbar-static-topを<nav>に追加します。

<nav class="navbar navbar-inverse navbar-static-top">
navbar-static-top
bootstrap.css 4295行目あたり
角丸をなくしています。

DropDownmメニューの追加

今度は、「売上管理、在庫管理、マスタ管理」の子メニューをマウスオーバーでDropDown表示をさせます。 メニュータグに移る前にCSSファイルを一つ追加します。<head>タグ内に以下を追記します。

<link rel="stylesheet" href="../assets/css/bookmin.css" type="text/css" charset="utf-8">

assets/cssディレクトリ内にbookmin.cssファイルを追加します。このCSSファイルはBootstrapに含まれていないスタイルを追加してしていきます。そして、追加したbookmin.cssに下記を書き加えます。

.dropdown:hover .dropdown-menu {
    display: block;
}

このスタイルの意味は、hover(マウスオーバー)したdropdownclassを持った要素の子要素のうち、dropdown-menuclassを持った要素を表示するとなります。

Bootstrap.css内の3573行目あたりにあるdropdown-menuを見てみるとたくさんのスタイルが定義されていますが、デフォルトでは非表示display : none;となっています。上記の追加スタイルは親要素であるdropdownをマウスオーバーしたら表示するという命令を追加したわけです。

bookmin.cssファイルの準備ができたら、PageHeaderの売上管理メニュー部分を下記のうように変更します。 売上管理右横の<i class="caret">は三角アイコンです。

<li class="dropdown">
	<a href="#">売上管理 <i class="caret"></i></a>
	<ul class="dropdown-menu">
		<li><a href="#">日次売上集計</a></li>
		<li><a href="#">日次売上明細</a></li>
		<li><a href="#">書籍分類別集計</a></li>
	</ul>
</li>

同じように在庫管理とマスタ管理にも子メニュー要素を追記します。

Breadcrumbs

<!-- Breadcrumbs -->
<ul class="breadcrumb">
	<li>管理メニュー一覧</li>
</ul><!-- Breadcrumbs -->
breadcrumb
bootstrap.css 4741行目あたり
薄いグレー背景にしています。

トップページですので、要素がひとつかありません。階層の深いところにあるメニューであれば、階層分要素があり、親要素にはLinkがつきます。

このように表示されます。

stock-1

さて、このパンくずですが、背景色を無くし、PageHeaderとの隙間をもう少し縮めたいと思います。bootstrap.cssを一部編集します。まず、パンくずの背景をなくします。 bootstrap.css4741行目のbackground-color:#f5f5f5;をコメントアウトします。 書き方は下記のようにします。

/* background-color:#f5f5f5; */

これで背景色がなくなりました。続いてPageHeaderとの隙間です。この隙はPageHeaderの下余白なんですね。bootstrap.css4217行のmargin-bottom: 20px;を同じようにコメントアウトしてみます。

stock-1

これで丁度良くなりました。

MainContents

さて、やっと本体です。 まず配置すべきメニュー名を羅列しました。

<!-- MainContents -->
<div>
	売上管理
		日次売上集計 日次売上明細 書籍分類別集計
	在庫管理
		在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧
	マスタ管理
		スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税
</div><!-- MainContents -->

これらをMasterMenu項目ごとに横並びにし、その子メニューは縦並びにします。そこでBootstrapのGrid systemという方法を用います。Grid systemは１行を最大12分割できます。n/12を適宜列に配分していきます。このメニューリストは大きくみれば１行と言えます。ですのでまず、全体を１行として扱うために<div>にrowclassを付加します。そしてMasterMenyu項目ごとに4/12づつ配分してみます。

<div class="row">
	<div class="col-xs-4">
		売上管理
			日次売上集計 日次売上明細 書籍分類別集計
	</div>
	<div class="col-xs-4">
		在庫管理
			在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧
	</div>
	<div class="col-xs-4">
		マスタ管理
			スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税
	</div>
</div>
row
bootstrap.css 1612行目あたり
１行でという意味です。
col-xs-4
bootstrap.css 1616行目あたり
末尾の数字が[n/12]の[n]の部分にあたります。この場合、[4/12]という意味になります。

このように表示されます。

stock-1

全体に３等分になりました。ただ、この画面サイズなら良いのですが、幅広の画面ですと横に間延びした感じに見えます。もう少し中央寄りにコンパクトにしたいと思います。行全体の左右に余白を設けます。

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-1"> </div>
		<div class="col-xs-3">
		売上管理
			日次売上集計 日次売上明細 書籍分類別集計
		</div>
		<div class="col-xs-3">
		在庫管理
			在庫検索 入庫・在庫登録 入庫明細 受払一覧 発注データ生成 返品候補一覧
		</div>
		<div class="col-xs-3">
		マスタ管理
			スタッフ 管理システムメニュー 書籍 取次 返品設定 書籍分類 消費税
		</div>
		<div class="col-xs-2"> </div>
	</div>
</div>
container-fluid
bootstrap.css 1606行目あたり
内包する要素が画面からはみ出ないように画面の横いっぱいの領域を確保し、左右に15pxづつ余白をもけています。

stock-1

いくらか中央に寄りました。 続いて各列のレイアウトを作ります。まずは売上管理メニューから。

<div class="list-group">
	<label class="list-group-item active text-center">売上管理</label>
	<a href="#" class="list-group-item">日次売上集計</a>
	<a href="#" class="list-group-item">日次売上明細</a>
	<a href="#" class="list-group-item">書籍分類別集計</a>
</Div>
list-group
bootstrap.css 5290行目あたり
スタイル的に特別何かするというよりリストグループであるという宣言的な意味で作られています。
list-group-item
bootstrap.css 5294行目あたり
グループ内の一つ一つの要素という意味です。
active
bootstrap.css 5348行目あたり
本来の意味と違いますが、リストグループのヘッダーの色を変えるために使用しています。
text-center
bootstrap.css 1319行目あたり
要素を中央揃えにします。

在庫管理とマスタ管理も同じようにタグを当てはめてみましょう。

このように表示されます。

stock-1

管理メニューのHTMLの作成は以上です。

次回はスタッフマスタ編集のHTMLを作成します。

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

Home画面

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

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

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

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

 stock-1

PageHeader

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

Breadcrumb

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

MainContents

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