rails + AdminLTE で管理画面を作る

Railsのバージョン

• Rails4.x

方針

• AdminLTE の管理は bower を使用する
• テンプレートは slim を使用
• css 拡張として sass を使用（記法は scss を採用）

bower で AdminLTE をインストール

bower をインストール（node.js はインストールされている前提）

$ npm install bower -g

Gemfile に以下を記述し bundle install を実行

gem 'bower-rails'

bower-railsの初期設定

$ rails g bower_rails:initialize

Bowerfile が作成されるので以下を記述し、rake bower:installで AdminLTE をインストール

asset 'admin-lte'

font-awesome を導入

Gemfile に以下を記述し bundle install を実行

gem 'font-awesome-rails'

参考: GitHub - bokmann/font-awesome-rails

slim-rails を導入

Gemfile に以下を記述し bundle install を実行

gem 'slim-rails'

参考: GitHub - slim-template/slim-rails

styleseet と javascript を適用する

以下のように app/assets/stylesheet/application.css に require を追記

app/assets/stylesheet/application.css

@import "admin-lte/bootstrap/css/bootstrap";
@import "admin-lte/dist/css/AdminLTE";
@import "admin-lte/dist/css/skins/skin-red";
@import "font-awesome";

同様に app/assets/javascript/application.js に require を追記

app/assets/javascript/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require admin-lte/bootstrap/js/bootstrap    <- 追記
//= require admin-lte/dist/js/app               <- 追記
//= require_tree .

scaffoldの作成

$ rails g scaffold Product name:string price:integer
$ rake db:migrate
$ rails s

layoutの修正

参考: 管理画面を作る：AdminLTE 基本編 - Qiita

上記を参考に app/views/layout/application.html.slim を作成。
ページの構成はヘッダー + サイドバー + コンテンツエリア + フッター の構成。

すでに application.html.erb が存在するので以下のようにファイル名を .slim に変更する

$ mv app/views/layouts/application.html.erb app/views/layouts/application.html.slim

以下のように app/views/layout/application.html.slim を編集

app/views/layout/application.html.slim

html
  head
    title Adminlte
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags

  body.skin-blue
    div.wrapper
      header.main-header
        = link_to "管理画面", {}, { class: "logo" }
        nav.navbar.navbar-static-top role="navigation"
          ul.nav.navbar-nav
            li
              = link_to "ナビゲーション", {}

      aside.main-sidebar
        section.sidebar
          ul.sidebar-menu
            li.header 機能一覧
            li
              = link_to "メニュー項目", {}

      div.content-wrapper
        = yield

      footer.main-footer
        div.pull-right.hidden-xs Version1.0
        strong Copyright © 2016
        |  All rights reserved.

既存の view に AdminLTE のスタイルを適用

scaffold で作成された app/views/products/index.html.slim を以下のように修正

app/views/products/index.html.slim

section.content-header
  h1 商品管理

section.content
  div.box
    div.box-header.with-border
      h3.box-title 一覧

    div.box-body
      table.table.table-bordered.table-hover
        thead
          tr
            th 名前
            th style="width:10em" 価格
            th colspan="3"
        tbody
          - @products.each do |product|
            tr
              td
                = product.name
              td
                = product.price
              td style="width:7em"
                = fa_icon "eye"
                = link_to "参照", product
              td style="width:7em"
                = fa_icon "pencil"
                = link_to "編集", edit_product_path(product)
              td style="with:7em"
                = fa_icon "remove"
                = link_to "削除", product, method: :delete, data: { confirm: "削除してよろしいですか?" }
      br
      = link_to 'New Product', new_product_path, { class: "btn btn-default" }

skin の変更

skin の変更は application.css.scss と layout/application.html.slim の変更で行う。
skin を red に変更するにはそれぞれのファイルを以下のように変更する。

app/assets/stylesheets/application.css.scss

@import "admin-lte/dist/css/skins/skin-red";  <-- ここ

app/views/layouts/application.html.slim

  body.skin-red

参考

* bower-railsを使ってRailsアプリでもBower環境を | 9bar
* 管理画面を作る：AdminLTE 基本編 - Qiita
* Rails + AdminLTE(Bootstrap3) with bower-rails - Qiita
* GitHub - bokmann/font-awesome-rails
* GitHub - slim-template/slim-rails