rails + AdminLTE で管理画面を作る


## Railsのバージョン

* Rails4.x

## 方針

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

## bower で AdminLTE をインストール

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

```
$ npm install bower -g
```

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

```Gemfile
gem 'bower-rails'
```

bower-railsの初期設定

```
$ rails g bower_rails:initialize
```

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

```Bowerfile
asset 'admin-lte'
```


## font-awesome を導入

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

```Gemfile
gem 'font-awesome-rails'
```

参考: <a href="https://github.com/bokmann/font-awesome-rails">GitHub - bokmann/font-awesome-rails</a>


## slim-rails を導入

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

```Gemfile
gem 'slim-rails'
```

参考: <a href="https://github.com/slim-template/slim-rails">GitHub - slim-template/slim-rails</a>


## 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の修正

参考: <a href="http://qiita.com/zaburo/items/9447fa64e8bc302e2324">管理画面を作る：AdminLTE 基本編 - Qiita</a>

上記を参考に 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 &copy; 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
```



# 参考


* <a href="https://dev.9bar.tokyo/rails/bower-rails">bower-railsを使ってRailsアプリでもBower環境を | 9bar</a>
* <a href="http://qiita.com/zaburo/items/9447fa64e8bc302e2324">管理画面を作る：AdminLTE 基本編 - Qiita</a>
* <a href="http://qiita.com/niku4i/items/99ee439031330269d49a">Rails + AdminLTE(Bootstrap3) with bower-rails - Qiita</a>
* <a href="https://github.com/bokmann/font-awesome-rails">GitHub - bokmann/font-awesome-rails</a>
* <a href="https://github.com/slim-template/slim-rails">GitHub - slim-template/slim-rails</a>