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


前回がこちら：https://qiita.com/motty93/items/743710210580f6c1080a

作ったものが綺麗に仕上がっていくのっていいですよね。特に目に見えればもっと満足度があがります。
ということで、今回はバリデーションとUIをちょっとだけ改良していきます。

bookモデルにバリデーションを書いていきます。 `carrierwave`のファイルサイズバリデーションも一緒に入れていきます。  

## バリデーションの追加

通常のバリデーションは簡単ですよね。  

```app/models/book.rb
class Book < ApplicationRecord
  validates :title, :presence => true
  validates :content, :presence => true

  mount_uploader :image, ImageUploader
end
```

一旦タイトルと内容だけバリデーションを入れました。  

次は`image`に関するバリデーションです。  

今回はこちらから拝借しました。  感謝感激雨嵐。

URL(http://blog.otsukasatoshi.com/entry/2016/05/12/112900)  

こちらの`file_size_validator.rb`を`lib`ディレクトリ配下に作成して、`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

    # carrierwaveのファイルサイズのバリデーション
    config.autoload_paths += %W(#{config.root}/lib)

    # 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/locale/ja.yml
---
ja:
  activerecord:
    errors:
      messages:
        wrong_size: "のサイズは%{file_size}に設定してください。"
        size_too_small: "のサイズが小さすぎます。(%{file_size}以上に設定してください)"
        size_too_big: "のサイズが大きすぎます。(%{file_size}以下に設定してください)"
        ・
        ・
        ・
```
`wrong_size`, `size_too_small`, `size_too_big`を追加ですね！

bookモデルに今追加した設定のバリデーションを追加します。  

```app/models/book.rb
class Book < ApplicationRecord
  validates :title, :presence => true
  validates :text, :presence => true
  validates :image, file_size: {maximum: 5.megabytes.to_i}, :presence => false

  mount_uploader :image, ImageUploader
end
```
今回はファイルサイズが最大5MBまで入るように設定しました。それ以上だとバリデーションエラーになります。
ある程度形が出来たので、次はbook本体を少し変えていきたいと思います。

## アクションとformの追加	

`app/admin/book.rb`を見たらわかるのですが、作成したとき何もない状態です。
前回追加した`permit_params :title, :content, :image`があるだけですね。それ以外は全てコメントアウトされてる状態です。
なので、アクションを追加してform、sidebarも一緒に制御してみたいと思います。  

```app/admin/book.rb
ActiveAdmin.register Book do
  permit_params :title, :content, :image

  index do
    selectable_column
    id_column
    column :title, :sortable => true
    column :image, :sortable => true do |image|
      unless image.image.blank?
        image_tag image.image_url(:thumb)
      end
    end
    column :content, :sortable => true
    column :updated_at
    actions
  end

  form(:html => { :multipart => true }) do |f|
    f.inputs "Book Details" do
      f.input :title
      f.input :image
      f.input :content
    end
    f.actions
  end

  show do |item|
    attributes_table do
      row :id
      row :title
      row :image, option: {width: '75', height: '75'}, :sortable => true do |image|
        image_tag image.image_url(:thumb)
      end
      row :content
      row :created_at
      row :updated_at
    end
  end

  sidebar "Book Details", only: :show do
    attributes_table_for book do
      row :title
      row :image, option: {width: '75', height: '75'}
      row :content
      row :created_at
      row :updated_at
    end
  end
end

```
`form`で実際に描画するフォームを制御します。
`sidebar`でページの左右どちらかにコンテンツを配置できます。今回は試しに登録データと同じものをそのまま右に表示してみます。
オプションが所々についてますが、今回説明は省略します。 
気になる方は調べてみてください。   

## まとめ
CarrierWave用のコードを書くのに少々戸惑ってしまいました。。。  

通常のRailsと違ってviewとcontrollerが一緒になっているので戸惑いますよね。
まだまだ慣れないですが、少しずつ頑張っていきます。

ではでは。