「AdminLTE」とはbootstrapベースの管理画面用テンプレートです。今まで、phpのフレームワークに導入したことが何回かあり、お気に入りのテンプレートの一つです。railsから「AdminLTE」を使ったことがなかったので導入してみました！本記事は、その際のメモです！
AdminLTEとは？
管理画面のダッシュボードやコントロールパネルを簡単に作れるオープンソースのテンプレートです。twitterのcssフレームワークである「Bootstrap3」をベースに作られていてレスポンシブなデザインとなっています。
AdminLTEのいいところは、Bootstrapを拡張して作られているので更なる応用が効きやすい点です。他のテンプレートだと独自のクラスなどで定義されてしまっていて、中々自分の思うように拡張しづらいです。しかし、AdminLTEでは、Bootstrapと同じ書き方で書かれているので、自分で更に修正していくときにかゆいところに手が届きます。
本家サイトはこちらです
adminlte 2 | documentation
AdminLTEをrailsに導入してみました！
ここからはAdminLTEを実際にrailsに導入してみたメモです。
rails + adminlte(bootstrap3) with bower-rails - qiita
を参考に入れていく
admin-railsというgemがあるが、対応しているAdminLTEのバージョンが古いから使用しない。
代わりに、bowerでAdminLTEを管理する。
方針としては、bower-railsというgemをインストールし、bowerでAdminLTEをインストールしていく。
bowerのインストールは以下の記事を参考
bower入門(基礎編) - from scratch
bowerとは？
bowerとは、twitter製のフロントエンド用のパッケージマネージャー。
rubyにおけるgem、pythonにおけるpip、javaにおけるmavenみたいなもの。
node.jsにおけるnpmの影響を大きく受けている。
bowerのインストール方法
bowerをインストールするには、node.jsを入れて、npmからインストールしていく
macを使っている場合、homebrewからnode.jsをインストールするのがおすすめ！
node.jsをhomebrewでインストール
$ brew install node.js
$ node -v
npmを使ってbowerをインストール
$ npm install bower -g
$ bower -v
bowerを使ってadminlteをインストール
以下のコマンドでbower-railsのバージョンを確認
$ gem search bower-rails
gemfileに以下を追記
gem 'bower-rails', '0.10.0'
bundle installを実行
次に以下のコマンドを叩いて、bower-railsを初期化する
$ rails g bower_rails:initialize
bowerfileが作成されるので、以下を追記
asset 'admin-lte'
rake bower:installを実行する
.gitignoreにbowerのフォルダを追加
$ echo /vendor/assets/bower_components >> .gitignore
font-awesomeを追加
gemfileに以下を記述し、bundle installを実行
gem font-awesome-rails
stylesheetとjavascriptを適用する
app/assets/stylesheet/application.cssに以下を追記
*= require_tree .
*= require admin-lte/bootstrap/css/bootstrap
*= require admin-lte/dist/css/AdminLTE
*= require admin-lte/dist/css/skins/skin-red
*= require font-awesome
*= require_self
app/assets/javascript/application.jsに以下を追記
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require admin-lte/dist/js/app
//= require_tree .
さいごに
今回は「AdminLTE」というBootstrap3ベースの管理画面用テンプレートをRailsに導入してみました！adminlteを使うとかなり爆速でかっこいい管理画面をつくることができます。管理画面をRailsで作成する際は、是非使ってみてください。