Ruby on Rails

Rails6でAdminLTEを導入する方法

【Rails6】AdminLTE3の導入手順

AdminLTEとは、Bootstrapをベースとして作られた管理画面の制作でよく利用されるCSSのフレームワークです。

本記事では、Ruby on Rails（Rails6）で AdminLTE3を導入する手順を紹介しています。

スポンサーリンク

AdminLTEのインストール

まずは、yarnでAdminLTEをインストールします。

yarn add admin-lte

PS C:\ruby\adminlte_sample> yarn add admin-lte
yarn add v1.22.4
[1/4] Resolving packages...
warning admin-lte > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning admin-lte > bootstrap-colorpicker > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning admin-lte > tempusdominus-bootstrap-4 > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning admin-lte > pdfmake > pdfkit > fontkit > babel-runtime > core-js@2.6.11: core-js@<3 is no longer maintained and 
not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

・・・（省略）・・・

Done in 28.28s.

AdminLTEのインストールが完了すると、Railsアプリ直下に「node_modules」ディレクトリが作成されます。

また、package.jsonを確認するとインストールされたAdminLTEのバージョンを確認することができます。

{
  "name": "adminlte_sample",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "admin-lte": "^3.0.5",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

コントローラーの作成

AdminLTEの表示確認をするためのコントローラーを作成します。

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

PS C:\ruby\adminlte_sample> rails g controller test starter
      create  app/controllers/test_controller.rb
       route  get 'test/starter'
      invoke  erb
      create    app/views/test
      create    app/views/test/starter.html.erb
      invoke  test_unit
      create    test/controllers/test_controller_test.rb
      invoke  helper
      create    app/helpers/test_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/test.scss

AdminLTEのstarter.htmlを反映

AdminLTE 適用のサンプルとして付属してくる「node_modules/admin-lte/starter.html」のbodyの中身を「app/view/test/starter.html.erb」にコピペします。

■app/view/test/starter.html.erb

<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>

・・・（省略）・・・

</div>
<!-- ./wrapper -->

スポンサーリンク

また「app/view/layouts/application.html.erb」にも「node_modules/admin-lte/starter.html」のhead情報、bodyのclassを適用します。※jsとcssの読み込みは後で設定するため、ここには記述しません。

■app/view/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>AdminlteSample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  
  </head>

  <body class="hold-transition sidebar-mini">
    <%= yield %>
  </div>
</html>

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

「node_modules/admin-lte/starter.html」のヘッダで読み込んでいた「js」と「css」を下記のファイルに設定を追記して読み込めるようにします。

■app/asset/stylesheets/application.css

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

■app/javascript/packs/application.js

require("admin-lte");

■app/config/webpack/environment.js

const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'admin-lte/plugins/jquery/jquery',
    jQuery: 'admin-lte/plugins/jquery/jquery',
  })
)

画像ファイルをassetsに配置

このままだと画像ファイルが読み込まれないので（サンプル画像なので不要ですが、念のため読み込めるように対応）「node_modules/admin-lte/dist/img」配下にある画像を「app/asset/images」の配下にコピーします。

そして「app/view/test/starter.html.erb」で画像を読み込んでいる個所を下記のように修正します。

[変更前]

<img src="dist/img/user1-128x128.jpg"

↓

[変更後]

<img src="<%= image_path 'user1-128x128.jpg'%>

動作確認

それでは、Railsのサーバーを起動して動作確認してみます。

rails s

「 http://localhost:3000/test/starter 」にアクセスして次のように表示されれば完了です。

adminlte画面イメージ

終わりに

本記事では「Rails6でAdminLTEを導入する方法」について紹介しました。

次回は、実際にAdminLTEを利用して「一覧画面」を作成する方法について紹介します。

helpful

-Ruby on Rails