• 現状：

  記事にアイキャッチ画像を紐付けることが出来ますが、表示する際に画像の大きさが選べません。

  （その為に常に横幅100%の大きさで画像が表示されてしまい、見栄えが悪くなっています。）

• 期待する機能：

  1. 記事編集時に、画像の横幅をピクセル単位で指定できるようにする。

  2. 表示されるアイキャッチ画像の横幅を、指定した大きさで表示されるようする。

  3. 登録できる画像の横幅は100〜700pxの間とする。

     横幅が100pxより小さいサイズで登録された場合は「100以上の値にしてください」というバリデーションエラーを表示する。

     横幅が700pxを超えたサイズで登録された場合は「700以下の値にしてください」というバリデーションエラーを表示する。

  4. 記事編集画面に「左寄せ」「中央」「右寄せ」のラジオボタンを設定する。

     ラジオボタンにて選択された位置に画像が表示されるように改修する。

     アイキャッチ横幅用のカラムは eyecatch_width で作成する。

     アイキャッチ横幅の入力フォームは placeholder に 100 を設定する。

• まず、選択した画像がどのように実装されているのかを確認する。

decorators/article_decorators.rb

module ArticleDecorator
def eye_catch_url(version = :origin)                      # 引数を渡す。　デフォルト値は origin
    if !eye_catch.attached? || eye_catch.metadata.blank?  # 画像がない場合、もしくは画像のメタデータがからの場合
      return '/images/eye_catch.jpg'                      # '/images/eye_catch.jpg' を返す
    end

    command = case version                  # version が、
              when :thumb                   # :thumb の場合
                { resize: '640x480' }
              when :lg                      # :lg の場合
                { resize: '1024x768' }
              when :ogp                     # :ogp の場合
                { resize: '120x630' }
              else
                false
              end

    command ? eye_catch.variant(command).processed : eye_catch  # commandがtrue の場合、条件分岐された結果に画像がリサイズされる。falseの場合、リサイズされず、eye_catch が返される
  end
end

[checkポイント]
・attached?: レシーバのオブジェクトに指定のファイルが紐付いていればtrueを返す。紐付いていなければ、falseを戻り値として返すメソッド。
・variant: 画像を変換する際に使われるメソッド。このメソッドを使うためには、image_processing gemをGemfileに追加する必要がある。
・processed: これを付けることで、すでにそのサイズで保存されて画像があれば、変換処理は行われず、即時にURLが返される。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■アイキャッチ導入手順：

• 記事(article)に画像サイズと位置指定のカラムを追加

$ rails g migration AddColumnToArticles eyecatch_width:integer eyecatch_position:integer

✖️✖️✖️✖️✖️✖️✖️.add_column_to_articles.rb

class AddColumToArticles < ActiveRecord::Migration[5.2]
	def change
		add_column :articles, :eyecatch_width, :integer
		add_column :articles, :eyecatch_position, :integer, default: 0, null: false
	end
end

[checkポイント]
・defalt: 0: デフォルト値が設定されない場合、0になるよう設定します。
・null: false: NULLを許可しないよう設定します。

• 指定位置のenum設定やバリデーションの入力

app/models/article.rb

enum eyecatch_align: { left: 0, center: 1, right: 2 }
validates :eyecatch_width, numericality: { less_than_or_equal_to: 700, greater_than_or_equal_to: 100 }, allow_blank: true

[checkポイント]
・先程カラムを追加したときに、0が中央になるよう設定したので、それに合わせて1が左、2を右に記入。

・**numericality**とはバリデーションヘルパーの一種で、属性に数値のみ保存できる役割を果たしている。
・**less_than_or_equal_to**: 指定された値と等しいか、それよりも小さくなければならないことを指定します。
・**greater_than_or_equal_to**: 指定された値と等しいか、それよりも大きくなければならないことを指定します。

• 入力ホームを日本語化する

config/locales/enums.ja.yml

ja:
	enums:
		article:
			eyecatch_position:
				left: '左寄せ'
				center: '中央'
				right: '右寄せ'

config/locales/activerecord.ja.yml

ja:
	activerecord:
		attributes:
			article:
				eyecatch_width: 'アイキャッチ幅'