Railsの管理画面の作成方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsの管理画面の作成方法について現役エンジニアが解説しています。管理画面は登録ユーザー、投稿データの管理を確認することのできる画面になります。管理画面の作成にはgemを使う方法や自作する方法があります。今回はRailsAdminのgemを使ってBASIC認証を設定してみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Railsの管理画面の作成方法について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Railsの管理画面の作成方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Railsの管理画面とは

管理画面はそのシステムの管理者が、登録ユーザーや投稿データの管理、日々のデータの推移などを確認することのできる画面になります。

「管理画面には何が必要なのか」といった定義は運用するシステムによって異なりますが、不適切な投稿の削除やユーザー情報の確認など、一般ユーザーではできないことを画面上から実行できれば良いでしょう。

Railsで管理画面を作成するには、RailsAdminなどのgemを使う方法と、何らかの認証機構を使って自分で作る方法とがあります。

管理画面作成用のgemを使う方法

管理画面用のgemとして有名なものは以下の3つです。

  1. RailsAdmin
  2. Administrate
  3. ActiveAdmin

管理画面用のgemを使うメリットとデメリットを挙げておきます。

メリット

  • 自分で作らなくて良い。多くのユーザーが欲しいと思う機能は大体実装されています。
  • インストールや設定するだけで、UI も含めて完成品を使うことができる。CSSの調整なども不要です。

 

デメリット

  • できることや設定方法などを調べる必要がある。膨大なwikiを確認しなければなりません。
  • 自分のシステムに不要な機能も入ってくる。設定でOn/Offできることが多いですが、過剰機能になる可能性もあります。
  • 拡張が困難。gemを使う場合には、gem独自の構文や設定、場合によっては内部構造を知っておく必要があります。

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

自作する方法

gemを使わずに自作するという方法もあります。管理画面として必要な機能は概ね以下の通りでしょう

  • 管理画面用のルーティング
  • 管理者の認証機構
  • (それぞれのシステムで必要な)管理画面用の機能

認証機構はdeviseなどのユーザー管理用のgemを使って実現できます。より簡易的なものでよければ、BASIC認証を利用する程度でも良いでしょう。

主にgemを使う場合の裏返しにはなりますが、メリットとデメリットを挙げておきます。

 

メリット

  • 欲しい機能に絞った管理画面になる。必要と思う機能を自分で実装するので当然ですね。
  • 拡張が容易。自分で作っているので、どこに何を追加すれば良いのかが理解できているはずです。

 

デメリット

  • 各機能を自分で作らなくてはいけないので時間がかかる。何が必要な機能なのか、をきちんと検討して実装する必要があります。
  • UIの調整など、管理画面としての本質以外の対応が必要。見た目を気にしないならば対応不要ですが、得てしてUIの悪い管理画面は使いにくいです。

 

実際に作成してみよう

今回はRailsAdminで管理画面を作成し、BASIC認証をかけるようにしてみましょう。

あらかじめRailsアプリケーションの作成と、何らかのモデル(今回はUser, Group)の作成は終わっているものとします。

 

管理画面の作成

まずはgemをインストールします。 Gemfileに以下を追加しましょう。

gem 'rails_admin', '~> 2.0.0.beta'

編集が終わったら以下のコマンドでインストールします。

$ bundle install

gemのインストールが完了したら、RailsAdminのインストール(セットアップ)を行います。管理画面のパスを聞かれるので /adminで良ければそのままEnterを、変更したい方は好きなパスを入力します。

今回は /adminを管理画面のパスとしています。

$ bundle exec rails g rails_admin:install
Running via Spring preloader in process 2890
? Where do you want to mount rails_admin? Press <enter> for [admin] >
route mount RailsAdmin::Engine => '/admin', as: 'rails_admin'
create config/initializers/rails_admin.rb

RailsAdminのインストールが終わったら、サーバを起動してhttp://localhost:3000/admin にアクセスしてみましょう。

$ bundle exec rails s

以下のような画面が表示されればOKです。

インストール後のRailsAdminの初期画面

どのようなことができるのか、色々とリンクをたどってみましょう。

RailsAdminのユーザー一覧画面

RailsAdminのユーザー追加画面

 

BASIC 認証の設定

管理画面を作ることはできましたが、このままだと誰でもアクセスできてしまうので、BASIC認証を設定しましょう。公式のWikiにBASIC認証の設定方法が記載されているので、そのとおりに設定していきます。

config/initializers/rails_admin.rbに、config.authenticate_withの部分を追加します。

RailsAdmin.config do |config|
  config.authenticate_with do
    authenticate_or_request_with_http_basic('Site Message') do |username, password|
      username == 'foo' && password == 'bar'
    end
  end
# 省略
end

追加したらサーバを再起動して、http://localhost:3000/adminにアクセスしてみましょう。

以下のような認証ダイアログが表示されれば成功です。

Railsに追加したBASIC認証

実際に運用する場合、ユーザー名とパスワードはconfig/initializers/rails_admin.rbには直接書かず、環境変数に設定する方が良いのでご注意ください。

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。