目次
この記事はアピリッツの技術ブログ「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';
以上で完了