Admin-LTEで管理者用ページを実装

今回はAdmin-LTEを使って管理者用ページを作りたいと思います。
Admin-LTEとは管理画面に特化したBootstrapベースのCSSフレームワークです。
管理者用なので凝ったデザインにする必要はないですよね。なのでフレームワークを使ってサクッと作ってしまいたいです。

インストール・設定

yarnでインストールしました。

yarn add admin-lte

インストールするとnode_modulesというディレクトリが作成されます。
今回はこの中のadmin-lte/starter.htmlを見本に作ってみます。
Admin-LTEのページでいろんなテンプレートが見れるのでここから好みのデザインを選ぶのもいいと思います。
Demoでテンプレートを開いて検証ツールを開きます。
CSSはheadタグの中 Image from Gyazo JavaScriptはbodyタグの中 Image from Gyazo
にあるので、app/assets内で必要なものを読み込みます。
管理者用ページとユーザーが使うページのデザインが異なるのでapplication.jsやapplication.scssではなく、新たに管理者用ページのマニフェストファイルadmin.jsとadmin.scssを作成し、そこに記述します。

// app/assets/javascript/admin.js

//= require jquery3
//= require rails-ujs
//= require admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js
//= require admin-lte/dist/js/adminlte.min.js

/* app/assets/stylesheets/admin.scss */

@import 'font-awesome-sprockets';
@import 'font-awesome';
@import 'admin-lte/plugins/fontawesome-free/css/all.min.css';
@import 'admin-lte/dist/css/adminlte.min.css';

application.js内の//= require_tree .は全てのjsファイルを読み込んでしまうので、view毎にデザインを変えたい場合は削除します。

また、application.js、application.scssはデフォルトで読み込んでくれますが、それ以外のマニフェストファイルは設定しないといけないので

# config/initializers/assets.rb

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
Rails.application.config.assets.precompile += %w[admin.js admin.css]  # コメントアウトを外す

とします。

Controllerを作成

管理機能を持つコントローラを作ります。
管理用に階層を分けた方が管理しやすそうです。

rails g controller Admin::Base

でApplicationControllerを継承したAdmin::BaseControllerを作成し、Admin系コントローラの基幹とします。
さらにこのAdmin::BaseControllerを継承したコントローラで管理者ページの機能を作ります。
Image from Gyazo
階層はこんな感じです。
admin/user_sessions_controller.rbとadmin/dashboards_controller.rbは

class Admin::UserSessionsController < Admin::BaseController
　略
end

class Admin::DashboardsController < Admin::BaseController
　略
end

として基幹となるAdmin::BaseControllerを継承します。
また、一般ユーザー用のページとは異なるデザインを当てるため、

class Admin::BaseController < ApplicationController
  layout 'admin/layouts/application'
　略
end

layoutメソッドで使用するlayoutファイルを指定します。

Viewを作成

viewの中身は省略しますが、前述の通りnode_modules/admin-lte/starter.htmlをコピペして不要な部分を削除しました。 layoutファイルでは

<%= stylesheet_link_tag 'admin', media: 'all' %>
<%= javascript_include_tag 'admin' %>

読み込むCSSとJavaScriptをadminと指定します。

ルーティングの設定

管理者用ページのpathはadmin/loginのようにしたいので

  namespace :admin do
    root 'dashboards#index'
    get 'login', to: 'user_sessions#new'
    post 'login', to: 'user_sessions#create'
    delete 'logout', to: 'user_sessions#destroy'
  end

namespaceを使います。すると
Image from Gyazo
ルーティングは/admin/○○のようになります。

enumの定義・管理者かどうかの判別をするカラムを作成

enumとは簡単に言うと名前に数値を割り当てることです。
user.rbでUserモデルにenumの定義をしておきます。

enum role: { general: 0, admin: 1 }

これだけです。

Userモデルで管理者かそうでないかの判別をするroleカラムを作ります。roleとは役割という意味です。

rails g migration add_role_to_users

で作られたマイグレーションファイルに

class AddRoleToUsers < ActiveRecord::Migration[5.2]
  def change
    add_column :users, :role, :integer, default: 0, null: false
  end
end

としてrails db:migrateします。
enumの定義で数字を割り当てたので型はintegerです。
一般か管理者か、必ずどちらか割り当てるためnull: false
デフォルトは一般にしたいのでdefault: 0
とします。
僕はnullとdefaultのオプションを付けずに作ってしまって、後から

rails g migration change_column_to_users

class ChangeColumnToUsers < ActiveRecord::Migration[5.2]
  def change
    change_column_null :users, :role, false
    change_column_default :users, :role, from: nil, to: "0"
  end
end

としようとしたらエラーが出て追加できませんでした。
レコードを全削除したら無事追加できたんですが良い手ではないのでまた調べたいです。
まだ機能が全然ないですがとりあえず管理者用ページができました。

最後に

change_columnできなかったところや管理ツール(yarnなど)のこと、アセットパイプラインなどやればやるほど分からないことが出てきて沼です。
ブログのネタができて嬉しいなぁ…1つ1つ、潰していきたいです。

以上です、ありがとうございました。