CSSフレームワーク – AdminLTEを試す

CSSフレームワークとは

『開発はできるけどデザインは無理!』とか平気な面して言う 仕事なめてる開発者ちゃん達 のために、誰かさんがわざわざ作ってあげた、CSSとか画像とかフォントとかのパッケージ。

有名なところで言うと、

などがあるんだけどね。

個人的にはUKitが一番好きだけどね。シンプルで無駄がなくて使いやすいんで(ちょっと足りないなって思うこともあるけど)。

maxresdefault

というよりむしろ、Bootstrap使ってるサイト多すぎるし、しかもちゃんと使えてないから見ていてイライラするのです。

わざわざパッケージ化したにも関わらず使えてないのって、やっぱりドキュメントが英語だから?誰かが書いたブログの記事の範囲でしか適用できない?

俺だって英語よくわからんけど、使いたいって強く思えば脳みそが瞬間バーストしてターボ化し、英語わかるようになるよ。だからやればいいよ。一番最初は無理やりやるのが常識。

AdminLTEとは

tmp00037

そんな多くのCSSフレームワークが乱立する中、さらに乱立を深めるように、今も尚フレームワークが大量に生まれている。その一つに、管理画面向けのフレームワークがある。

これは興味深い

見た目はどこかで見たことあるようなデザイン。例えばGitLabとかってこれ使ってる気がする。

どんなものがあるのか

ウィジェットを見てみるとわかりやすいかも。

tmp00038

ダッシュボード向けのインフォ、投票結果、統計などの他にも、メッセージ、ローディング、メニューなんかも豊富にある。

面白いのがチャットだ。チャットのウィジェットもある。さらにソーシャルウィジェットとして、パーソナルカード形式のものやブログ形式のものもある。

色々使いみちはあるだろうけど、だいたいこれくらいあれば事足りるのかな。

チャートも用意されている。いわゆるグラフだ。以下の4つのライブラリを使用可能。

tmp00039

UI要素もかなり充実している。

tmp00040

アイコンなども当然用意されているが、何が興味深いかって、タイムラインがあることだ。

tmp00041

Facebookのタイムラインみたいに、データを履歴として見せたいときなんかに最適ではないかと。

他の要素と組み合わせると、例えばフォームとタイムラインを組み合わせて、インストールウィザードみたいなものも作れたりするかもしれない。

なかなか痒いところに手が届きそうなフレームワークだ。

というわけでフォーム。こちらは3種類用意されている。

tmp00042

最後のEditorsは、CKEditorみたいないわゆるWYSIWYGエディタ的なものだ。これも他のフレームワークには無いものなので、貴重な要素。

テーブルに関しては、いろいろな要素が比較的派手な作りになっているので、シンプルが重視されている。そもそもテーブルってそれ自体は目的じゃなく、ただの見せ方という手段なので、目立つのはどうかと思うし、こういうのが正しいと思う。

tmp00043

2つ目のはcsv的な内容を見せるには最適かと。

そしてカレンダーまで用意されている。

tmp00044

これはFullCalendarを使ってるのかな?何れにせよかなり見やすく出来ている。

メールボックスなんて言うものもある。

tmp00045

これはメッセージとかお知らせなんかをここにプールしておくと良いかもね。
もう少しこった使い方をするなら、ユーザサポートで使うチケットシステムなんかが良いかも。

使ってみる

具体的な使い方は次回にするけど、ここにドキュメントが用意されているので、全体を俯瞰しながら使ってみたいと思う。