プログラマーをダメにした管理画面を改良していく その１

前回がこちら
プログラマーをダメにするという噂のgemで管理画面を作成してみた
https://qiita.com/motty93/items/5e9f9306cd7c3070c7a6

今回は作成した管理画面をもう少し使いやすくしていきたいと思います。

Commentsをなくす

今回、ActiveAdmin標準装備であるcommentsは使わない & 邪魔なので設定ファイルで無効化しておきます。

設定ファイルは config/initializers/active_admin.rbで行います。

config/initializers/active_admin.rb

ActiveAdmin.setup do |config|
  # == Site Title
  #
  # Set the title that is displayed on the main layout
  # for each of the active admin pages.
  #
  config.site_title = "Admin"
  config.comments = false

  # Set the link url for the title. For example, to take
  # users to your main site. Defaults to no link.
  #
  # config.site_title_link = "/"
  ・
  ・
  ・

config.comments = falseこの一行を追加しておいてください。

サーバーを再起動して画面を見ると、消えているのが確認できます。

日本語化

私たちは日本人なので、やはり日本語で見えたほうが使い勝手はいいですよね。
英語の方がイケてる感じに見えるんですけど！

英語でも大丈夫な方はそのままで、日本語にしたい場合は以下の設定を行っていってください。

githubに日本語用localesがあるので、それ拝借します。先人のお方に感謝いたします。

URL(https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml)

これを config/locales配下に作成して配置してください。

設置したファイルを反映させます。 config/application.rbに変更を加えます。

config/application.rb

require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module Admin
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.1
    config.i18n.default_locale = :ja

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
  end
end

config.i18n.default_locale = :jaこの一行を追加してください。

そして、またサーバーを再起動し画面を確認。

ちゃんと日本語になっているはずですね！　　

※もし反映されない場合はspringを再起動してみてください。

画像アップロード準備

今の画面では画像のアップロードが出来ないです。それだけでも不便に感じますよね。

Bookを登録するときに画像も貼れたらよくないですか？イケてる感じになりますよね！

てなわけで、機能を追加していきます。

画像アップロードのcarrierwaveとサイズ調整のrmagickというgemを追加します。

※rmagickはかなりの確率でエラーになってしまうので要注意です。トラブルシューティングに慣れていない方は導入しないように。
ですが、サムネイルの表示でrmagickが必要になるので、入れないといけないんですけどね！←

・
・
・
gem 'carrierwave'
gem 'rmagick'
・
・

追加後、 bundle installを行ってください。

補足

rmagickにはImagemagickというライブラリが必要になります。

最新のrmagickが最新のImagemagickに対応していないので、Imagemagickの6系を指定してインストールしてあげるとrmagickもうまく入ってくれると思います。

あくまで補足なので、今回は手順を省きます。何かあればコメントに！

画面へ反映させる

画像をアップロードできるようにしていきます。

$ rails g uploader Image
Running via Spring preloader in process 62027
      create  app/uploaders/image_uploader.rb

作成されたimage_uploader.rbを編集します。

今回はコメントアウトされていたデフォルトのメソッド等を有効にし、いくつか新しく設定を加えてあげます。

app/uploaders/image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  process resize_to_fit: [1280, 720]
  process :convert => 'jpg'
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  version :thumb do
    process resize_to_fit: [100, 100]
  end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  def filename
    "something.jpg" if original_filename
  end

end

index, showの画面でサムネイルが表示されるようにrmagick用の設定を行っています。

ちょっとここには時間がかかってしまいましたが。。。

Bookモデルにuploaderを追加します。

app/models/book.rb

class Book < ApplicationRecord
  mount_uploader :image, ImageUploader
end

これでいけるはず！！！

・・・出てこない。

と思ったら画面上に用意してないだけでした←

なので、bookモデルにimage用のカラムを追加してあげます。

画像(image)用のカラム追加

$ rails g migrations add_image_to_book image:string
Running via Spring preloader in process 62682
      invoke  active_record
      create    db/migrate/20170608055232_add_image_to_book.rb

$ ./bin/rails db:migrate RAILS_ENV=development

このままだと画像は登録できないので(しかも5.1系だとエラーメッセージが出ない)追加したカラムの登録権限を与えます。

app/admin/book.rb

ActiveAdmin.register Book do
# See permitted parameters documentation:
# https://github.com/activeadmin/activeadmin/blob/master/docs/2-resource-customization.md#setting-up-strong-parameters
#
# permit_params :list, :of, :attributes, :on, :model
#
# or
#
# permit_params do
#   permitted = [:permitted, :attributes]
#   permitted << :other if params[:action] == 'create' && current_user.admin?
#   permitted
# end
  permit_params :title, :content, :image
end

params_permitの一行に:imageを追加するだけです。

まとめ

ついでなので、carrierwave専用にバリデーションを設定してみようと思いますが、それはまた次回にします。

ではでは。

次：https://qiita.com/motty93/items/123514c61e03c8a0b5f8