#1.25 ActiveStorageの導入&各ページの微修正

#はじめに
この記事は、自分の制作物の流れに沿って作成している記事です。
次の記事は#1.5のユーザー編集ページの作成でしたが、その前にページの中身記述や、ActiveStorageの導入などに気付き、この中途半端な#になってしまいました。

#目次
1.ActiveStorageの導入
2.Topページの作成
3.users/showページの中身作成

##1.AWS Cloud9で新しくIDE(開発環境)を立ち上げる
流れとしては、、、
①RailsアプリケーションにActiveStorageをインストール
⬇︎
②画像プロセッサのgemを導入
⬇︎
③モデルに記述
⬇︎
④ストロングパラメーターに記述(今回はやりません。次回の#1.5で記述します。)
という流れになります。この流れで説明していきます。
####①RailsアプリケーションにActiveStorageをインストール

$ rails active_storage:install

ActiveStorageを利用するために必要なマイグレーションファイルが生成される。

$ rails db:migrate

migrateを行い、データベースへ反映させる。
####②画像プロセッサのgemを導入

Gemfile

gem 'image_processing', '~> 1.2'

gemfileに記述。bundle installも忘れず実行しましょう。
以上でActiveStorageを使用する準備は整いました。
####③モデルに記述

user.rb

# イメージメソッドの追加
has_one_attached :image

(Refileの時は、attachment :image)
(ActiveStorageの時は、has_one_attached :image)となる。

user.rb

validate :image_type

private

def image_type
  if !image.blob.content_type.in?(%('image/jpeg image/png'))
    image.purge # Rails6では、この1行は必要ない
    errors.add(:image, 'はJPEGまたはPNG形式を選択してアップロードしてください')
  end
end

バリデーションを設定。
JPEG、PNG以外の拡張子のファイルをアップロードした場合には、エラーメッセージが表示されるようになります。

以上で、　ActiveStorageの導入は終了になります。
表示の仕方については、目次の3.users/showページの中身作成で記述しているので、そちらを参照してください。

##2.Topページの作成
目的：rails でサーバーを立ち上げた際に、毎回Topページへ遷移するので
Topページを作成し、リンクを設置する。

$ rails g controller homes

homes controllerを作成。controller/homes_controllers.rbにてtopアクションを記述。
views/homesにtop.html.erbを作成し、

~/config/routes.rb

root 'homes#top'

topページなので、controllerとアクションだけを記述すれば、ページに遷移する

homes/top.html.erb

<%= link_to '新規登録へ', new_user_registration_path %>
<%= link_to 'ログイン画面へ', new_user_session_path %>

中身を作成し、topページの作成は終了。

##3.users/showページの中身作成
前回の#1にて、ログイン後の遷移とshowページ自体の作成は行なっているので、
今回は、中身の記述だけ行う。(ActiveStorageの記述方法も)

users/show.html.erb

<h2>User info</h2>
<!--ActiveStorageを用いて-->
<% if @user.image.attached? %>
  <%= image_tag @user.image.variant(resize:'200x200'), class:"rounded-circle" %>
<% else %>
  <%= image_tag 'no_image.jpg', class:"rounded-circle" %>
<% end %>

<%= @user.name %>
<%= @user.introduction %>
<%= @user.status %>

'no_image.jpg'は自分で用意する。(assets/imagesの中に配置する。)
introductionやstatusはまだ何も書いてないが、次の#1.5で記述できるようになるので、今のうちに書いておく。

####ActiveStorageの表示の仕方
※Refileと比べて

	Refile	ActiveStorage
フォームの作成	<%= f.attachment_field :image %>	<%= f.file_field :image %>
画像の表示	<%= attachment_image_tag @user, :image %>	<%= image_tag @user.image %>
画像をリサイズして表示	<%= attachment_image_tag @user, :image, :fill, 300, 300, format: 'jpeg' %>	<%= image_tag @user.image.variant(resize:'300x300') %>

となるので、これを用いてshow.html.erbには記述する。
そして、今のままだとエラーが発生するので、最後に@userの中身をcontrollerで記述。

~/controller/users_controller.rb

def show
  @user = User.find(params[:id])
end

##最後に
以上で、 ActiveStorageの導入&各ページの微修正が終了しました。
Refileに慣れるとActiveStorageが違和感感じるので、復讐を重ねて慣れていきましょ〜