オーダーメイドコース
icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

 
そもそもRubyについてよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

Railsの管理画面とは

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

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

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

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

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

  1. RailsAdmin
  2. Administrate
  3. ActiveAdmin

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

メリット

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

 

デメリット

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

 

[PR] 未経験からWebエンジニアを目指す方法とは

自作する方法

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では、初心者でもRuby on Railsを使ったプログラミングを習得できるオンラインブートキャンプRuby講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。