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でインストール

npmを使ってbowerをインストール

bowerを使ってadminlteをインストール

以下のコマンドでbower-railsのバージョンを確認

gemfileに以下を追記

bundle installを実行

次に以下のコマンドを叩いて、bower-railsを初期化する

bowerfileが作成されるので、以下を追記

rake bower:installを実行する

.gitignoreにbowerのフォルダを追加

font-awesomeを追加

gemfileに以下を記述し、bundle installを実行

stylesheetとjavascriptを適用する

app/assets/stylesheet/application.cssに以下を追記

app/assets/javascript/application.jsに以下を追記

さいごに

今回は「AdminLTE」というBootstrap3ベースの管理画面用テンプレートをRailsに導入してみました!adminlteを使うとかなり爆速でかっこいい管理画面をつくることができます。管理画面をRailsで作成する際は、是非使ってみてください。


もしよければ応援クリックお願いします
↓↓↓↓↓
にほんブログ村 IT技術ブログ IT技術メモへ