LoginSignup
1

More than 5 years have passed since last update.

AdminBSB Material Designを使ってみた

Last updated at Posted at 2018-12-10

新システムを作るってんで、Bootstrap テンプレートにAdminBSB Material Designを採用してみました。
使いたかった理由は、「可愛かったから」
弊社でよく使われるのはGentelellaだけど、私にはその、、可愛いとは思えなかったので(> <)w
※Gentelella自体はプライベート使ってみた感じ、とっても良いものでした。

後、マテリアルデザインに興味があったので。

AdminBSB Material Designって?

DOCUMENTATIONがきちんと用意されていて、
INTRODUCTIONに書いてある通り。
https://gurayyarar.github.io/AdminBSBMaterialDesign/documentation/#/

ほにゃららら翻訳したものを鵜呑みにすると、

  • Bootstrap 3.x FrameworkとGoogle Material Design of Powerで開発された、無料の管理テンプレート
  • Jqueryプラグインが使われている。
  • 簡単に編集できるようにすべてのファイルが整理されている。

とのこと。うん、そんな感じ。

どんな画面?

まずはデモを見て欲しい。可愛いでしょう!
可愛いだけじゃなくて、ログインページ作ったり、アカウント作成ページ作ったりなんかも、
Exampleや使えるclassが沢山用意されているから簡単なんだ!(見た目はな。中は色々作らないといけないけど、、)

image.png

導入の仕方

Gitのinstallationに書いてある通り。
にしなくても、Downloadして読み込める所に適宜置けば良いと思う。
実際、今回はそうした。
https://github.com/gurayyarar/AdminBSBMaterialDesign#installation

実装のパターン

これが正道なのかは分からないけど、私は

  1. デモから欲しい機能を探す。
  2. 欲しいものがあればデモのソースを読んで、使われているcssとjs,classを確認する。
  3. cssの中身とjsの中身を確認する。js内で必要な他のjsが読み込まれていないと動かないから、中身はしっかり確認。
  4. 大体理解したら、必要なcss,jsを読み込みつつ、classをあてる。

というスタンスで進めました。

例として、
以下のJQUERY DATATABLESのソースを一部抜粋して見た場合、

JQUERY DATATABLES:
https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/tables/jquery-datatable.html

jquery_datatables.html
<!-- JQuery DataTable Css -->
<link href="/adminbsb/plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css" rel="stylesheet">

・
・
・

<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    BASIC EXAMPLE
                </h2>
                <ul class="header-dropdown m-r--5">
                    <li class="dropdown">
                        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="javascript:void(0);">Action</a></li>
                            <li><a href="javascript:void(0);">Another action</a></li>
                            <li><a href="javascript:void(0);">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                                <th>Salary</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>Tiger Nixon</td>
                                <td>System Architect</td>
                                <td>Edinburgh</td>
                                <td>61</td>
                                <td>2011/04/25</td>
                                <td>$320,800</td>
                            </tr>
                            <tr>
                                <td>Garrett Winters</td>
                                <td>Accountant</td>
                                <td>Tokyo</td>
                                <td>63</td>
                                <td>2011/07/25</td>
                                <td>$170,750</td>
                            </tr>
                            <tr>
                                <td>Ashton Cox</td>
                                <td>Junior Technical Author</td>
                                <td>San Francisco</td>
                                <td>66</td>
                                <td>2009/01/12</td>
                                <td>$86,000</td>
                            </tr>
                            <tr>
                                <td>Cedric Kelly</td>
                                <td>Senior Javascript Developer</td>
                                <td>Edinburgh</td>
                                <td>22</td>
                                <td>2012/03/29</td>
                                <td>$433,060</td>
                            </tr>
               ・
               ・
               ・
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

・
・
・

<!-- Jquery DataTable Plugin Js -->
<script src="../../plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="../../plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="../../plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>

ここから、

  • 利用する機能のcssとPlugin(js)を確認(上のデモの場合、"dataTables.bootstrap.css"と"/jquery-datatable/配下のjs")
  • divタグやtable に当たっているクラスを確認(上のデモの場合、"table-responsive"や"table table-bordered table-striped table-hover js-basic-example dataTable")

して、あててみれば、おー動いた動いた。
というのを繰り返していました。

tbodyの中身はtwig使ってforでまわしてリスト出して・・・
って感じです。

え?と思った点

年月だけを選ぶカレンダーが無い

以下を見て分かる通り、必ず日も選択しないといけない。

image.png

カレンダーは"bootstrap-material-datetimepicker.js"というjsが使われていて、
monthPickerというオプションが有り、これを使うと一見いけそうだが、
残念だがそうはならない。
https://github.com/T00rk/bootstrap-material-datetimepicker

色々調べた結果、解決の糸口が見つからなかったので、
断腸の思いで"bootstrap-material-datetimepicker.js"を書き換えた。
(どなたか違う方法があるのであれば、ご教示ください。
BOOTSTRAP DATE PICKER使えばいいじゃんというご意見があれば、ごもっともかと思います)
修正した内容を、以下一部抜粋。

bootstrap-material-datetimepicker.js
              show: function ()
              {
                 this.$dtpElement.removeClass('hidden');
                 this._attachEvent($(window), 'keydown', this._onKeydown.bind(this));
                 this._centerBox();
                 this.$element.trigger('open');
                 if (this.params.monthPicker === true)
                 {
                    this._hideCalendar();
                    this._hideDay();
                 }
              },
              _hideCalendar: function() {
                 this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden');
              },
              _hideDay: function() {
                 this.$dtpElement.find('.dtp-actual-num').addClass('hidden');
              },

カレンダーを表示した時点でこの関数が呼ばれる為、
monthPickerがtrueの時に"カレンダー"と"日"(07と表示されているやつ)をhiddenにしてやった。

bootstrap-material-datetimepicker.js
                 if (this.params.monthPicker === true)
                 {
                    this._hideCalendar();
                    this._hideDay();
                 }

すると

image.png

こんな感じで表示される。(Clearボタンが無いのとかは別途消した)
この処理を各イベント(前の年や次の月を見る、"<"とか">"とかのリンク)すべてに実装してあげると
想定通り動くようになった。

画面遷移するとメニューが閉じられた状態で表示される

メニューを選択して画面描画が行われると、描画後に選択したメニューが開かれたままの状態にしてくれるjs("/adminbsb/js/admin.js")があった。
便利やんと思って使ってみたけど、描画後メニューが閉じられた状態で表示されていた。

image.png

"/adminbsb/js/admin.js"を読めば分かるのだが、
liタグにactiveというclassがあたっていないとダメなようだ。

admin.js
        //When page load
        $.each($('.menu .list li.active'), function (i, val) {
            var $activeAnchors = $(val).find('a:eq(0)');

            $activeAnchors.addClass('toggled');
            $activeAnchors.next().show();
        });

なので、方法は問わないので、
描画後選択したメニューが開かれたままの状態にしたいliタグに、class="active"というのを付けるよう実装してあげよう。

使っているjQueryとBootstrapのバージョンが。。

以下の通り

  • jQuery:v1.12.4
  • bootstrap:v3.3.6

jQueryがもうちょっと新しいのが良かったなーと思って、
jQuery-3.3.1を入れてみたら今のところ問題無く動いているので、とりあえずは良し。
でも、保証は無いぞ!自己責任だぞ!

bootstrapもv4にしたかったが、勇気が無かった。

最後に

使ってみた感想としては、まずまず使い勝手は良かったかなと! :smile:
導入も難しくは無いし、使えるclassが多く用意されているので、
マテリアルデザインの画面が作りたかったら候補の一つかなと。

ただ、使っているjQueryとBootstrapのバージョンが新しいとはいえないので、
新しいもの好きな方は、他のを使ってみるのも手だとは思います。

え?と思った点は他にもあった気がしますが、
可愛いからいっかと思いました。まる:blush:

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1