Ruby on Rails

Ruby on Rails – Bootstrap3ベースの管理画面用テンプレート「AdminLTE」を導入する方法

「AdminLTE」とはbootstrapベースの管理画面用テンプレートです。今まで、phpのフレームワークに導入したことが何回かあり、お気に入りのテンプレートの一つです。railsから「AdminLTE」を使ったことがなかったので導入してみました!本記事は、その際のメモです!

Railsにbootstrapベースの管理画面用テンプレート「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で作成する際は、是非使ってみてください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です