管理システムのトップメニューHTMLを作成しました。これから他の画面のHTMLを作成していくわけですが、もう一工夫したいと思います。下記を追加します。
- baseタグを使用して相対URLの記述ルールの一本化
- 外部スタイルシートファイルの読み込み方法の変更
- JQueryの読み込み
- PageHeaderソースの外部ファイル化
Baseタグを使用して相対URLの記述ルールの一本化
例えば、作成したindex.phpからassets/style.cssへの相対パスは、../assets/style.cssとなります。これは index.phpから見るとstyle.cssは一つ上の仮想にあるassetsディレクトリ内にあるstyle.cssファイルということになります。
では、master/staff-list.phpからstyle.cssを参照する場合はどうなるでしょう。相対パスでは../../assets/style.cssと書きます。必要が階層を２つ遡る必要があります。
このように階層が一定でない場合でも同じルールで記述できる仕組みがあれば楽ですね。開発途中で階層の変更があったとしてもソースの書き換えが発生しなければとても助かります。
そこで、<base>タグの登場です。<head>タグ内に<base>タグを追加します。開発環境のBookminの場合、以下を<title>タグのすぐ下に追記します。間違っても<link>タグの後に書いてはいけません。
<base href="http://www-dev.bookmin.jp/">
以降すべての相対パスはroot以下のパスを書けばよくなります。要するに<base>を付加することにより全ての相対パスを絶対パス、フルパスにできるわけです。注意点はhrefの末尾に/を忘れないようにしましょう。
外部スタイルシートファイルの読み込み方法の変更
まず、assets直下にstyle.cssファイルを作成し、下記を追記します。
@charset "utf-8";
@import url("css/bootstrap.css");
@import url("css/font-awesome.min.css");
@import url("css/bookmin.css");
utf-8を指定しています。必須ではありませんが、宣言するようにした方が無用な文字化け等を防ぐことができます。
style.cssからの見た相対パスか、絶対パス(http://~)を記述します。
本番リリース時はファイルサイズを圧縮した
bootstrap.min.cssファイルを読み込むようにしましょう。
これで、style.cssファイルが良い出来ました。
index.phpに戻りましょう。
<base>と合わせて<head>を下記のように書き換えましょう。
<head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>Bookmin 管理</title> <base href="http://www.dev.bookmin.jp/"> <link rel="stylesheet" href="assets/style.css" type="text/css" charset="utf-8"> </head>
これで、今後新たにcssファイルを作成したとしても、style.cssに@importを追加するだけで済むようになりました。
JQueryの読み込み
「PageHeaderソースの外部ファイル化」の前準備です。ここで初めてJavascriptが登場します。
index.phpに下記を追記します。bodyの閉じタグ</body>の直前に追記です。
<script src="assets/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> </body> </html>
PageHeaderソースの外部ファイル化
以下の手順で作業をすると良いでしょう。
index.phpに書いてある<nav>ブロックをそっくり外部ファイルにします。assetsディレクトリ内にtemplateというディレクトリを作ります。- その中に
nav.htmlというファイルを作ります。 nav.htmlにindex.php内の<nav>ブロックをそっくりコピーします。index.php内の<nav>ブロックを削除します。
<!-- PageHeader --> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <!-- システム名 --> <div class="navbar-brand">Bookmin 管理</div> <!-- MasterMenu --> <div> <ul class="nav navbar-nav navbar-right"> <li><a href="/index.html">Home</a></li> <li class="dropdown"> <a href="#">売上管理 <i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="sales/daily-summary.html">日次売上集計</a></li> <li><a href="sales/daily-details.html">日次売上明細</a></li> <li><a href="sales/analysis.html">書籍分類別集計</a></li> </ul> </li> <li class="dropdown"> <a href="#">在庫管理 <i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="stock/stock-list.html">在庫検索</a></li> <li><a href="stock/stock-edit.html">入庫・在庫登録</a></li> <li><a href="stock/storing-list.html">入庫明細</a></li> <li><a href="stock/rec-pay-list.html">受払一覧</a></li> <li><a href="stock/ordering-list.html">発注データ生成</a></li> <li><a href="stock/returns-candidiate.html">返品候補一覧</a></li> </ul> </li> <li class="dropdown"> <a href="#">マスタ編集 <i class="caret"></i></a> <ul class="dropdown-menu"> <li><a href="master/staff-list.html">スタッフ</a></li> <li><a href="master/nav-edit.html">管理システムメニュー</a></li> <li><a href="master/books-list.html">書籍</a></li> <li><a href="master/agency-list.html">取次</a></li> <li><a href="master/returns-book-list.html">返品設定</a></li> <li><a href="master/cooks-category.html">書籍分類</a></li> <li><a href="master/consumpition-tax.html">消費税</a></li> </ul> </li> <li><a href="logout.html">ログアウト</a></li> </ul> </div><!-- /MasterMenu --> </div> </nav><!-- /PageHeader -->
- 1.1で作成した
assets / templateディレクトリにtemplate.jsファイルを作ります。 template.jsにajax(非同期通信)による外部ファイルの読み込みとそれをソース内に当てはめるコードを書き加えます。(jqueryについては他で詳しく解説します。)
$(function(){
$.ajax({
url:"assets/template/nav.html",
dataType:"html",
success:function(htm){
$('.breadcrumb').before(htm);
},
error:function(obj){
alert(obj.resposeText);
}
});
});
nav.htmlを指定します。
nav.htmlから帰ってきた内容が引数htmに格納され、それをclass属性にbreadcrumbを含んだ要素(パンくずリスト)の前に埋め込みます。
index.phpにJQueryファイルとtemplate.jsを読み込むコードを書き加えます。
<script src="../assets/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> <script src="../assets/template/template.js"></script> </body> </html>
これで、変更前とindex.phpが同じように表示されれば成功です。
