Freelance Orgsin Official Site

ごゆっくりしていって下さい

Active Admin で Active Storage S3 保存の画像を表示させる

環境

  • Ruby 2.5.1
  • Rails 5.2

S3 の画像を表示と書いたが,他のストレージでも特に違いはないと思われる.イメージしやすいようにS3と表記した.

Gem

github.com

railsguides.jp

paperclipからの移行はこちらにメモった

www.orgsin.com

Active Admin

初期設定

# Gemfile
gem 'activeadmin'
# bash
rails g active_admin:install
rake db:migrate
# rails console などでAdminUserを作っておく
AdminUser.create(
  email: 'hogehoge@example.com', password: 'password'
)

http://localhost:3000/admin/dashboard にアクセスしてログイン.

特定のモデルをAdminに紐付ける

今回はTwitterサービスを開発していたので,既に存在するツイート用のモデルと紐付けた.

rails g active_admin:resource Tweet
# 例:ツイートのモデル
  create_table "tweets", force: :cascade do |t|
    t.string "tweet_id", null: false
    t.string "screen_name", null: false
    t.integer "followers_count", default: 0, null: false
    t.integer "friends_count", default: 0, null: false
    t.text "posted_text", default: "", null: false
    t.text "hashtags", default: "", null: false
    t.datetime "posted_at", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["screen_name"], name: "index_tweets_on_screen_name"
    t.index ["tweet_id"], name: "index_tweets_on_tweet_id", unique: true
  end

↑の例だと, app/admin/tweets.rb という場所にファイルが作られるのでそのファイルに表示させたいものを変更していく.

  show do |t|
    if t.image.attached?

      # ここで画像を表示させている
      attributes_table do
        row :image do |i|
          image_tag url_for(i.image)
        end
      end

      # 実際にどのデータが入っているか見たかったのでAttachmentとBlobも表示させているが本来必要ない
      panel 'image details' do
        column_rel = ->(v) { column v.to_sym }
        table_for t.image_attachment do
          ActiveStorageAttachment.column_names.map &column_rel
        end
        table_for t.image_attachment.blob do
          ActiveStorageBlob.column_names.map &column_rel
        end
      end
    end
  end

記法がよくわからなかった

github.com

このGemで表示させているので,このドキュメントを見るのが早かった.

パーシャルで共通化したものを表示させることもできる