保守性の高い管理画面のデザインを考える-AdminLTE3

保守性の高い管理画面のデザインを考える

目的

Bootstrapをベースにした管理画面等のテンプレートテーマである AdminLTE を利用したかっこいい管理画面の雛形を作成する。

https://adminlte.io/docs/3.0/

adminLTE – 公式ドキュメント

Webを受託制作する現場においてフロントのデザイン制作をする場合は、クライアントのニーズに柔軟に対応する為、デザインカンプを一から構築するのが主となりBootstrapのようなCSSフレームワークはあまり利用されませんが、管理画面の場合はデザイン作成に不慣れなエンジニアが作成することが多く、また複数の開発者が制作に携わるので チームとして永続的に一定のクオリティの制作物を作り続ける為に、ある程度の「無駄」を許容してでも統一したルールと堅牢性を持ったCSSフレームワークを利用するということには十分なメリットがあると言えます。

AdminLTEの特徴

  • Bootstrapベースなので構築が簡単で学習コストがかからない
  • ドキュメントが充実していて情報量が豊富
  • PC・スマホの両方に対応したレスポンシブデザインであり、流行りのフラットデザインを取り入れている
  • フォームやチャート、ログイン画面からエラーページまで、使いたいものが全て揃っている

完成した管理画面デザイン

https://demo.isystk.com/adminlte3/

この管理画面は、自作のJSやCSSは一切利用しておらず、 AdminLTE3 で用意されているクラス指定だけでここまで完成された管理画面を作成することが出来ました。

Webpack4でadminLTEを利用する場合

エントリーJS

import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
import 'admin-lte/dist/css/adminlte.min.css';

import jQuery from 'admin-lte/plugins/jquery/jquery.min.js';
window.$ = jQuery;
window.jQuery = jQuery;

import "admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js";

require('admin-lte/dist/js/adminlte.min.js');

webpack.config.js 

const src = __dirname + "/src";
const dist = __dirname + "/dist/"

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const webpackConfig = {
  context: src,
  entry: {
    index: './index.js'
  },
  output: {
    path: dist,
    filename: 'js/[name].js'
  },
  devServer: {
    contentBase: dist,
    compress: true,
    port: 3000,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader"
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader'
        ]
      },
      {
          test: /\.(jpe?g|png|gif)$/,
          use: [
              {
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]',
                      outputPath : 'images/',
                      publicPath : function(path){
                          return './images/' + path;
                      },
                      esModule: false
                  }
              }
          ]
      },
      {
          test: /\.(ttf|eot|woff|woff2|svg)$/,
          use: [{
              loader: 'file-loader',
              options: {
                  name: "[name].[ext]",
                  outputPath: './webfonts',
                  publicPath: '../webfonts',
              }
          }]
      }
    ]
  },
  plugins: [
    // distの中を初期化する
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ favicon: "./assets/favicon.ico" }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css" // Dist
    })
  ],
  optimization: {
    minimizer: [
      new TerserPlugin(), // JavaScript の minify を行う
      new OptimizeCSSAssetsPlugin() // CSS の minify を行う
    ]
  }
}

Object.keys(webpackConfig.entry).forEach((key) => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      template: './assets/index.html',
      filename: './index.html',
      inject: true,
      chunks: [key], // insert to the root of output folder
    })
  );
})

module.exports = webpackConfig;

ソースコード

https://github.com/isystk/adminlte3-sample

コメント

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。