【Rails】RailsにAdminLTEを導入【AdminLTE】

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

RailsにAdminLTEを導入する手順を紹介します。

1. AdminLTEのダウンロード

ここからダウンロード (2015/03/31現在)

2. ダウンロードしたファイルを解凍し、設置

「dist」と「plgins」のフォルダを使用。下記に設置します。 ※/lib/にパスが通っている必要がある

RAILS_ROOT/lib/assets/adminlte/

3. 読み込む必要があるjsとcssをapplication.jsとapplication.cssに記入(導入するファイルは解凍したフォルダのindex.htmlを参考すると良い)

$ vim app/assets/javascripts/application.js

・
・
・
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require adminlte/dist/js/app.js                         ここら辺から読み込む必要があるファイルを記述
//= require adminlte/dist/js/raphael-min
//= require adminlte/plugins/morris/morris.min
//= require adminlte/plugins/sparkline/jquery.sparkline
//= require adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min
//= require adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en
//= require adminlte/plugins/knob/jquery.knob
//= require adminlte/plugins/daterangepicker/daterangepicker
//= require adminlte/plugins/datepicker/bootstrap-datepicker
//= require adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min
//= require adminlte/plugins/slimScroll/jquery.slimscroll.min
・
・
・

$ vim app/assets/stylesheets/application.css

　・
　・
　・
 *= require adminlte　　　　　←このファイルにAdminLTEの読み込むcssをまとめる
　・
　・
　・

$ vim app/assets/stylesheets/adminlte.css.scss

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url('http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css');
@import 'dist/css/AdminLTE.min';
@import 'dist/css/skins/_all-skins.min';
@import 'plugins/iCheck/flat/blue';
@import 'plugins/morris/morris';
@import 'plugins/jvectormap/jquery-jvectormap-1.2.2.css';
@import 'plugins/datepicker/datepicker3';
@import 'plugins/daterangepicker/daterangepicker-bs3';
@import 'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min';

以上で完了