Bootstrap 4による管理画面 Material Dashboard 【今日のGitHubトレンド】

はじめに

GitHubのトレンドリポジトリをご紹介していくこのシリーズ。
今回はマテリアルデザインによる管理画面をBootstrap 4ベースで作ることができる、Material Dashboardをご紹介します。

公式リポジトリより

多くのWebサービス開発において、管理者用にデータの確認をしたり、編集をしたりする管理画面が必要となります。
どうしても管理画面のデザインはサービスのデザインに比べて手を抜いてしまうことが多く、またUIも使いづらくなりがちです。

以前の記事でtablerという管理画面をご紹介しましたが、今回ご紹介するMaterial Dashboardは、簡単にカスタマイズもしやすいマテリアルデザインの管理画面を作ることができるライブラリです。

Material Dashboardとは

Material Dashboardは先述の通り、Bootstrap 4製のマテリアルデザインによる管理画面ライブラリです。

Bootstrapとは

Bootstrapはモバイルファーストのフロントエンドフレームワークです。
最新のバージョンは4.1となっています。
レスポンシブデザインを手軽に実装できることから、デザイナーはもちろんエンジニアにも人気のフレームワークです。

マテリアルデザインとは

マテリアルデザインとは、Googleが提唱したデザインの概念です。
直訳すると「物質的なデザイン」となり、簡単に言ってしまうと、現実世界のものに触れたり操作しているようなUIにすることで、日常的に使われるインタフェースとなる、という考え方です。
別の記事で今後解説しますが、詳しくはこちらの公式ガイドラインを参考にしてみてください。

Material DashboardはこうしたBootstrapの実装しやすさ、マテリアルデザインのインタフェースとしての使いやすさを兼ね備えた管理画面を作ることができます。

こちらにデモがありますので、ぜひ触ってみてください。

使い方

では実際にMaterial Dashboardを使っていきます。

リポジトリをクローンする

こちらのコマンドでリポジトリをローカルにクローンします。
git clone git@github.com:creativetimofficial/material-dashboard.git

少しファイル数が多いですが、このようになります。

material-dashboard/
├── assets/
|   ├── css/
|   |   ├── bootstrap.min.css
|   |   ├── material-dashboard.css
|   |   └── demo.css
|   ├── js/
|   |   ├── bootstrap-notify.js
|   |   ├── bootstrap.min.js
|   |   ├── chartist.min.js
|   |   ├── demo.js
|   |   ├── jquery-3.1.0.min.js
|   |   ├── material-dashboard.js
|   |   └── material.min.js
|   ├── sass/
|   |    ├── md
|   |    └── material-dashboard.scss
|   └── img/
|
├── documentation/
├── examples/

実際にプロジェクトに使ってみる

では実際にMaterial Dashboardを使用してみましょう。

まずassets/cssと assets/js ディレクトリを実際に使うCSSやJavaScriptのディレクトリにコピーします。

そしてファイルで必要なファイルを読み込んでいきます。

CSSのインポートはこちらです。
<link href="/design/bootstrap/material-dashboard-github-trending/assets/css/material-dashboard.css?v=2.1.0" rel="stylesheet" />

またJavaScriptはこちらを読み込みます。

<!--   Core JS Files   -->
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>

<!--  Google Maps Plugin    -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>

<!-- Chartist JS -->
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/plugins/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/plugins/bootstrap-notify.js"></script>

<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="/design/bootstrap/material-dashboard-github-trending/assets/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>

プラグインなどは必要に応じて外してください。
jQueryやpopper.js、bootstrap-material-designは依存している為、読み込むようにしてください。

フォントはGoogle FontsやFont Awesomeを使用します。

<!--     Fonts and icons     -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">

あとは公式リファレンスの通り作っていくだけですが、テンプレートとして用意されているtemplate.html、もしくはexamplesの中のhtmlファイルを雛形としていくのが良いでしょう。

template.htmlをブラウザで見るとこのようになっています。

見覚えのあるマテリアルデザインで管理画面が実装できそうですね！
template.htmlはこちらで確認できます。

まとめ

管理画面はデザイナーが入らず、エンジニア側だけで実装することも多いのではないでしょうか。
そんなときにこのMaterial Dashboardを使うと、見やすくデザイン性も高いものになりそうです。