はじめに
この記事は、自分の制作物の流れに沿って作成している記事です。
次の記事は#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を導入
gem 'image_processing', '~> 1.2'
gemfileに記述。bundle installも忘れず実行しましょう。
以上でActiveStorageを使用する準備は整いました。
③モデルに記述
# イメージメソッドの追加
has_one_attached :image
(Refileの時は、attachment :image)
(ActiveStorageの時は、has_one_attached :image)となる。
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を作成し、
root 'homes#top'
topページなので、controllerとアクションだけを記述すれば、ページに遷移する
<%= link_to '新規登録へ', new_user_registration_path %>
<%= link_to 'ログイン画面へ', new_user_session_path %>
中身を作成し、topページの作成は終了。
3.users/showページの中身作成
前回の#1にて、ログイン後の遷移とshowページ自体の作成は行なっているので、
今回は、中身の記述だけ行う。(ActiveStorageの記述方法も)
<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で記述。
def show
@user = User.find(params[:id])
end
最後に
以上で、 ActiveStorageの導入&各ページの微修正が終了しました。
Refileに慣れるとActiveStorageが違和感感じるので、復讐を重ねて慣れていきましょ〜