AdminBSB Material Designを使ってみた

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

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

#  AdminBSB Material Designって？

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

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

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

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

# どんな画面？

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

https://gurayyarar.github.io/AdminBSBMaterialDesign/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/75747/5a642c7e-9594-52c8-4a54-f06c67aefb87.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

```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でまわしてリスト出して・・・
って感じです。

# え？と思った点
## 年月だけを選ぶカレンダーが無い

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

https://gurayyarar.github.io/AdminBSBMaterialDesign/pages/forms/basic-form-elements.html

![image.png](https://qiita-image-store.s3.amazonaws.com/0/75747/c80bf7f4-6052-a7dd-d44a-8c3e134bf396.png)

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

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

```js: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にしてやった。

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

すると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/75747/bc535174-0669-9f91-2606-a87229861c23.png)

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/75747/f2111789-93d0-e3c4-cb05-4b489c9aa2ee.png)

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

```js: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: