Admin-LTE3を使用した管理画面の実装①（導入の流れ）

今回は、Admin-LTEというGemを導入して管理画面を実装してみました。 layoutファイルの新規作成や、enumオプション、ネームスペースなど、初めて学ぶ事が多くて全体的に苦戦したのですが、JS、CSSの適用に特に時間がかかってしまったので、導入からJS、CSSの適用までを備忘録としてまとめました。

※Admin-LTEとは、bootstrapをベースとした管理画面のテンプレートテーマです。

---

１、yarnを使ってadmin-lteをインストールする。

$ yarn add admin-lte

アプリ直下にnode_modulesというディレクトリが作成され、中身をみると大量のファイルがあるのがわかる。

２、JSとCSSを読み込ませる

「app/assets/javascripts/admin.js」「app/assets/stylesheets/admin.scss」を作成し、node_modules内にある、レイアウトとして使いたいファイルをマニフェストファイルとして読み込む。

今回は、web上で公開されているサンプルページと同じレイアウトにしたいので、サンプルページで検証ツールを開き、htmlで読み込まれているJSとcssと同じファイルを読み込めば良い。

Admin LTE　管理画面のサイトイメージ https://adminlte.io/themes/v3/starter.html

//= require jquery3
//= require rails_ujs
//= require admin-lte/dist/js/adminlte.min <= ここで読み込んでる
//= require admin-lte/plugins/jquery/jquery.min.js
//= require admin-lte/dist/js/adminlte.min.js
//= require admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js

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

//= require jquery3
//= require activestorage
//= require rails-ujs
//= require bootstrap-sprockets
//= require cable.js
- //= require tree. <=これを削除

※この時、application.js内で//= require tree.と記述している場合はエラーが出る。 //= require tree.は、application.jsと同じ階層にあるファイルを一括で読み込むコード。admin.jsは、application.jsと同じ階層にあるので、rails-ujsやjquery3などが二重に読み込まれてしまうのが原因。 そのため、//= require tree.を削除し、同じ階層にあるadmin.js以外のファイルを個別に読み込んでやる必要がある。

また、application.scss内で@import “admin”;のように打つのも二重に読み込まれる原因になるのでお勧めできない。

競合を防ぐために、cssやjsは個別に読み込むべし！

３、新しく作ったJSやCSSを、ビュー側で読み込ませる

html.erbの以下のコードで読み込むjs,cssファイルを指定しているので、 これをapplication => adminに変更してやれば良い。

# 変更前
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %>

# 変更後
<%= stylesheet_link_tag 'admin', media: 'all' %>
<%= javascript_include_tag 'admin' %>

Config/initializer/assets.rbを修正

.
.
.
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 ) <= ここのコメントアウトを解除

これをやらないと正常に読み込まれずにエラーが出てしまう。