管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。
いくつか選択肢はあるが、ここではAdminLTEを利用してみる。
bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。
###最初に注意
まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-footer")の基本レイアウトを作成してから各所をいじっていくのが得策のようだ。
どうやらサイト全体のheightをcontentで確保しているらしく、contentが無いとdropdownや、sidebarが隠れて表示されない。
###インストール
インストールは、いろんな方法があるが、
- 普通にダウンロードして展開
- bowerでインストール
が、普通でしょう。
ダウンロートは普通にAdminLTEのトップページかGitHubから。
Bowerは、
bower install admin-lte
とする。
ここでは、直接ダウンロードして、zipを展開したことを想定して進める。展開した構造は、下記のようになっている。
いろいろ展開されるが、adminLTEの本体はdist以下に格納されている。
あとは、依存関係のあるbootstrap, jquery(plugins/jQuery/)などなど。
直下にあるstarter.htmlがひな形で、通常は、これを改良していけばいいと思う。
その他、index.html, index2.htmlはサンプルである。また、pages以下や、pages/exsamples/以下にも参考になるサンプルファイルが存在する。
###starter.html
ちなみに、starter.htmlはこんな感じ。
見た目はシンプルなのですが、html記述はまあまあ複雑です（標準で見えてない要素の記述とかが多いので）。
##基本構成
starter.htmlは、私の用途には複雑すぎるので、最低限必要な構成要素を抽出したいと思います。
###css,js読み込み
まず、？？？となるのはcssとjsの読み込み部です。css関連は<head>部分。jsは<body>の最後にあります。
<!doctype html>
<head>
<meta charset="utf-8">
<title>adminLTE test</title>
<!-- for responsive -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- adminLTE style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--content-->
content
<!-- JS -->
<!-- jquery -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- bootstrap -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- adminLTE -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
</body>
</html>
ローカルから取得しているもの、CDNで取得しているものいろいろあるが、目的に応じてPath等を変更する。
###最低限の要素
人によって、必要なコンポーネントは違うと思いますが、基本要素として、とりあえず、下記のようなレイアウトを作ってみます。
もっと要素は減らせると思うのですが、最初の「注意点」で書いた通り、headerやsidebarが正しくレイアウトされるためには、content（やfooter）に依存するようなので、それらの要素は盛り込んであります。
ソースは、以下の通りです。
<!doctype html>
<head>
<meta charset="utf-8">
<title>adminLTE test</title>
<!-- for responsive -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- adminLTE style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- トップメニュー -->
<header class="main-header">
<!-- ロゴ -->
<a href="" class="logo">管理画面</a>
<!-- トップメニュー -->
<nav class="navbar navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="">顧客管理</a></li>
</ul>
</nav>
</header><!-- end header -->
<!-- サイドバー -->
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<!-- メニューヘッダ -->
<li class="header">機能一覧</li>
<!-- メニュー項目 -->
<li><a href="">新規登録</a></li>
</ul>
</section>
</aside><!-- end sidebar -->
<!-- content -->
<div class="content-wrapper">
<!-- コンテンツヘッダ -->
<section class="content-header">
<h1>ページタイトル</h1>
</section>
<!-- メインコンテンツ -->
<section class="content">
<!-- コンテンツ1 -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">ボックスタイトル</h3>
</div>
<div class="box-body">
<p>ボックスボディー</p>
</div>
</div>
</section>
</div><!-- end content -->
<!-- フッター -->
<footer class="main-footer">
<div class="pull-right hidden-xs">Version1.0</div>
<strong>Copyright © 2015</strong>, All rights reserved.
</footer><!-- end footer -->
</div><!-- end wrapper -->
<!-- JS -->
<!-- jquery -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- bootstrap -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- adminLTE -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
</body>
</html>
ここまでできれば、後は、AdminLTEのDocページを見ながら、要素を追加するだけです。
###必要な要素を追加してみる
少し、要素を追加して動作を確認してみます。こんなのを作ります。
主な追加要素としては、
- sidebarの折りたたみボタンをTOPメニューに追加
- プルダウン（dropdown）メニューをTOPメニューに追加
- サイドメニューにサブメニュー（treeview）を追加
- パンくずリスト追加
- グリッドシステムでcol-6の要素を２つ追加
- 各所にFontAwesomeでアイコンを追加
という感じです。
ソースは下記の通り。
<!doctype html>
<head>
<meta charset="utf-8">
<title>adminLTE test</title>
<!-- for responsive -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- ionicons -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- adminLTE style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-blue">
<div class="wrapper">
<!-- トップメニュー -->
<header class="main-header">
<!-- ロゴ -->
<a href="" class="logo">管理画面</a>
<!-- トップメニュー -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- メニュー項目 -->
<!-- 小さくなった時に消す -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<!-- サイドバー制御 -->
<a href="" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<ul class="nav navbar-nav">
<li><a href="">顧客管理</a></li>
<li><a href="">売上管理</a></li>
<!-- doropdown -->
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown">その他<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="">その他１</a></li>
<li><a href="">その他２</a></li>
</ul>
</li>
</ul>
<!-- 右に寄せるメニュ :navbar-rightとかもあるが、マージが無い -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li><a href=""><i class="fa fa-sign-out"></i>ログアウト</a></li>
</ul>
</div>
</div>
</nav>
</header><!-- end header -->
<!-- サイドバー -->
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu">
<!-- メニューヘッダ -->
<li class="header">機能一覧</li>
<!-- メニュー項目 -->
<li class="active"><a href=""><i class="fa fa-circle-o"></i>新規登録</a>
<li><a href=""><i class="fa fa-circle-o"></i>検索</a>
<!-- treeview -->
<li class="treeview">
<a href=""><i class="fa fa-circle-o"></i>その他<i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="">その他１</a></li>
<li><a href="">その他２</a></li>
</ul>
</li>
</ul>
</section>
</aside>
<!-- content -->
<div class="content-wrapper">
<!-- コンテンツヘッダ -->
<section class="content-header">
<h1>ページタイトル</h1>
<!-- パンくず -->
<ol class="breadcrumb">
<li><a href="">Home</a></li>
<li>現在地</li>
</ol>
</section>
<!-- メインコンテンツ -->
<section class="content">
<!-- コンテンツ1 -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">ボックスタイトル</h3>
</div>
<div class="box-body">
<p>ボックスボディー</p>
</div>
</div>
<div class="row">
<!-- col -->
<div class="col-xs-6">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">ボックスタイトル左</h3>
</div>
<div class="box-body">
<p>ボックスボディー</p>
</div>
</div>
</div>
<!-- col -->
<div class="col-xs-6">
<div class="box box-danger">
<div class="box-header">
<h3 class="box-title">ボックスタイトル右</h3>
</div>
<div class="box-body">
<p>ボックスボディー</p>
</div>
</div>
</div>
</div><!-- end row -->
</section>
</div>
<!-- フッター -->
<footer class="main-footer">
<div class="pull-right hidden-xs">Version1.0</div>
<strong>Copyright © 2015</strong>, All rights reserved.
</footer>
</div><!-- end wrapper -->
<!-- JS -->
<!-- jquery -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- bootstrap -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- adminLTE -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
</body>
</html>
contentは基本<div class="box">をベースにrowやcolと組み合わせながら追加していけばいいようです。
###全体の構造
タグの構造は下記のようになっている。Bootstrapベースとは言え、事実上別物である。
###Skinを変える
デフォルトでは、青系のskin-blueがbodyに適用されています。その他にも、redやらyellowやら用意されているようです。
変更するには、bodyのclassと、
<body class="skin-blue">
<head>のCSS
<link href="dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
の2箇所を変えてやる必要があります。
もちろん、それらをコピーして、オリジナルの配色を行うこともできます。
###バグ？？
- TOPメニューにclass="active"をつけても何の変化も無い（これは本家サイトでも同じ）。どうやらStyleが定義されていないらしい。なので、カスタムのcssに、
<style>
.navbar-nav>li.active>a{
background-color: #367FAA;
}
</style>
などとしてあげる。
###おまけ（ログイン画面）
ログイン画面のサンプルは、pages/examples/login.htmlに有るのですが、ソーシャルログインが付いたりと、管理画面向けには複雑なので、シンプルにします。
とりあえず、こんな感じ。
ソースはこんな感じ。<body class="login-page">などとなるみたいですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.4 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/square/blue.css" rel="stylesheet" type="text/css" />
</head>
<body class="login-page">
<div class="login-box">
<div class="login-logo">
<a href="">管理画面</a>
</div><!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">ログインして下さい。</p>
<form action="" method="post">
<!-- メール -->
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email" />
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<!-- パスワード -->
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<!-- ボタン グリッドでセンタリング-->
<div class="row">
<div class="col-xs-4">
</div><!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">ログイン</button>
</div><!-- /.col -->
<div class="col-xs-4">
</div><!-- /.col -->
</div>
</form>
</div><!-- /.login-box-body -->
</div><!-- /.login-box -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
</body>
</html>
###今後試すこと
- ページング付きのデータ一覧表示のテスト
- chart.jsでのチャート表示のテスト
- Laravelのbladeとの融合