こんにちは、ムキムキフロントエンドエンジニアを目指す杉田です。
弊社では社員の考えるキャリアプランに柔軟に対応しています。
最近では特に「フロントエンジニアになりたい」と方向転換を考える方が増えているようで一体何人のムキムキフロントエンジニアが産まれるのかワクワクしています。
それはさておき、今回ご紹介させていただきますのはこちら。
「AdminLTE」です。
AdminLTEとは
AdminLTEは、みなさんおなじみのBootstrap3をベースにした、管理画面等のテンプレートテーマです。
スマートフォン等にも対応しており、かっこいい管理画面作りたいけどデザインに自信がない・・・といった方でも、これを使えばリッチでナウいUIを作れるという優れものです。
MITライセンスで無料で自由に使うことができます。
また、公式ページ右上の「Premium Admin Templates」というページにはさらに作り込んだリッチなテーマが有料で販売されています。
大体20ドル程度なので2400円ぐらいでしょうか。安っ！！（投稿時のレートです）
さっそく使ってみる
さて、そのままですがさっそくどういったものなのか、使ってみてみましょう。
まずはやはり、公式サイトからダウンロードします。
AdminLTE自体のCSSやJS、HTMLはdistというフォルダに入っています。
pluginフォルダにはプラグインが豊富に入れてあります。これはワクワクしますね！
細かな設定変更でなるべく自分好みに。
先ほどのdistフォルダの中にはJSフォルダがあり、またその中にapp.jsがあります。
ここにはAdminLTEの設定が細かく記載されていて、こちらの設定を変更することができます。
変更の仕方は「AdminLTEOptions」という名前でオブジェクトを作り、app.jsの前に読み込ませます。
<script>
var AdminLTEOptions = {
sidebarExpandOnHover: true,
//サイドバーメニューをホバーで全表示する（app.js55行目）
animationSpeed: 300,
//アニメーションのスピードを変更する（app.js45行目）
colors: {//(app.js104行目)
red:#dc243c;
}
//テーマカラーの色を変える
};
</script>
<script src="dist/js/app.js" type="text/javascript"></script>//app.jsの読み込み
もちろん本番の時は新しく設定変更用のファイルを作るべきですね。
上記の方法でそれ以外の動きのオンオフ、クラス名の変更、色の変更、幅サイズの変更などができます。
シンプルでスタイリッシュなデザイン。
ただのテキスト、ただの要素がなんだか物足りない。
そんなときに、ちょっと手を加えるだけでオシャレになるよ！と言われたら試したくなりませんか？
例えば下記のようなもの。
<div> <h3 >今日のトピック</h3> <div> <ul> <li>〇〇について</li> <li>〇〇について</li> <li>〇〇について</li> </ul> </div>
これでは少し寂しい印象ですね。
ではAdminLTEの書き方をクラスを使って上記に装飾を加えようと思います。
<div class="box box-info"> <div class="box-header with-border"> <h3 class="box-title">今日のトピック</h3> </div><!-- /.box-header --> <div class="box-body"> <ul> <li>〇〇について</li> <li>〇〇について</li> <li>〇〇について</li> </ul> </div><!-- /.box-body --> </div><!-- /.box -->
いかがでしょうか。
雰囲気がだいぶ変わりました。
ご覧の通り.boxというクラス名で大きく括った上で、h3要素は.box-headerというクラス名のdiv要素に入り、.box-bodyにul要素をいれるなど構成が少し変わります。
.box-infoは.boxと併用され上部の線の色を決めています。
.box-default（灰色）.box-success（緑）.box-warning（オレンジ）.box-danger（赤）がありステータスで色分けができるようになっているところが親切ですね。
.with_borderは「今日のトピック」の下に線を入れるか入れないかの指定です。
わざわざCSSを追加しなくてもこれだけ装飾ができるのは便利だと思います。
また下記の様なデザインもあります。
これらもAdminLTEで用意されているデザインで、コピペだけで十分実現できてしまいます。
SNSとのリンクも最近は当然ですし、メッセージ数などは管理画面で使えると思います。
アイコンはBootstrapで使用されているFont Awesomeで、上記のアイコン以外のものを使う事ができます。こういったお知らせボックスがあるだけで画面はかなり華やかになるのではないでしょうか。
これら以外にもAdminLTEには様々なデザインが用意されています。
あまりにも多いので紹介しきれませんが、「AdminLTE」で検索すれば真っ先にプレビュー画面が出てきますので確認してみてください。
豊富なプラグイン。
AdminLTEにはたくさんのプラグインが含まれています。
冒頭でも書いた通り、AdminLTEはBootstrapをベースにしています。
Bootstrapもクラス指定などすればシンプルなデザインを適用させることができます。
ですが、こう考えたことはありませんか？
「デザインが足らない・・・！」
たとえばフォーム部品。
テキストエリアやインプット要素など、Bootstrapでオシャレにすることができますが、ラジオボタンとチェックボックスはなぜかデフォルトのまま。。。
AdminLTEなら含まれているプラグインを使って下記のようなデザインにすることができます。
やり方はまず、必要なコードをHTMLで読み込ませます。
<link rel="stylesheet" href="plugins/iCheck/all.css"> <script src="plugins/iCheck/icheck.min.js"></script>
次に、チェックボックスや、ラジオボックスが必要な箇所に要素を追加します。
<input type="checkbox" checked><!--"checkedがない場合初期表示ではチェックが外れている状態"--> <input type="radio" name="iCheck">
最後に下記のjavascriptを読ませます。
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat-green',//greenの箇所を他の色に設定することも可能※
radioClass: 'iradio_flat-green'//"iradio_flat-〇〇"ではなく"iradio_minimal-〇〇"にすれば少し違う別のデザインになります。
});
//※用意されている色
//Black
//Red
//Green
//Blue
//Aero
//Grey
//Orange
//Yellow
//Pink
//Purple
});
これだけ！
AdminLTE独自のデザインではなくプラグインを使用したデザインですが、自分でサイトに合うプラグインを探したり、自作するよりも全て考えて用意されているものを使った方が断然時間短縮になります。
こちらは「iCheck」というプラグインを使用していますのでもっと知りたいという方は公式ページをご確認ください。
含まれているプラグインはこれだけではありません。
例えば「daterangepicker」。
日付期間だけでなく時間まで一度で選ぶ事ができるUIを表示させることができます。
デザインも元から含まれているだけあってAdminLTEになじむものになっています。
他にも下記のようなプラグインがふくまれています。
こういったプラグインがたくさん含まれていることもAdminLTEの強みではないでしょうか。
まとめ
システム開発におけるデザインは決して無視できるものではありません。
よくできているシステムでもデザインが悪ければその製品は印象が悪いところから評価が始まってしまいます。AdminLTEを使う事が正解ではありませんが、デザインのコストを下げたい、とりあえず凝ったものでなくても見れるものがあれば。といった時にそれ以上の力を発揮してくれるのではないかと思います。
以上AdminLTEの紹介でした。
