それでは、トップメニュー画面をPHPでプログラミングしていきます。
ここでは、他のページでも使える共通部分の関数化とメニューのデータを主にプログラミングします。
このページで共通化できそうな箇所は、どこになるでしょうか。
まず、HTMLのheadタグはどのページも同じですので、まずheadタグですね。それとページ上部のメニューを含めたページヘッダー部分も同じでしょう。もう一つ、ページによって出力される値は違いますが、パンくずリストの共通化できそうです。
ということで以下の３つを共通化します。
- headタグ
- ページヘッダー
- パンくずリスト
トップメニューが画面の場合、ページヘッダーのメニューとページボディのメニュー一覧は見た目こそ違いますが、メニューの名称やURLは同じです。プログラム的に見ますと、データが同じで出力するHTMLタグが違うと言えます。ですのでまず、メニュー情報をデータ化します。JSONで作成します。もちろんXMLやCSVでもできますが、CSVは階層化されたデータを構成するには不向きですし、XMLはやや冗長的です。また、昨今JSONを使われることが多くなってきていることから、ここではJSONで作成します。
実際のメニューデータを作成する前に、JSONを解説します。
JSON(ジェイソン)とは JavaScript Object Notationの略で、ジャバスクリプトのオブジェクト表記法という意味になります。データ交換形式としてXMLで提唱された際、XMLが複雑すぎるという理由から、ダグラス・クロックフォード氏が提唱したデータ形式です。Ajaxが出現するまではXMLが主流でした。Ajaxが普及するにつれてよりシンプルなJSONが好まれるようになり、一挙に普及しました。
JSONの基本形は{“key”:”Value”}で、波カッコ{ }がオブジェクトになります。その中に、左にキー、セパレータにコロン:を挟んで右に値で一つの要素セットになります。一つのオブジェクトの中に複数の要素を格納する場合は、要素セットをカンマで区切ります。
Keyは"key"のようにダブルクオートで囲みます。
Valueには以下のデータ型が使用できます。
- 数値 : (整数、浮動小数点)
- 文字列 : ダブルクオーテーションで括る
- Boolean : true or false
- 配列 : [ ]で括る
- オブジェクト : { } で括る
- null
記述例)
{
"key1" : 12345,
"key2" : "アイウエオ",
"key3" : true,
"key4" : [ "abc", "def", "ghi" ],
"key5" : { "x" : 5586 },
"key6" : null
}
注意点)
- コメントは書けません。(コメント用の要素を追加すればそれらしくできます。)
{“key”:”value”, “comment” : “コメントです。”} - XMLと違い、同じ階層に同じKey名の要素を作成すると、最後に記述された要素のみが有効となってしまいますので、同じKey名で複数の値を設定した場合は、値に配列やオブジェクトを駆使して表現しましょう。
それではメニューデータを作成しましょう。
メニューデータ用のjsonファイルを作成します。[/bookmin/app-data/sitemap.json]
ここで、２つのデータパターンを示します。
パターン1 : シンプル
{
"Home":"index.php",
"売上管理":{
"日次売上集計":"sales/daily-summary.php",
"日次売上明細":"sales/daily-details.php",
"書籍分類別集計":"sales/analysis.php"
},
"在庫管理":{
"在庫検索":"stock/stock-list.php",
"入庫・在庫登録":"stock/stock-edit.php",
"入庫明細":"stock/storing-list.php",
"受払一覧":"stock/rec-pay-list.php",
"発注データ生成":"stock/ordering-list.php",
"返品候補一覧":"stock/returns-candidiate.php"
},
"マスタ管理":{
"スタッフ":"master/staff-list.php",
"管理システムメニュー":"master/nav-edit.php",
"書籍":"master/books-list.php",
"取次":"master/agency-list.php",
"返品設定":"master/returns-book-list.php",
"書籍分類":"master/books-category.php",
"消費税":"master/consumpition-tax.php"
},
"ログアウト":"logout.php"
}
パターン１はメニューを生成するためだけを考えた最もシンプルな形です。これだけあれば、トップページのヘッダーメニューとボディメニューを生成することができます。しかし、例えば、パンくずリストに[マスタ管理 > スタッフ一覧 > 作業履歴]を表示しようと思ったら、このデータフォーマットでは表現できません。今後アプリケーションが発展していく過程でどのようにメニューが増えていくかもわかりませんし、孫メニュー、ひ孫メニューと階層もどのように深くなるかもわかりません。ですのでもう少し、拡張性のあるデータフォーマットを示します。
パターン２ : 拡張性あり
[
{
"name":"Home",
"url":"index.php"
},
{
"name":"売上管理",
"child":[
{ "name":"日次売上集計",
"url":"sales/daily-summary.php"
},
{
"name":"日次売上明細",
"url":"sales/daily-details.php"
},
{
"name":"書籍分類別集計",
"url":"sales/analysis.php"
}
]
},
{
"name":"在庫管理",
"child":[
{
"name":"在庫検索",
"url":"stock/stock-list.php"
},
{
"name":"入庫明細",
"url":"stock/storing-list.php"
},
{
"name":"受払一覧",
"url":"stock/rec-pay-list.php"
},
{
"name":"発注データ生成",
"url":"stock/ordering-list.php"
},
{
"name":"返品候補一覧",
"url":"stock/returns-candidiate.php"
}
]
},
{
"name":"マスタ管理",
"child":[
{
"name":"スタッフ一覧",
"url":"master/staff-list.php",
"child":[
{
"name":"作業履歴",
"url":"master/staff-work-list.php"
}
]
},
{
"name":"管理システムメニュー",
"url":"master/nav-edit.php"
},
{
"name":"取次",
"url":"master/agency-list.php"
},
{
"name":"返品設定",
"url":"master/returns-book-list.php"
},
{
"name":"書籍分類",
"url":"master/books-category.php"
},
{
"name":"消費税",
"url":"master/consumpition-tax.php"
}
]
},
{
"name":"ログアウト",
"url":"logout.php"
}
]
各メニュー要素をオブジェクト形式で構成し、オブジェクトの中身にはnameとurl要素を持ちます。また、子供の要素が必要な場合は、child要素を追加することで、いくらでも階層を深くできます。また、url要素も持たないオブジェクトはLink先がないオブジェクトであると表現できます。
同じ階層のメニューは配列の要素としてオブジェクトを複数配置することで表現できます。
nameとurl以外の情報が必要になった場合でも大きな変更を必要としません。
次回はパターン2のJSONデータを使用してメニューを生成するプログラムを示します。