トップ > 【Rails】AdminLTEについて

【Rails】AdminLTEについて

はじめに

管理画面を作るのが大変。そこで、管理画面作成に特化したCSSフレームワークAdminLTEについて記していきます。

インストール

$ yarn add admin-lte@^3.0

このように様々なファイルが取り込まれます。 yarnでインストールしたので、ルートディレクトリ直下の、node_modules/以下を確認しましょう。

Image from Gyazo

いろいろ展開されますが、adminLTEの本体はdist以下に格納されています。 あとは、依存関係のあるbootstrap, jquery(plugins/jQuery/)などなど。

これをRailsで読み込んでいきます。

まず、app/assets/stylesheets/admin.scssとapp/assets/javascripts/admin.jsを作成しましょう。

ここには、何を読み込むかを記載します。 たとえば、

app/assets/stylesheets/admin.scss

@import 'admin-lte/dist/css/adminlte.min.css';

app/assets/javascripts/admin.js

//= require admin-lte/dist/js/adminlte.min

このような、形で読み込みます。これは、node_modulesから取り込んでいます。 では、どうやってadmin-lte/dist/js/adminlte.minを探しているのか？ node_modules/admin-lte/dist/js/adminlte.minではないのか？

それは、 config/initializers/assets.rbにパスが書いてあるからです。

assets.rb

Rails.application.config.assets.version = '1.0'

# パスの記述
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# 他のマニフェストや、個別のスタイルシート/JavaScriptファイルをインクルードしたい場合は、config/initializers/assets.rbのprecompileという配列を使用します。
Rails.application.config.assets.precompile += %w[admin.js admin.scss]

これで準備完了です。

layoutsの指定

あとは、viewにこのadmin.scssとadmin.jsを参照するlayoutを指定しましょう。

admin/layouts/admin.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= page_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>


    <%= stylesheet_link_tag    'admin', media: 'all' %> #ここをadminに変更
    <%= javascript_include_tag 'admin' %>#ここをadminに変更
  </head>

  <body>
    
    <%= yield %>
  
  </body>
</html>

###あとは使用したいコントローラーにlayoutメソッドを使用し、使用したいlayoutを指定します。

controller

class Admin::UserSessionsController < Admin::BaseController
  
  layout 'admin_login' #こんな感じ

  def new; end

  def create
    @user = login(params[:email], params[:password])
    if @user&.admin?
      redirect_to admin_root_path, success: 'ログインしました'
    elsif @user
      redirect_to root_path, danger: '権限がありません'
    else
      flash[:danger] = 'ログインに失敗しました'
      render :new
    end
  end

  def destroy
    logout
    redirect_to admin_login_path, success: 'ログアウトしました'
  end
end