作業ログ admin画面を作る 2019/09/15

※この記事に登場するソースコードは僕個人が開発しているプロジェクトのもので仕事は無関係です

admin画面を作っていきます。

いままでRailsでadmin画面を作る場合、activeadminかrails_adminのどちらかを使うことが多かったんですが、thoughtbot製のものがあることを知ったのでこれを試してみようと思います。

github.com

現時点ではデモも何もみてない状態でなんですが、thoughtbotへの信頼が高まりすぎていて自分のなかではもう完全にadmin画面はこれ一択になってます。

恋は盲目

まずはREADMEを読みます。

Administrate is still pre-1.0, and there may be occasional breaking changes to the API. Check the release notes for important updates.

ウッ、 いきなりひるみました。

Administrate solves the same problem as Rails Admin and ActiveAdmin, but aims to provide a better user experience for site admins, and to be easier for developers to customize.

To accomplish these goals, Administrate follows a few guiding principles:

No DSLs (domain-specific languages) Support the simplest use cases, and let the user override defaults with standard tools such as plain Rails controllers and views. Break up the library into core components and plugins, so each component stays small and easy to maintain.

なるほど。確かにrails_adminだったかactiveadminだったか思い出せませんがDSL少しつらかった記憶あります。

続いてGetting started にしたがってセットアップしていきます。

$ bundle add administrate
$ bundle exec rails g administrate:install

そして localhost:3000/admin にアクセスすると出ました。admin画面。

※内臓（モデル全部）が丸出しになってるのでスクショ貼れないです、、

先のコマンドによって config/routes.rb にこんな感じでrouteが追加されていました。

  namespace :admin do
    resources :users
    resources :foo
    resources :bar

    root to: "users#index"
  end

もちろんこれらはユーザーにアクセスされて良い画面ではないので特定のユーザー（admin）だけがアクセスできるようにroutes.rbをいじります。

このアプリケーションでは User#admin? でadminか否かを判断できるように作ってあるので以下のように書き換えます

  authenticate :user, lambda { |u| u.admin? } do
    namespace :admin do
      resources :users
      resources :foo
      resources :bar

      root to: "users#index"
    end
  end

これでauthenticationは大丈夫になりました。

ひととおり触ってみたら、ActiveStorageを使っているモデルで以下のようなエラーが出ることがわかりました。

NameError in Admin::Images#new
Showing /var/lib/gems/2.5.0/gems/administrate-0.12.0/app/views/fields/has_one/_form.html.erb where line #19 raised:

uninitialized constant FileAttachmentDashboard

いろいろググってみたらこういうGemがあるみたいですね。

github.com

個人的にGemは本当に必要でなければ入れたくないマン（ほかのGemのupdateをブロックしたり、邪魔になることがあるので使うGemは少なければ少ないほど良いと考えています）なので、ここでさらに予定外のGemを追加するのは少し抵抗があります。

解決になっていませんが、このGemの導入は見送ってとりあえず以下のようにアタッチメントは修正できないようにしておきます。

admin画面からファイルを添付するようなケースはいまのところ考えられないのでこれはこれで良いかもしれません。

もし必要になったらそのときにまた検討します

  FORM_ATTRIBUTES = %i[
  folder
-  file_attachment
-  file_blob
  name
  thumbnail_url
  ].freeze

より詳細なドキュメントはここにおいてるみたいです

https://administrate-prototype.herokuapp.com/

僕のアプリケーションの場合はImageモデルのサムネイルを表示できると便利なので少しviewも修正します。

現状のままだとurlが文字列で表示されているのでここを画像が表示されるようにしたい感じです。

f:id:Kenta-s:20190915104919p:plain

ここに書いてあるFieldという概念を使えばまさにやりたいことができそうです

https://administrate-prototype.herokuapp.com/adding_custom_field_types

$ bundle exec rails generate administrate:field thumbnail
Running via Spring preloader in process 3530
      create  app/fields/thumbnail_field.rb
      create  app/views/fields/thumbnail_field/_show.html.erb
      create  app/views/fields/thumbnail_field/_index.html.erb
      create  app/views/fields/thumbnail_field/_form.html.erb

app/fields/thumbnail_field.rbは、to_sというメソッド名は少し気になるものの、とりあえずそのままでよさそうです。

require "administrate/field/base"

class ThumbnailField < Administrate::Field::Base
  def to_s
    data
  end
end

app/views/fields/thumbnail_field/_show.html.erbはimage_tagを使うように変更します

- <%= field.to_s %>
+ <%= image_tag field.to_s %>

最後にImageDashboardクラスを修正

  ATTRIBUTE_TYPES = {
    folder: Field::BelongsTo,
    id: Field::Number,
    name: Field::String,
    created_at: Field::DateTime,
    updated_at: Field::DateTime,
-    thumbnail_url: Field::Text,
+    thumbnail_url: ThumbnailField,
  }.freeze

f:id:Kenta-s:20190915105644p:plain

でました。

app/views/fields/thumbnail_field/_index.html.erbも同じように修正して完了です。