WeBlog

Webに関する情報を中心に発信してるブログ

AdminLTEで管理画面を実装する

AdminLTE3とは?

AdminLTEは、Bootstrap4.6フレームワークとJS / jQueryプラグインに基づいて作成された、管理画面の作成に利用されるCSSフレームワークです。

yarnを使ってAdminLTE3をインストール

rubyのライブラリ管理を行うGemMacOSに導入するライブラリ管理ツールであるHomebrew以外にも、様々なパッケージ管理ツールが存在します。

 その中でフロントエンドのパッケージ管理ツールであるyarnを使っていきます。

フロントエンドのパッケージ管理ツールは他にもnpmというものがあります。

# yarn add ライブラリ名@バージョン
yarn add admin-lte@^3.0

yarn addコマンドで必要なライブラリをインストールします。

  1. node_modules
  2. package.json
  3. yarn.lock

というファイルやフォルダができます。

# package.json

{
  "name": "runteq_normal",
  "private": true,
  "dependencies": {
    "admin-lte": "^3.0"
  }
}

package.jsonというファイルは、RailsでいうGemfileと同じようなものです。

RailsでもGemfileにインストールしたいgemを記載してbundle installすると思いますが、

yarnではpackage.jsonというファイルにインストールしたいライブラリを記載します。

今回は"admin-lte": "^3.0"をインストールする形になります。

yarn.lockはGemfile.lockと同じで、「このライブラリをこのバージョンでインストールしましたよ」という領収書のようなものです。

このファイルを見れば、

・どんなライブラリがインストールされたか

・どんなバージョンでインストールされたか

を確認することができます。

node_modulesはフォルダになりますが、このフォルダの配下にインストールしたライブラリや依存関係にあるライブラリのファイルやフォルダが置かれます。

なので、admin-lteをインストールすると、admin-lteを使うのに必要なファイルやフォルダが

node_modulesフォルダ配下に作成されます。

https://yarnpkg.com/package/admin-lte

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

コントローラーとアクション、ルーティングを作成

AdminLTEの表示確認をするための「コントローラー」「アクション」「ルーティング」を作成します。

今回の例では「Admin::Dashboards」というコントローラーと「index」というアクションを作成しています。

% rails g controller Admin::Dashboards index

      create  app/controllers/admin/dashboards_controller.rb
       route  namespace :admin do
  get 'dashboards/index'
end
      invoke  erb
      create    app/views/admin/dashboards
      create    app/views/admin/dashboards/index.html.erb
      invoke  decorator
      create    app/decorators/admin/dashboard_decorator.rb

AdminLTEのstarter.htmlを利用する

先ほどyarnを使ってadmin-lteをインストールしました。

AdminLTE の管理画面のサンプルがnode_modules/admin-lte/starter.htmlという部分にあります。

このファイルのコードをコピペして、貼り付けます。

# app/views/sample/index.html.erb

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Starter</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

# 以下続く
 

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

このコードはただのHTMLコードなので、ここからカスタマイズをしていきます。

AdminLTEのjs/cssファイルの読み込み設定

ただのHTMLのコードではRailsのビューファイルで読み込めないので、まずはCSSやJSを読み込めるようにしていきます。

読み込むべきCSSやJSはHTMLファイルのlinkタグやscriptタグで記載されているので、それを参考にして読み込んでいきます。

下記のURLをクリックして開発ツールから

・どんなCSSを読み込んでいるのか

・どんなJSを読み込んでいるのか

を確認することもできます。

https://adminlte.io/themes/v3/starter.html

# app/asset/stylesheets/admin.css

// Font Awesome
@import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
// Theme style
@import 'admin-lte/dist/css/adminlte.css';
# app/javascript/admin.js

//= require jquery3
//= require rails-ujs
//= require admin-lte/plugins/bootstrap/js/bootstrap.bundle.min
//= require admin-lte/dist/js/adminlte.min

まずは上記のようにCSSやJSをアセットとして記載していきます。

# app/views/admin/dashboards/index.html.erb

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Log in</title>

  <%= stylesheet_link_tag 'admin', media: 'all' %>  # admin.scssファイル(マニフェストファイル)を読み込む
</head>

以下続く

    <%= javascript_include_tag 'admin' %> # admin.jsファイル(マニフェストファイル)を読み込む
</body>

</html>

作成したアセットをstylesheet_link_tagjavascript_include_tagで読み込んでいきます。

この状態でビューファイルを画面に表示すると下記のようなエラーになります。

Asset was not declared to be precompiled in production. Add Rails.application.config.assets.precompile += %w( admin.css ) to config/initializers/assets.rb and restart your server

内容としては「アセットがプロダクションでプリコンパイルされるように宣言されていませんでした。」と言う内容です。

なので、config/initializers/assets.rb

`Rails.application.config.assets.precompile += %w( admin.css )`

と設定を追加しろ。言われます。

なので設定を追加していきましょう。

その前にnode_modulesフォルダまでのパスがアセットパイプラインのpathとして通っているか確認します。

% rails c
irb > Rails.application.config.assets.paths

こちらを打つとたくさん出力されたパスの内容の中に、node_modulesの設定もあるはずです。

これらの出力されたパスの先頭から順に検索していきます。

node_modulesが表示されれば問題ないです。

次にプリコンパイルの設定をします。

application以外のマニフェストファイルを個別に読み込みたい場合はプリコンパイルの設定をしないとエラーが起きてしまいます。

他のマニフェストや、個別のスタイルシート/JavaScriptファイルをインクルードしたい場合は、config/initializers/assets.rbのprecompileという配列を使用します。(Railsガイド)

# config/initializars/assets.rb

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules') # マニフェストからの検索パスに追加(デフォルトで記載されている) 

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
Rails.application.config.assets.precompile += %w[ admin.js admin.css ] # プリコンパイルの設定

上記のように設定を記述します。

config配下のファイルは設定ファイルなので、サーバーが起動したタイミングで1度だけ読み込まれます。

なので、何か変更を加えたらサーバーを再起動しないと反映されないので注意が必要です。

ちなみにstylesheet_link_tagjavascript_include_tagadminからのパスで記載できるのは、下記1行が記載されているからです。

Sprocketsはこの設定からファイルを検索します。

# config/initializars/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

ここまでくれば画面を表示することができます。

ヘッダーやフッター、サイドバーを共通化したい場合は、パーシャルテンプレートに切り出してあげます。

また、管理画面にログインするためのログイン画面を作成したい場合はnode_modules/admin-lte/pages/example/login.htmlを参考に作成していきます。

パッケージ管理ツールを使う理由

AdminLTEはadminlte-railsのようなgemから取得することもできます。

しかし、メンテナンスが追いついていなく、取得できるAdminLTEのバージョンも古いものとなっています。

  • JavascriptパッケージのリポジトリRailsだけでなく言語を問わず(PHPなど)広く利用されるためメンテナンスが頻繁に行われるため、ライブラリの取得元として信頼できます。

スターの数を確認すると、下記のように使われている頻度がわかります。これが信頼を表します。

パッケージ管理ツールを使うと、依存会計のライブラリやそのバージョンを意識する必要もなく、バージョンを上げ下げするときも楽にできます。

  • バージョン管理が楽